Javascript 刷新iFrame（缓存问题）_Javascript_Html_Iframe

Javascript 刷新iFrame（缓存问题）

javascript html iframe

Javascript 刷新iFrame（缓存问题）,javascript,html,iframe,Javascript,Html,Iframe,我们遇到了一个奇怪的问题，我们不确定到底是什么原因导致了它。让我详细说明这个问题。假设我们有两个不同的html页面a.html和b.html。还有一个用index.html编写的小脚本： <html> <head> <script> function reloadFrame(iframe, src) { iframe.src = src; } </script> </head> <

我们遇到了一个奇怪的问题，我们不确定到底是什么原因导致了它。让我详细说明这个问题。假设我们有两个不同的html页面a.html和b.html。还有一个用index.html编写的小脚本：

<html>

<head>
    <script>
    function reloadFrame(iframe, src) {
        iframe.src = src;
    }
    </script>
</head>

<body>
    <form>
        <iframe id="myFrame"></iframe>
        <input type="button" value="Load a.html" onclick="reloadFrame(document.getElementById('myFrame'), 'a.html')">
        <input type="button" value="Load b.html" onclick="reloadFrame(document.getElementById('myFrame'), 'b.html')">
    </form>
</body>

</html>


函数重载帧（iframe，src）{
iframe.src=src；
}

服务器组件正在不断更新文件A.html和b.html。问题是两个文件的内容都在服务器端成功更新。如果我们打开，我们可以看到更新的更改，但客户端得到的是旧内容，而不显示更新的更改

有什么想法吗？

将其添加到a.html和b.html中

<head>
    <meta http-Equiv="Cache-Control" Content="no-cache" />
    <meta http-Equiv="Pragma" Content="no-cache" />
    <meta http-Equiv="Expires" Content="0" />
</head>

要强制不进行缓存检查，以找到一种可能的解决方案，请将“缓存参数”传递给对a.html和b.html的调用。比如说

HTML

如果可以向这些HTML文件添加服务器端指令，则可以发送适当的头以防止缓存：

（我认为大家一致认为第二个答案是最好的，而不是公认的答案）

Simone的答案已经涉及元标记

一个廉价快捷的技巧是添加一个随机数作为GET参数：

page_1.html?time=102398405820

如果每次请求时都发生更改（例如使用当前时间），则每次都会强制重新加载。

请尝试以下操作：

<script>
    var frameElement = document.getElementById("frame-id");
    frameElement.contentWindow.location.href = frameElement.src;
</script>


var frameElement=document.getElementById（“框架id”）；
frameElement.contentWindow.location.href=frameElement.src；

这将强制重新加载iframe，即使它是由浏览器缓存的

Homero Barbosa的解决方案非常有效。在我的例子中，我在页面上有不同数量的iFrame，因此我做了以下工作：

$('.some_selector').each(function () {
  var $randid = Math.floor(Math.random() * 101);
  $(this).attr({'id': 'goinOnaSafari-' + $randid});

  var $frame = document.getElementById('goinOnaSafari-' + $randid);
  $frame.contentWindow.location.href = $frame.src;
});

我想提出一个单独的答案，扩展

简单实现随机数技巧需要注意的一点是，在重复调用时，可能会出现类似“page_1.html？time=123？time=456？time=789？time=012”这样的URL。无害但丑陋的IMHO。下面是在javascript中为iframe.src添加时间。函数reloadIframe（）{var-iframe=document.getElementById（'iframeId'）；var d=new Date（）；iframe.src=iframe.src+“？”+d.getTime（）；}@Ben-没有任何迹象表明在这个问题中使用了XHTML。例如，输入也没有结束标记。此解决方案不适用于我，请检查是否有记录在案？

<script>
    var frameElement = document.getElementById("frame-id");
    frameElement.contentWindow.location.href = frameElement.src;
</script>

$('.some_selector').each(function () {
  var $randid = Math.floor(Math.random() * 101);
  $(this).attr({'id': 'goinOnaSafari-' + $randid});

  var $frame = document.getElementById('goinOnaSafari-' + $randid);
  $frame.contentWindow.location.href = $frame.src;
});

//ensure iframe is not cached
function reloadIframe(iframeId) {
    var iframe = document.getElementById(iframeId);
    var d = new Date();
    if (iframe) {
        iframe.src = iframe.src + '?ver=' + d.getTime();
        //alternatively frameElement.contentWindow.location.href = frameElement.src; //This will force the iframe to be reloaded even if it was cached by the browser
    }
}
reloadIframe('session_storage_check');