NextJS Script标签在浏览器前进后退时未加载，iframe显示异常

• 监听pageshow事件触发脚本逻辑
  浏览器前进后退时，页面会从bfcache（往返缓存）加载，不会触发常规的load事件，但会触发pageshow。你可以在这个事件里检查尺寸控制逻辑是否生效，或者直接重新执行：

  window.addEventListener('pageshow', (e) => {
    const targetIframe = document.getElementById('你的iframeID');
    if (!targetIframe) return;
  
    // 检查控制脚本的核心函数是否存在，不存在则重新注入脚本
    if (typeof adjustIframeSize !== 'function') {
      const script = document.createElement('script');
      script.src = '你的尺寸控制脚本路径';
      script.onload = () => adjustIframeSize(targetIframe);
      document.body.appendChild(script);
    } else {
      // 函数已存在，直接执行尺寸调整
      adjustIframeSize(targetIframe);
    }
  });
  

  这个方法专门针对浏览器前进后退的缓存场景，比load事件覆盖更全面。

• 把尺寸控制逻辑内联到页面
  放弃依赖外部脚本，直接把控制iframe尺寸的代码写在页面内的<script>标签里。这样页面从缓存加载时，内联代码会保留，不用重新加载外部脚本：

  function adjustIframeSize(iframe) {
    if (!iframe.contentWindow) return;
    // 这里写你的动态尺寸控制逻辑，比如根据内容高度设置iframe高度
    const contentHeight = iframe.contentWindow.document.body.scrollHeight;
    iframe.style.height = `${contentHeight + 20}px`; // 加20px避免滚动条
  }
  
  // 初始化执行
  window.addEventListener('load', () => {
    adjustIframeSize(document.getElementById('你的iframeID'));
  });
  
  // 前进后退时重新执行
  window.addEventListener('pageshow', () => {
    adjustIframeSize(document.getElementById('你的iframeID'));
  });
  
  // 监听iframe自身的加载事件，确保内容变化时也调整尺寸
  document.getElementById('你的iframeID').addEventListener('load', function() {
    adjustIframeSize(this);
  });
  

  这种方式最可靠，完全避开了外部脚本加载的问题。

• 应急方案：禁用页面缓存
  如果上面的方法都不生效，可以强制让浏览器前进后退时不使用缓存，每次重新加载页面。在页面头部加meta标签：

  <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
  <meta http-equiv="Pragma" content="no-cache">
  <meta http-equiv="Expires" content="0">
  

  但注意这会降低页面加载速度，只适合临时应急。

内容的提问来源于stack exchange，提问作者user1189352