如何给iframe添加一个后退按钮

我现在页面有一个iframe,现在加载了一个html叫A,然后我通过操作,改变了iframe的src,让他指向了另一个html叫B.我现在想做一个后退按钮,让iframe里面的页面从B再到A.这个怎么做呢.
我的思路是监听iframe的load事件,然后在外面用一个数组保存每次iframe的src,点击回退的时候,就取出数组里面的url进行跳转.但是有一个问题就是load事件必须加载完成才可以触发,万一点击过快,是到不了load事件的.所以想请教下其他的思路:给iframe添加一个后退按钮.我尝试的代码如下:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <iframe id="iframe" src="" width="600" height="700"></iframe>
        <button id='houtui'>后退</button>
        <button id='qianjin1'>去淘宝</button>
        <button id='qianjin2'>去百度</button>
        <script src='js/jquery-1.9.0.min.js'></script>
        <script>
            $(function() {
                var urlNum=[],addUrlFlag=true;
                $("#qianjin1").on("click",function(){
                    var url="http://taobao.com";
                    $("#iframe").attr("src", url);
                })
                $("#qianjin2").on("click",function(){
                    var url="http://baidu.com";
                    $("#iframe").attr("src", "http://baidu.com");
                })
                $("#houtui").on("click",function(){
                    var url=urlNum.pop();
                    url=urlNum.pop()||"";
                    $("#iframe").attr("src",url );
                    addUrlFlag=false;
                })
                $("#iframe").load(function(){
                    if(addUrlFlag){
                        urlNum.push($(this).attr('src'));
                    }
                    addUrlFlag=true;
                });
            });
        </script>
    </body>
</html>
阅读 8.9k
1 个回答

document.getElementById('iframe id').contentWindow.history.back();

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题