父页面操作iframe回到顶部

1.前言

　　在前端开发中，我们的网页有时会嵌套一个iframe子页面，这时候在父页面定义的回到顶部按钮就需要控制父、子两个页面同时回到顶部。

2.实现方法

1）定义iframe及回到顶部按钮

<button id="returnTop" type="button">回到顶部</button>
<iframe id="myIframe" name="iframe" src="test.html" ></iframe>

2）js代码（使用jquery实现）

// 返回顶部
$("#returnTop").click(function () {
    //滑动的速度
    var speed = 200;
    //父页面回到顶部
    $('body,html').animate({scrollTop: 0}, speed);
    //iframe页面回到顶部
    var iframe = window.frames["iframe"];
    iframe.$('html, body').animate({scrollTop: 0}, speed);
});

3.其他方法

　　在iframe页面中自定义一个方法，然后在父页面调用该方法也可以实现相关操作（如果要实现回到顶部功能的话，需要在每个子页面都定义方法，不推荐）

//父页面调用
$("#returnTop").click(function(){
    var iframe = window.frames["iframe"];
    if (iframe != null && iframe != undefined) {
        iframe.iframeFunc();
    }
    return false;
})

//子页面自定义方法
function iframeFunc(){
    alert("我是子页面中的方法");
}

*补充：强制刷新iframe页面

$("#myIframe").attr("src",$("#myIframe").attr("src"));

*注：当iframe的src后附带锚点值时（如：src="test.html#param1"），改变“#”号后的内容，iframe页面不会刷新；

　　而如果是“?”号附带参数的形式（如：src="test.html?id=1001"），改变“?”后参数内容，iframe页面会刷新。