如何实现三个iframe对应的后退/前进按钮功能？

问题分析 #

你的代码存在三个核心问题导致按钮失效：

• 跨域限制：当iframe加载外部域名（如itstep.org）时，浏览器同源策略会阻止主页面访问iframe的contentWindow.history对象，直接调用back()/go()会报错。
• 按钮事件未完全绑定：仅给btn1绑定了点击事件，btn2、btn5、btn6没有绑定任何逻辑，点击无响应。
• iframe引用不规范：部分按钮直接使用frame3.history.back()，未通过contentWindow访问，在部分浏览器环境下会失效。

修正后的完整代码 #

HTML

<iframe src="about:blank"></iframe>
<iframe src="about:blank"></iframe>
<iframe src="about:blank" name="frame3"></iframe>

<button onclick="window.frames[0].location='./test-page1.html'">加载页面1</button>
<button onclick="window.frames[1].location='./test-page2.html'">加载页面2</button>
<button onclick="window.frames['frame3'].location='./test-page3.html'">加载页面3</button>

<button id="btn1" style="margin: 50px; margin-left: 80px;">后退（iframe1）</button> 
<button id="btn4" style="margin: 30px;">前进（iframe1）</button>
<button id="btn2" style="margin: 50px; margin-left: 130px;">后退（iframe2）</button> 
<button id="btn5" style="margin: 30px;">前进（iframe2）</button>
<button id="btn3" style="margin: 50px; margin-left: 130px;">后退（iframe3）</button> 
<button id="btn6" style="margin: 30px;">前进（iframe3）</button>

CSS

iframe {
  border: 1px solid navy;
  height: 300px;
  margin: 30px;
  width: 300px;
}

button {
  margin: 10px 150px;
}

JavaScript

// 绑定所有按钮事件
document.getElementById('btn1').onclick = () => {
  window.frames[0].contentWindow.history.back();
};
document.getElementById('btn4').onclick = () => {
  window.frames[0].contentWindow.history.forward();
};

document.getElementById('btn2').onclick = () => {
  window.frames[1].contentWindow.history.back();
};
document.getElementById('btn5').onclick = () => {
  window.frames[1].contentWindow.history.forward();
};

document.getElementById('btn3').onclick = () => {
  window.frames['frame3'].contentWindow.history.back();
};
document.getElementById('btn6').onclick = () => {
  window.frames['frame3'].contentWindow.history.forward();
};

关键注意事项 #

• 同源要求：必须确保iframe加载的页面与主页面同源（相同协议、域名、端口）。如果需要测试，可创建几个本地静态页面（如test-page1.html、test-page2.html），在页面内添加跳转链接，这样就能正常调用历史记录方法。
• 跨域场景处理：如果必须加载外部域名页面，无法直接通过主页面控制iframe历史记录，这是浏览器安全机制限制，没有绕过方法。

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