刷新页面后如何让iframe保持在当前链接？

要实现刷新父页面时iframe保持当前访问的页面，核心思路是把iframe的当前URL同步到父页面的URL参数中，页面加载时读取这个参数来初始化iframe的地址。以下是具体实现步骤：

步骤1：调整iframe的HTML结构 #

保留原iframe的基础属性，确保它有唯一ID方便JS操作：

<iframe src="https://my-domain.com/pagelink" name="iframe_a" style="width:100%; height:200px;" title="Iframe" id="frame"></iframe>

步骤2：添加JavaScript逻辑 #

在父页面中加入以下代码，完成URL参数同步和页面初始化：

const iframe = document.getElementById('frame');
const defaultSrc = 'https://my-domain.com/pagelink';

// 页面加载时，读取URL参数设置iframe地址
window.addEventListener('load', () => {
  const params = new URLSearchParams(window.location.search);
  const savedSrc = params.get('iframeSrc');
  iframe.src = savedSrc || defaultSrc;
});

// 监听iframe页面变化，同步到父页面URL参数
iframe.addEventListener('load', () => {
  try {
    // 仅同源页面可直接获取iframe当前URL
    const currentSrc = iframe.contentWindow.location.href;
    const params = new URLSearchParams(window.location.search);
    
    if (currentSrc !== defaultSrc) {
      params.set('iframeSrc', currentSrc);
    } else {
      params.delete('iframeSrc');
    }
    // 更新URL参数，不触发页面刷新
    window.history.pushState({}, '', `${window.location.pathname}?${params.toString()}`);
  } catch (e) {
    console.error('无法获取iframe地址：', e);
  }
});

注意事项 #

• 必须保证iframe加载的页面和父页面同源（协议、域名、端口完全一致），否则浏览器同源政策会阻止获取iframe的URL；若为跨域场景且你能控制两个域名，可通过postMessage机制传递页面地址。
• 确保iframe内的跳转行为（比如a标签）默认在iframe内部完成（即target="_self"，这是默认值），不要跳出到父页面。

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