• JavaScript实现Iframe自适应其加载的内容高度


    在使用IFrame的时候经常出现内容高度不符影响页面整体效果,利用JavaScript可以实现Iframe自适应其加载的内容高度.

    //main.htm:
    <html> 
    <head> 
    <meta http-equiv='Content-Type' content='text/html; charset=gb2312' /> 
    <meta name='author' content='F.R.Huang(meizz梅花雪)//www.meizz.com' /> 
    <title>iframe自适应加载的页面高度</title> 
    </head> 

    <body>
    <iframe src="child.htm"></iframe>
    </body>
    </html>

    //child.htm:

    <html> 
    <head> 
    <meta http-equiv='Content-Type' content='text/html; charset=gb2312' /> 
    <meta name='author' content='F.R.Huang(meizz梅花雪)//www.meizz.com' /> 
    <title>iframe 自适应其加载的网页(多浏览器兼容)</title> 
    <script type="text/javascript">
    <!--
    function iframeAutoFit()
    {
    var ex;
    try
    {
    if(window!=parent)
    {
    var a = parent.document.getElementsByTagName("IFRAME");
    for(var i=0; i<a.length; i++//author:meizz
    {
    if(a[i].contentWindow==window)
    {
    var h1=0, h2=0;
    if(document.documentElement&&document.documentElement.scrollHeight)
    {
    h1
    =document.documentElement.scrollHeight;
    }

    if(document.body) h2=document.body.scrollHeight;

    var h=Math.max(h1, h2);
    if(document.all) {h += 4;}
    if(window.opera) {h += 1;}
    a[i].style.height 
    = h +"px";
    }

    }

    }

    }

    catch (ex){}
    }

    if(document.attachEvent)
    {
    window.attachEvent(
    "onload", iframeAutoFit);
    window.attachEvent(
    "onresize", iframeAutoFit);
    }

    else
    {
    window.addEventListener('load', iframeAutoFit, 
    false);
    window.addEventListener('resize', iframeAutoFit, 
    false);
    }

    //-->
    </script> 
    </head> 
    <body>
    <table border="1" width="200" style="height: 400px; background-color: yellow">
    <tr>
    <td>iframe 自适应其加载的网页(多浏览器兼容,支持XHTML)</td>
    </tr>
    </table>
    </body> 
    </html>
  • 相关阅读:
    2019 NJCTF WarmUp
    家用路由器渗透过程总结
    IOT 安全资料整合(主要是路由器)
    由一道工控路由器固件逆向题目看命令执行漏洞
    路由器漏洞挖掘之 DIR-850/645 命令执行漏洞复现
    路由器漏洞挖掘之 DIR-815 栈溢出漏洞分析
    从外网到内网的渗透姿势分享
    ESP8266 显示实时天气信息
    静态链接学习之 ELF 文件 DIY
    ROP-Tamu CTF 2018-pwn5
  • 原文地址:https://www.cnblogs.com/zwei1121/p/900275.html
Copyright © 2020-2023  润新知