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中调用父页面方法的知识点

  • 相关阅读:
    公安备案接入服务商如何填写?(网站接入信息)
    VSCode 开发Vue必备插件
    阿里云ecs从零配置centos 安装宝塔bt环境 (安装失败提示setuptools installation failed)
    hover时下划线从中间向两端渐变
    phpcms v9后台增加阅读量字段,可任意修改阅读量
    织梦登录后台变空白解决方法大全
    html鼠标滚动后导航栏吸顶效果
    关于height:100%和height:100vh的区别
    mycat
    Hash碰撞
  • 原文地址:https://www.cnblogs.com/fqh123/p/11684613.html
Copyright © 2011-2022 走看看