• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    iframe 多层嵌套 无限嵌套 高度自适应的解决方案
    有A,B,C三个页面,A页面包含B页面,B页面包含C页面.A页面随着B页面自适应,C页面随着B页面自适应
    A页面

    复制代码
    代码如下:

    <body>
    <iframe id="main" name="main" width="980" scrolling="no" frameborder="0" src="B页面"
    onload="this.height=main.document.body.scrollHeight;this.width=main.document.body.scrollWidth;if(this.height < 410){this.height=410;}">
    </iframe>
    </body>

    B页面

    复制代码
    代码如下:

    <body>
    <!--左边-->
    <div style="flost:left;">
    左边菜单
    </div>
    <!--右边-->
    <div style="flost:right;">
    <iframe id="testIframe" name="testIframe" frameborder=0 style="width: 680px;" scrolling="no" src="C页面"></iframe>
    </div>
    </body>

    C页面
    将下面这个JS函数写到 最最底层的页面中(即最孙子的那个页面) 并在body的onload事件中调用该方法 【下面这个公式是万能公式】

    复制代码
    代码如下:

    <script type="text/javascript">
    //进行Iframe的自动撑开,让所有父页面的Iframe都自动适应包含页高度
    function autoHeight(){
    var doc = document,
    p = window;
    while(p = p.parent){
    var frames = p.frames,
    frame,
    i = 0;
    while(frame = frames[i++]){
    if(frame.document == doc){
    frame.frameElement.style.height = doc.body.scrollHeight + 'px'; // 这里一定要注意 火狐必须要加'px‘ 否则火狐无效
    doc = p.document;
    break;
    }
    }
    if(p == top){
    break;
    }
    }
    }
    </script>
    <body onload="autoHeight();">
    <!--经测试 这个最最最子的页面的body中必须要有一个有高度的div才行 否则上面的自适应生效-->
    <div style="height: 1px;">
    </div>
    <div style="padding-bottom: 10px;"> <!--这句话也是必不可少的-->
    这里可以写真正的内容 并且给该div的padding-bottom设一个值
    </div>
    </body>
    上一篇:html中br和br/的区别介绍
    下一篇:src或者css背景图的url值为base64编码代码
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

    iframe 多层嵌套 无限嵌套 高度自适应的解决方案 iframe,多层,嵌套,无限,高度,