• 父页面操作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页面会刷新。

     

     

    文章仅供参考,转载请注明出处。
    不怕千万人阻挡,只怕自己投降。
  • 相关阅读:
    EF6 Code First 模式更新数据库架构
    bootstrap-datepicker 插件修改为默认中文
    常用网络资源下载
    jQuery框架学习第十一天:实战jQuery表单验证及jQuery自动完成提示插件
    AngularJS实现原理
    [个人翻译]GitHub指导文件(GitHub Guides[Hello World])
    年后跳槽如何准备?
    前端学数据库之子查询
    Ionic实战 自动升级APP(Android版)
    读书笔记:《HTML5开发手册》Web表单
  • 原文地址:https://www.cnblogs.com/jakeylove3/p/8568509.html
Copyright © 2020-2023  润新知