解决页面刷新后firefox浏览器中iframe内容不更新的问题

最近遇到了一个问题:使用firefox浏览切换2层iframe下的某个页面后iframe内容未更新,Chrome和Edge浏览器并无这个问题。在这个项目中,最外层的iframe用于隐藏url,里层的iframe用于给不同参数的url提供一个统一地址以便于权限路由等控制。由于项目比较复杂,用简单的代码很难去复现这个bug。这里只能贴出解决办法。

查阅资料后发现是firefox浏览器的iframe缓存引起的。试用了以下几个办法

禁止页面缓存

<?php
header("Cache-Control: no-cache, no-store, must-revalidate"); // HTTP 1.1.
header("Pragma: no-cache"); // HTTP 1.0.
header("Expires: 0"); // Proxies.

?>

问题依然存在

在url参数中添加动态参数

<iframe src="url?ts=<?= time();?>"></iframe>

均未能解决问题

重新加载url

<script>
    const iframe = $('iframe')[0];
    const url = "{{ url('page') . '?pt=' . $pt }}";
    // console.log(iframe.contentDocument, iframe.contentWindow)
    if (/firefox/i.test(navigator.userAgent)) {
        iframe.src = url;
        // iframe.contentWindow.location.reload();//此种方法不生效
    }
});
</script>

此种方法终于生效

iframe的使用详解

posted @ 2024-06-21 10:21  carol2014  阅读(276)  评论(0)    收藏  举报