1.前言
在前端开发中,我们的网页有时会嵌套一个iframe子页面,这时候在父页面定义的回到顶部按钮就需要控制父、子两个页面同时回到顶部。
2.实现方法
1)定义iframe及回到顶部按钮
1 <button id="returnTop" type="button">回到顶部</button>
2 <iframe id="myIframe" name="iframe" src="test.html" ></iframe>
2)js代码(使用jquery实现)
1 // 返回顶部
2 $("#returnTop").click(function () {
3 //滑动的速度
4 var speed = 200;
5 //父页面回到顶部
6 $('body,html').animate({scrollTop: 0}, speed);
7 //iframe页面回到顶部
8 var iframe = window.frames["iframe"];
9 iframe.$('html, body').animate({scrollTop: 0}, speed);
10 });
3.其他方法
在iframe页面中自定义一个方法,然后在父页面调用该方法也可以实现相关操作(如果要实现回到顶部功能的话,需要在每个子页面都定义方法,不推荐)
1 //父页面调用
2 $("#returnTop").click(function(){
3 var iframe = window.frames["iframe"];
4 if (iframe != null && iframe != undefined) {
5 iframe.iframeFunc();
6 }
7 return false;
8 })
1 //子页面自定义方法
2 function iframeFunc(){
3 alert("我是子页面中的方法");
4 }
*补充:强制刷新iframe页面
$("#myIframe").attr("src",$("#myIframe").attr("src"));
*注:当iframe的src后附带锚点值时(如:src="test.html#param1"),改变“#”号后的内容,iframe页面不会刷新;
而如果是“?”号附带参数的形式(如:src="test.html?id=1001"),改变“?”后参数内容,iframe页面会刷新。