我现在页面有一个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();