Chrome iFrame历史记录在页面上没有正确显示2个或更多iFrame。 （第35.0.1.116.114号）

Question

我注意到，当按下后退按钮时，iframe与他们实际所属的iframe混在一起。

作为一个例子，我做了一个jsfiddle。按运行，然后等待左iframe刷新 - 然后单击右侧iframe内的任何链接，然后按chromes返回按钮。您会注意到正确的iframe已丢失其上下文，现在内容与左iframe相同。

http://jsfiddle.net/N4uEv/4/

我能够以几种不同的方式重现这一点（不仅仅是通过使用setInterval计时器）。

这在以前版本的Chrome中没有发生，并且在firefox / ie / safari等中没有发生。这是一个错误还是我错过了什么？

<div id="iframe1">
    <iframe src="blabla" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" topmargin="0"     leftmargin="0" allowtransparency="true" width="100" height="400"></iframe>
</div>
<div id="iframe2">
    <iframe src="http://mobafire.com" frameborder="0" scrolling="yes" marginheight="0" marginwidth="0" topmargin="0" leftmargin="0" allowtransparency="true" width="500" height="600"></iframe>
</div>


setInterval(function(){
       $('#iframe1').html(' ').html('<iframe src="blabla" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" topmargin="0" leftmargin="0" allowtransparency="true" width="100" height="400"></iframe>');
}, 5000);

Answer 1

使用后退/前进按钮时，Chrome会受到已知且仍然存在的错误的影响，该错误会导致iframe内容出现问题：https://code.google.com/p/chromium/issues/detail?id=395791

Chrome基本上不知道在历史记录返回/转发后哪个帧中显示哪些内容。

要解决此问题，您需要为iframe添加唯一的name属性。 例如：

<div id="iframe1">
    <iframe name="iframe1" src="blabla" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" topmargin="0" leftmargin="0" allowtransparency="true" width="100" height="400"></iframe>
</div>

<div id="iframe2">
    <iframe name="iframe2" src="blabla" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" topmargin="0" leftmargin="0" allowtransparency="true" width="100" height="400"></iframe>
</div>