zoukankan      html  css  js  c++  java
  • 页面嵌套iframe时,怎样让iframe高度根据自身内容高度自适应

    总体思路是这样的,因为iframe里页面的内容是动态加载的,而且电脑屏幕宽度发生变化时,也得相应的去改变iframe标签的高度(如果高度确定就不用这么麻烦了);

    首先,我们在父页面中定义一个方法,用来改变iframe标签的高度;在iframe中的页面中,当内容加载号之后去调用父页面汇总的这个方法(因为要根据内容自适应高度);

    然后再处理,当屏幕发生改变时,在子页面汇总调用父页面汇总的这个方法;

    父页面代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
        </style>
    </head>
    
    <body>
        <div>sdsd</div>
        <iframe src="./bb.html" scrolling="no" frameborder="0" id="test" style="100%;"></iframe>
    
        <script>
                function setIframeHeight(id){
                    var iframe = document.getElementById(id);
                    try{
                        var bHeight = iframe.contentWindow.document.body.scrollHeight;
                        var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
                        var height = Math.min(bHeight, dHeight);
                        iframe.height = height+20;
                    }catch (ex){}
                }
                
    
        </script>
    </body>
    </html>

    子页面中的代码:这里用一个定时器去模仿异步加载数据所产生的时间差

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>
        我是内敛元素时
        <div id="test"></div>
        
        <script>
        //模拟页面加载来的页面内容
    var html=`<p>达所大所佛挡杀佛大萨达所大所佛挡杀佛大萨达所大所佛挡杀佛大萨达所大所佛挡杀佛大萨达所大所佛挡杀佛大萨达所</p>`; var win=window; var doc=document; function ready(){ document.querySelector("#test").innerHTML=html;//动态添加页面内容 parent.window.setIframeHeight("test");//调用父页面中改变 iframe标签高度的方法 } setTimeout(ready,1000); var processor={ timeoutId:null, performProcessing:function(){ //实际执行的代码 parent.window.setIframeHeight("test") }, process:function(){//函数节流 clearTimeout(this.timeoutId); var that=this; this.timeoutId=setTimeout(function(){ that.performProcessing(); },100); } } //使用 当窗口发生改变时调用 window.onresize=function(){ processor.process(); } </script> </body> </html>

    这里面用到了 函数节流  iframe中调用父页面方法的知识点

  • 相关阅读:
    C#2.0泛型学习--入门篇
    [转自MSDN]如何映射 HRESULT 和异常
    js创建hashtable
    滑雪在日本 之 新泻篇 3
    就算神游 之四:富士山和富士游乐园 2
    就算神游 之四:富士山和富士游乐园 9
    滑雪在日本 之 新泻篇 9
    滑雪在日本 之 新泻篇 14
    就算神游 之四:富士山和富士游乐园 4
    挤地铁的感悟
  • 原文地址:https://www.cnblogs.com/fqh123/p/11684613.html
Copyright © 2011-2022 走看看