• iframe 自适应高度、父子页面传值、回调


    总结一下最近用iframe遇到的问题与解决办法:

    结构:主页面main.html,里面套用iframe。iframe不能出现滚动条,自适应子页面高度。内容多了滚动条是main.html页面的。

    1.  主页面自适应iframe页面的高度

    这个问题网上的大部分都是自适应静态iframe页面,而且代码较多,对于动态变化的iframe页面,解决的办法少。

    我的解决办法很粗狂:获取iframe页面的高度,在设置父页面iframe标签的高度。兼容性我相信都没问题吧。

    iframe页面:

    setParentHeight()
    
    function setParentHeight(){
        var nowHei=$('body').height();//获取当前页面高度
        parent.setIframeHeight(nowHei);//调用父页面设置高度函数
    }

     主页面:记得设置iframe  scrolling="no"属性,这样iframe就没滚动条了。无边框是设置 frameborder="0"

    //设置iframe高度
    function setIframeHeight(hei){
        $('#m-iframe').height(hei);//m-iframe是ifram的id
    }

     (1) 这样的处理方式很简单,缺点就是iframe页面高度动态变化的时候,比如加载更多,这时还是需要调用  setParentHeight  函数来再次设置父页面iframe标签的高度。

    2. 主页面与iframe页面传值和回调。

    (1) 主页面调用iframe页面的函数: 假如iframe页面有个add函数:

    $('#m-iframe')[0].contentWindow.add();

         (a) 主页面调用iframe都是通过contentWindow来调用iframe页面的window对象。

      (b) 传值就直接传在调用的函数里面。

    (2) iframe页面调用主页面函数

       (a) 就如上面的设置高度一样,通过 parent 就能获取到主页面的window对象。

          (b) 传值就直接传在调用的函数里面。

    (3)回调。 iframe调用父页面函数,父页面响应之后返回回调的值。例子:

    //主页面:
    var childCallback=null;
    $('.box').on('click',function(){
        childCallback(1)
    })
    function show(callback){
       if(callback && typeof callback ==='function'){
             childCallback=callback;
        }      
    }
    
    //iframe页面:
    parent.show(function(statu){
        console.log(statu); 
    })

       (a)当iframe调用,主页面click事件响应之后,iframe页面就会返回回调的值。

         (b) 或者是不用定义变量,直接在调用的函数里面绑定点击事件再回调,不过要注意先取消绑定再绑定,不然会多次触发

    3.  iframe的弹窗蒙层需要铺满主页面整个页面。例如:

    (1) 我推荐的一种方式就是整个弹窗的内容放到主页面里面,iframe只提供触发显示的js就行了。

    (2) 网上有些说iframe标签设置absolute和z-index也能达到iframe页面弹窗在主页面之上。我试过,不是不行,iframe页面里的有些内容也会出现在主页面之上。有时候会导致一些问题。

    (3) iframe页面对于怎么响应并回调在主页面里面的弹窗,我第二点已经说明了。我认为弹窗放到主页面这样的处理方式比较好。

    4.iframe更改了src之后,不出现后退或者前进按钮

    要实现这种情况,就只有每次更改的时候,就新建一个iframe元素并替换原来的iframe,这样浏览器就不会产生history,后退和前进按钮就不会激活了

    建议前台页面最好少用iframe来引入页面。但是qq邮箱就是用的iframe,为什么我就想不通了。

  • 相关阅读:
    Linux基础学习(7)
    Linux基础学习(6)
    Linux基础学习(5)
    Linux基础学习(4)
    Linux基础学习(3)
    测试工程师面试题
    Postman实战
    接口测试
    HTTP请求结构与HTTP响应结构
    GET请求与POST请求的区别
  • 原文地址:https://www.cnblogs.com/zjjDaily/p/9796711.html
Copyright © 2020-2023  润新知