在 AJAX 中自动刷新 iframe答案

【问题标题】：Refresh an iframe automatically in AJAX在 AJAX 中自动刷新 iframe
【发布时间】：2017-12-14 08:22:05
【问题描述】：

我有一个简单的iframe，我想每 5 秒刷新一次，而无需单击某处或根本不做任何事情

 <iframe src="my-messages.php">

他们希望用户点击某处，我不希望。我希望这是一个自动过程。

【问题讨论】：

你搜索了多少？ Refresh an iframe automatically 在 Google 中，排名靠前 ► stackoverflow.com/questions/5146805/… stackoverflow.com/questions/6975765/… stackoverflow.com/questions/34123053/auto-refresh-iframe-html 等..

标签： javascript ajax iframe

【解决方案1】：

最简单的方法是使用刷新元标记。只需将其添加到 my-messages.php 的头部...

<meta http-equiv="refresh" content="5" />

或者，将其添加到 my-messages.php 以便使用 Javscript 执行相同的操作...

<script>
    setTimeout(function() {
        window.location.reload();
    }, 5000);
</script>

【讨论】：

这是否会在手动访问时刷新页面，例如。直接去my-messages.php？也感谢您的快速答复。
是的，它可以在页面上工作，无论是顶部还是 iframe 中。

【解决方案2】：

再次使用 javascript 将 iframe 的 src 更改为“my-messages.php”。这是一个使用 JQuery 选择元素的解决方案。

<iframe src="my-messages.php" id="frame">

在你的 JS 中

var refreshMS = 10000;
var $frame = $('#frame');
var timeoutFunction = function(){
  $frame.attr("src", "");
  $frame.attr("src", "my-messages.php");
  setTimeout(timeoutFunction, refreshMS);
};
setTimeout(timeoutFunction, refreshMS);

这基本上每 10 秒设置一次 src 元素，导致 iframe 重新加载其内容。

编辑：推荐的非 jquery 版本

var refreshMS = 10000;
var frame = document.getElementById("frame");
var timeoutFunction = function(){
  frame.setAttribute("src", "");
  frame.setAttribute("src", "my-messages.php");
  setTimeout(timeoutFunction, refreshMS);
};
setTimeout(timeoutFunction, refreshMS);

【讨论】：

如果您还没有使用 JQuery，则需要在页面中包含它。
你可以在没有 jQuery 的情况下做到这一点。使用 vanilla JS，这样他们就不必为一件事包含整个库。
这是否包括 JQuery: <script src="assets/js/jquery.min.js"></script> ？是的，我的 js 文件夹中有这个脚本。
我已经继续并提供了一个不需要 JQuery 的示例。对不起，我很懒。
@DimitarBogdanov 这可能是 Chrome 不触发刷新的问题，除非实际值发生变化。我已将示例更新为首先将 src 设置为空，然后返回正确的源。这应该会正确触发浏览器现在刷新 iframe。

【解决方案3】：

这是一种方法，但如果用户在 iframe 中执行任何操作，他们将失去进度。

window.setInterval(function() {
  document.querySelector('iframe.reload').setAttribute('src', 'https://freesecure.timeanddate.com/clock/i5sso5fg/n1328/tluk');
}, 5000);

&lt;iframe class="reload" src="https://freesecure.timeanddate.com/clock/i5sso5fg/n1328/tluk" frameborder="0" width="57" height="18"&gt;&lt;/iframe&gt;

【讨论】：

我现在就试试。