javascript - 如何给iframe添加一个后退按钮
本文介绍了javascript - 如何给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>
解决方案
document.getElementById('iframe id').contentWindow.history.back();
这篇关于javascript - 如何给iframe添加一个后退按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
