Javascript iframe中的后退和前进按钮

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

使用

窗口历史对象

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

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

或

框架内的按钮：

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



父帧内的按钮：

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

谢谢大家宝贵的指点：-）
我已经设法从你的建议开始，并在这些建议的基础上进一步发展

我有一个网页，有两个垂直框架：左边是一个窄列，用于菜单栏（frame name=“menu”），右边是一个主窗口（frame name=“main”），跨越了大部分宽度。也就是说，index.htm仅包含一个横跨整个曲面的框架集。现在。。。为了在我的简单框架集中解决一般的“返回”导航问题，我设法使用了Pavel Strakhov的建议，输入类型=button，只是我需要进一步阐述DOM路径。由于我在左侧的“菜单”框中有按钮，而要导航的内容发生在右侧的“主”框中，因此这两个框是兄弟帧，而不是父帧与子帧。因此，在我的例子中，我必须遍历层次结构中的一个级别，然后才能引用兄弟帧。因此，在我的例子中，button元素读取


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

如果这是在您控制的应用程序内的WebView中，您还可以设置一个钩子本机端来控制它。
正如其他人所提到的，由于安全更改似乎有缺陷，这是当今的一个主要问题。特别是，正如“mrec”在之前的一篇评论中所说，这里的丑陋问题是，当您的iframe已经开始它自己的历史记录时——并且无法在脚本中检测到这种情况——执行另一个back（）将有效地触发包含页上的back（），而这几乎肯定不是您想要的事实上，这对我来说是一个无法克服的问题

此解决方案是经过测试的版本的解决方案，在这里的回答中提到，通过手动处理历史记录，用户无法在历史记录开始之前返回。它在中用于内联帮助，并在此处进行了简化，这可能会给其他测试版本引入错误。它可能还需要对您的需求进行一些改进

主机页中的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>

返回
家
帮助1
帮助2

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

希望这能帮助别人。（提示：为了避免与系统变量混淆，我拼错了一些变量）。代码是Codiad的一个附加部分，因此是MIT许可证。
如果iframe是沙盒（即指向与包含页面不同的服务器），则此操作不起作用。这里的丑陋问题是，当iframe已经在其自身历史的开始时，并且无法在脚本中检测此情况，则执行另一个back（）将有效地触发包含页面上的back（），这几乎肯定不是您想要的。到目前为止，我测试过的所有浏览器都是如此；Chrome 31.0.1650.57，Firefox 24，IE7…@MikeC:是的，这是一个丑陋的问题！您还可以使用侦听器（或更丑陋的解决方案）从iframe获取所有访问的URL，将它们存储在一个数组中，然后手动实现后退和前进按钮，根据数组中的上一项/下一项（如果已定义）更改iframe SRC谈论丑陋，以防止在iframe窗口的开头按下后退按钮，当iframe加载并禁用back按钮时，可以添加变量“history=0”。Forward history+1，Back history-1.Ps：这可以跨不同的域工作，但是如果不控制iframe，显然就不能插入postMessage代码。在这种情况下，您可以将后退按钮等放在顶部（主机）页面中，但随后您必须解决如何从iframe获取不断变化的URL（如果域与顶部页面不同，这可能是不可能的）。另一个警告-这不会禁用浏览器右键单击下拉关联菜单中的“前进”和“后退”条目。幸运的是，没有多少人会使用这些。
    <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>