父页面操作iframe回到顶部

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页面会刷新。

 

 

转载于:https://www.cnblogs.com/jakeylove3/p/8568509.html