zoukankan      html  css  js  c++  java
  • 父页面操作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页面会刷新。

     

     

    文章仅供参考,转载请注明出处。
    不怕千万人阻挡,只怕自己投降。
  • 相关阅读:
    etherlime-1-Quick Start
    etherlime-4-Etherlime CLI
    Sequelize-nodejs-2-basic usage
    Sequelize-nodejs-6-Instances
    Sequelize-nodejs-5-Querying
    Sequelize-nodejs-4-Model usage
    Sequelize-nodejs-3-model definition
    eclipse快捷键大全
    java第一课
    java程序员认证考试题库
  • 原文地址:https://www.cnblogs.com/jakeylove3/p/8568509.html
Copyright © 2011-2022 走看看