iframe 中的后退和前进按钮

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

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

如果这是在您控制的应用程序中的 WebView 中，您还可以设置一个钩子本机端来控制它。

Answer 3

框架内的按钮：

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

父框架内的按钮：

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

Answer 4

感谢大家的宝贵意见:-) 我已经设法从你的建议开始，并在它们的基础上进一步发展。

我有一个包含两个垂直框架的网页：左侧的窄列用于菜单栏（框架名称 =“菜单”），右侧有一个主窗口（框架名称 =“主”），跨越大部分宽度. 即，index.htm 只包含一个跨越整个表面的框架集。 现在...为了解决我的简单框架集中的一般“后退”导航问题，我设法将 Pavel Strakhov 的建议与 input type=button 结合使用 - 只有我必须进一步详细说明 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()" 。

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

• 在 Firefox v42 左右，如果你返回然后使用浏览器的“前进”按钮，在此过程中再点击几次 URL 你会得到有趣的结果：有时一个框架中的 history.back() 函数会产生一个 history.back () 在顶部框架上，没有明显的原因。

• 在 v42 左右的 Firefox 中，有时浏览器自己的“后退”按钮会导致每帧 history.back()，而不是顶帧 history.back()，原因不明（= 原生“后退”的不一致行为按钮）

• 无论浏览器品牌和版本如何，一些网站显然会在网站加载时清除其基础框架的历史记录。 如果您在框架中加载这样的站点，则每帧 history.back() 不会执行任何操作。

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

Answer 5

正如其他人所提到的，由于看似有缺陷的安全更改，这是当今的一个主要问题。 特别是，正如“mrec”在之前的评论中所说，这里的丑陋问题是，当您的 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 的补充，因此是 MIT 许可证。