Question

如何使用JS“实现”iframe中的后退和前进按钮？

Answer 1

使用window.history对象。

// For the current window
window.history.back();     
window.history.forward();

// For an iframe's window
iframe.contentWindow.history.back(); 
iframe.contentWindow.history.forward();

或

iframe.contentWindow.history.go(-1); // back
iframe.contentWindow.history.go(1);  // forward

https://developer.mozilla.org/en/dom/window.history

Answer 2

框内的按钮：

<input type="button" value="Back" onclick="history.back()">

父框架内的按钮：

<input type="button" value="Back" onclick="frame_name.history.back()">

Answer 3

2017年更新：如果iframe内容的来源与封闭页面的来源不同，则无法执行此操作 - 除非您控制远程来源的内容并且可以接受{{1} }事件。如果原点相同，则较旧的答案仍然有效。

Answer 4

感谢大家的宝贵指示:-) 我已经设法从你的建议开始，并进一步发展它们。

我有一个有两个垂直框架的网页：左边是一个窄栏，用于菜单栏（框架名称=“菜单”），右边是一个主窗口（框架名称=“主要”），跨越大多数的宽度。即，index.htm只包含整个表面的框架集。现在......为了解决我的简单框架集中的一般“后退”导航问题，我设法使用了Pavel Strakhov的输入类型=按钮的建议 - 只是我必须进一步详细说明DOM路径。由于我在左侧的“菜单”框中有按钮，并且要导航的内容发生在右侧的“主”框架中，因此两个框架是兄弟姐妹，而不是父母与孩子。因此，在我的情况下，在我能够引用兄弟框架之前，我必须在层次结构中遍历一个级别。因此，在我的情况下，按钮元素读取

<input type="button" value="Back in the main frame" onclick="window.parent.main.history.back()">

或者您可以通过数组中的序数索引（从零开始）引用帧，而不是按名称引用：

<input type="button" value="Back in the main frame" onclick="window.parent.frames[1].history.back()">

我还注意到整个'onclick'属性可以绑在几乎任何其他可见元素上，例如锚点/ href（A），DIV或P.我也尝试过这些，使“后退”按钮看起来更像我的菜单的其余部分，但最终回到原始的“纽扣”外观和行为，使按钮更明显/突出/不同。它看起来很粗糙，但效果最好。

实际上在我的情况下，windows.parent实际上是指顶部框架 - 所以还有另一种方式来引用我的框架“main”并告诉它返回：onclick="top.main.history.back()"。或者，显然，onclick="top.frames['main'].history.back()"。

然后我发现它仍然无法可靠地工作。到目前为止发现的怪癖：

，如果你回去然后使用浏览器的“前进”按钮，可以在路上点击几次URL，你可以获得有趣的结果：有时框架中的history.back（）函数将会导致顶部框架上的history.back（），没有明显的原因。
，有时浏览器自己的“后退”按钮会导致每帧history.back（），而不是顶级的history.back（），没有明显的原因（=不一致的行为）本地“后退”按钮）
无论浏览器的品牌和版本如何，一些网站显然都清楚了网站加载时基础框架的历史。如果您在一个框架中加载这样的网站，则每个框架的history.back（）不执行任何操作。

这可能是另一个原因（除了同质样式）为什么几乎没有人再使用旧的旧HTML框架。由此产生的行为对于用户来说不是非常确定/可预见/显而易见的。这可能是网站管理员更喜欢固定列，通过表格或更现代的方式实现的原因。或许这只是因为现在每个人都使用CMS。

Answer 5

正如其他人所说，由于看似有缺陷的安全变化，这是当前的一个主要问题。尤其是＆＃34; mrec＆＃34;在之前的评论中说，这里的丑陋问题是，当你的iframe已经处于自己的历史开始时 - 并且没有办法在脚本中检测到这种情况 - 做另一个back（）会有效在包含的页面上触发一个back（），这几乎肯定不是你想要的。 - 事实上，这对我来说是一个不可逾越的问题。

此解决方案是此处响应中提到的解决方案的测试版本，其中历史记录是手动处理的，用户无法在历史记录开始之前遍历。它在http://www.0AV.com中用于内联帮助，并且已在此处进行了简化，其中 可能已将错误 引入其他测试版本。它也可能需要对您的要求进行一些改进。

主页中的JS ..

var Hstory = [], sorc = '';

window.onmessage = function(e){ //# message fired by iFrame with onmousedown="window.top.postMessage('...','*');" or etc.
    var hilitedCrefText = e.data;    
    switch(String(hilitedCrefText)){
        case "Help_Home": //# defined in iframe
            sorc = "/index.html"; //# eg
            HistryManager(sorc); //# store
            break;
        case "Help_Back": //# defined in iframe
            sorc = HistryManager(); //# retrieve
            break;
        default: //# anything else that is generated by a link.
            HistryManager(sorc);
    }    
    if( sorc.length > 0 ) document.getElementById('your_iframe_id').src = sorc;  
}


function HistryManager(toPush) { //# history_handler
    if (toPush != undefined) {
        Hstory.push(toPush);
    }else{
        if( Hstory.length > 1 ){
            var az = Hstory[Hstory.length-2]; //..
            //# -2 is: -1 as is base 1, + -1 as it just stored this location, so must go back to PRIOR locastion.
            Hstory = Hstory.slice(0, -1); // Reduce array (Use neg num to select from end of array)
            return az;
        }else{
            alert('End of history. \n\n(Can not go further Back).');
            return '';
        }
    }
}

iframe页面中的JS / HTML ..

    <button onclick="window.top.postMessage('Help_Back','*');">Back</button>
    <button onclick="window.top.postMessage('Help_Home','*');">Home</button>

    <button onclick="window.top.postMessage('helppage1.html','*');">HelpOn1</button>
    <button onclick="window.top.postMessage('helppage2.html','*');">HelpOn2</button>

.. last 2是用户可以遍历（并添加到历史记录）的链接示例，在本例中为按钮，但很容易更改为锚点。

希望有人帮助。（提示：我拼错了一些我的变量以防止与系统变量混淆）。代码是Codiad的补充，因此是麻省理工学院许可证。

iframe中的后退和前进按钮

5 个答案: