解决页面刷新后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的使用详解

本部分内容来源自 https://mp.weixin.qq.com/s?__biz=MjM5MDA2MTI1MA==&mid=2649103699&idx=4&sn=8f51011680bb44e363ff6f3d696c2df3&chksm=be583afe892fb3e8d8b93a72c512ba667708e50c302bcee8431ad92a18ad6a8002c5af0925b0&scene=27

allowfullscreen：允许嵌入的网页全屏显示，需要全屏 API 的支持，请参考相关的 JavaScript 教程。
frameborder：是否绘制边框，0为不绘制，1为绘制（默认值）。建议尽量少用这个属性，而是在 CSS 里面设置样式。
src：嵌入的网页的 URL。
width：显示区域的宽度。
height：显示区域的高度。
sandbox：设置嵌入的网页的权限，详见下文。
importance：浏览器下载嵌入的网页的优先级，可以设置三个值。high表示高优先级，low表示低优先级，auto表示由浏览器自行决定。
name：内嵌窗口的名称，可以用于<a>、<form>、<base>的target属性。
referrerpolicy：请求嵌入网页时，HTTP 请求的Referer字段的设置。参见<a>标签的介绍。

sandbox 属性

嵌入的网页默认具有正常权限，比如执行脚本、提交表单、弹出窗口等。如果嵌入的网页是其他网站的页面，你不了解对方会执行什么操作，因此就存在安全风险。为了限制<iframe>的风险，HTML 提供了 sandbox属性，允许设置嵌入的网页的权限，等同于提供了一个隔离层，即“沙箱”。

sandbox属性可以设置具体的值，表示逐项打开限制。未设置某一项，就表示不具有该权限。

allow-forms：允许提交表单。
allow-modals：允许提示框，即允许执行window.alert()等会产生弹出提示框的 JavaScript 方法。
allow-popups：允许嵌入的网页使用window.open()方法弹出窗口。
allow-popups-to-escape-sandbox：允许弹出窗口不受沙箱的限制。
allow-orientation-lock：允许嵌入的网页用脚本锁定屏幕的方向，即横屏或竖屏。
allow-pointer-lock：允许嵌入的网页使用 Pointer Lock API，锁定鼠标的移动。
allow-presentation：允许嵌入的网页使用 Presentation API。
allow-same-origin：不打开该项限制，将使得所有加载的网页都视为跨域。
allow-scripts：允许嵌入的网页运行脚本（但不创建弹出窗口）。
allow-storage-access-by-user-activation：允许在用户激动的情况下，嵌入的网页通过 Storage Access API 访问父窗口的储存。
allow-top-navigation：允许嵌入的网页对顶级窗口进行导航。
allow-top-navigation-by-user-activation：允许嵌入的网页对顶级窗口进行导航，但必须由用户激活。
allow-downloads-without-user-activation：允许在没有用户激活的情况下，嵌入的网页启动下载。

注意，不要同时设置allow-scripts和allow-same-origin属性，这将使得嵌入的网页可以改变或删除sandbox属性。

loading 属性

loading属性可以触发<iframe>网页的懒加载。该属性可以取以下三个值。

auto：浏览器的默认行为，与不使用loading属性效果相同。
lazy：<iframe>的懒加载，即将滚动进入视口时开始加载。
eager：立即加载资源，无论在页面上的位置如何。

有一点需要注意，如果<iframe>是隐藏的，则loading属性无效，将会立即加载。只要满足以下任一个条件，Chrome 浏览器就会认为<iframe>是隐藏的。

iframe父子操作

父页面

<style>
  iframe {
    display: block;
    width: 100%;
    height: 35vh;
  }
</style>
<script>
  document.addEventListener("DOMContentLoaded", function () {
    const inWindow = document.getElementsByName("same")[0].contentWindow;
    const inDocument = document.getElementsByName("same")[0].contentDocument;
    console.log(inWindow, inDocument);

    const innerWindow = window.frames["same"].window;
    const innerDocument = window.frames["same"].document;
    console.log(innerWindow, innerDocument);

    const iframe = document.getElementById("same");
    iframe.onload = function () {
      const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
      const elem = iframeDoc.getElementById("child");
      setTimeout(() => {
        elem.innerHTML = 1;
      }, 2000);
    };
  });
</script>
<div id="parent">11</div>
同域
<iframe id="same" name="same" frameborder="no" scrolling="auto" src="./iframe-inner.html"></iframe>
不同域
<iframe id="cross" name="cross" frameborder="no" scrolling="auto" src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"></iframe>

子页面

<div>inner page</div>
<div id="child">0</div>
<script>
  const elem = window.parent.document.getElementById("parent");
  setTimeout(() => {
    elem.innerHTML = "22";
  }, 5000);
</script>