<legend id='77650enk'><style id='grzaz0mp'><dir id='2n1pkhw2'><q id='j4pqegsb'></q></dir></style></legend>

  1. <tfoot id='bkwo6f4t'></tfoot>
    <i id='r0x8k1vm'><tr id='1sqmqzxp'><dt id='gufcqzr5'><q id='hpnpsr1o'><span id='8no3hjd4'><b id='sxukz72x'><form id='sy220emv'><ins id='0mqje7j6'></ins><ul id='d0h2rcgr'></ul><sub id='2mul3poa'></sub></form><legend id='ycdqj1ul'></legend><bdo id='tzf2hffi'><pre id='7xzkvxaz'><center id='k2doejff'></center></pre></bdo></b><th id='7bpbr6vm'></th></span></q></dt></tr></i><div id='xxfhat0a'><tfoot id='x4c3body'></tfoot><dl id='ozwzxe5c'><fieldset id='d5umplaj'></fieldset></dl></div>
      <bdo id='3yhputw2'></bdo><ul id='mbo2fww3'></ul>

    <small id='fykn0j6l'></small><noframes id='k94uibq4'>

    1. 精准传达 • 价值共享

      洞悉互联网前沿资讯,探寻网站营销规律

      iframe高度自适应的6个方法

      作者: 庚午网络 | 2020-11-07 17:12 |点击:

      网站开发 网站建设 网站设计 网站首页 新网站 DEDECMS5.7 专业网站

          <bdo id='fzpwvlbi'></bdo><ul id='xuec92yj'></ul>
          <tfoot id='wx6b00cs'></tfoot>

          <small id='9a88kgcg'></small><noframes id='x6kbwt4w'>

          1. <legend id='zjc9vydo'><style id='y1sxzeko'><dir id='t8mr8ytd'><q id='9g41kru7'></q></dir></style></legend>
              <tbody id='z94befgs'></tbody>
            <i id='24sn1r9t'><tr id='vhe2jxxn'><dt id='fd7teums'><q id='d1xtjbn1'><span id='auu3poct'><b id='k2n01mt5'><form id='atm422mq'><ins id='n85h106i'></ins><ul id='dloh2rpj'></ul><sub id='o5vnm5oq'></sub></form><legend id='6h9l5y59'></legend><bdo id='ax4xdctz'><pre id='c2c69hhm'><center id='2mszxfa2'></center></pre></bdo></b><th id='hjqatu5z'></th></span></q></dt></tr></i><div id='63hdk9pe'><tfoot id='grb2of8n'></tfoot><dl id='dgl2mgh5'><fieldset id='7ujqdt94'></fieldset></dl></div>


              • JS自适应高度,其实就是设置iframe的高度,使其等于内嵌网页的高度,从而看不出来滚动条和嵌套痕迹。对于用户体验和网站美观起着重要作用。

                如果内容是固定的,那么我们可以通过CSS来给它直接定义一个高度,同样可以实现上面的需求。当内容是未知或者是变化的时候。这个时候又有几种情况了。

                iframe内容未知,高度可预测

                这个时候,我们可以给它添加一个默认的CSS的min-height值,然后同时使用JavaScript改变高度。常用的兼容代码有:

                
                
                
                
                方法一
                
                // document.domain = "caibaojian.com";
                function setIframeHeight(iframe) {
                if (iframe) {
                var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
                if (iframeWin.document.body) {
                iframe.height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;
                }
                }
                };
                
                window.onload = function () {
                setIframeHeight(document.getElementById('external-frame'));
                };

                 

                (如果在同个顶级域名下,不同子域名之间互通信息,设置document.domain="caibaojian.com"·

                只要修改以上的iframe的ID即可了。或者你可以直接在iframe里面写代码,我们一般为了不污染HTML代码,建议使用上面的代码。

                
                <iframe src="backtop.html" frameborder="0" scrolling="no" id="external-frame" onload="setIframeHeight(this)"></iframe>
                
                
                
                

                 

                多个iframe的情况下

                
                
                
                <script language="javascript">
                //输入你希望根据页面高度自动调整高度的iframe的名称的列表
                //用逗号把每个iframe的ID分隔. 例如: ["myframe1", "myframe2"],可以只有一个窗体,则不用逗号。
                //定义iframe的ID
                var iframeids=["test"];
                //如果用户的浏览器不支持iframe是否将iframe隐藏 yes 表示隐藏,no表示不隐藏
                var iframehide="yes";
                function dyniframesize()
                {
                var dyniframe=new Array()
                for (i=0; i<iframeids.length; i++)
                {
                if (document.getElementById)
                {
                //自动调整iframe高度
                dyniframe[dyniframe.length] = document.getElementById(iframeids[i]);
                if (dyniframe[i] && !window.opera)
                {
                dyniframe[i].style.display="block";
                if (dyniframe[i].contentDocument && dyniframe[i].contentDocument.body.offsetHeight) //如果用户的浏览器是NetScape
                dyniframe[i].height = dyniframe[i].contentDocument.body.offsetHeight;
                else if (dyniframe[i].Document && dyniframe[i].Document.body.scrollHeight) //如果用户的浏览器是IE
                dyniframe[i].height = dyniframe[i].Document.body.scrollHeight;
                }
                }
                //根据设定的参数来处理不支持iframe的浏览器的显示问题
                if ((document.all || document.getElementById) && iframehide=="no")
                {
                var tempobj=document.all? document.all[iframeids[i]] : document.getElementById(iframeids[i]);
                tempobj.style.display="block";
                }
                }
                }
                if (window.addEventListener)
                window.addEventListener("load", dyniframesize, false);
                else if (window.attachEvent)
                window.attachEvent("onload", dyniframesize);
                else
                window.onload=dyniframesize;
                </script>

                针对知道的iframe的ID调用

                
                
                
                function iframeAutoFit(iframeObj){
                setTimeout(function(){if(!iframeObj) return;iframeObj.height=(iframeObj.Document?iframeObj.Document.body.scrollHeight:iframeObj.contentDocument.body.offsetHeight);},200)
                }

                内容宽度变化的iframe高度自适应

                
                
                
                
                <iframe src="backtop.html" frameborder="0" scrolling="no" id="test" onload="this.height=100"></iframe>
                <script type="text/javascript">
                function reinitIframe(){
                var iframe = document.getElementById("test");
                try{
                var bHeight = iframe.contentWindow.document.body.scrollHeight;
                var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
                var height = Math.max(bHeight, dHeight);
                iframe.height = height;
                console.log(height);
                }catch (ex){}
                }
                window.setInterval("reinitIframe()", 200);
                </script>

                跨域下的iframe自适应高度

                跨域的时候,由于js的同源策略,父页面内的js不能获取到iframe页面的高度。需要一个页面来做代理。
                方法如下:假设www.a.com下的一个页面a.html要包含www.b.com下的一个页面c.html。
                我们使用www.a.com下的另一个页面agent.html来做代理,通过它获取iframe页面的高度,并设定iframe元素的高度。

                a.html中包含iframe:

                
                
                <iframe src="http://www.b.com/c.html" id="Iframe" frameborder="0" scrolling="no" style="border:0px;"></iframe>

                在c.html中加入如下代码:

                
                
                <iframe id="c_iframe"  height="0" width="0"  src="http://www.a.com/agent.html" style="display:none" ></iframe>
                <script type="text/javascript">
                (function autoHeight(){
                var b_width = Math.max(document.body.scrollWidth,document.body.clientWidth);
                var b_height = Math.max(document.body.scrollHeight,document.body.clientHeight);
                var c_iframe = document.getElementById("c_iframe");
                c_iframe.src = c_iframe.src + "#" + b_width + "|" + b_height;  // 这里通过hash传递b.htm的宽高
                })();
                </script>

                最后,agent.html中放入一段js:

                
                
                <script type="text/javascript">
                var b_iframe = window.parent.parent.document.getElementById("Iframe");
                var hash_url = window.location.hash;
                if(hash_url.indexOf("#")>=0){
                var hash_width = hash_url.split("#")[1].split("|")[0]+"px";
                var hash_height = hash_url.split("#")[1].split("|")[1]+"px";
                b_iframe.style.width = hash_width;
                b_iframe.style.height = hash_height;
                }
                </script>

                agent.html从URL中获得宽度值和高度值,并设置iframe的高度和宽度(因为agent.html在www.a.com下,所以操作a.html时不受JavaScript的同源限制)

                 

                二度创作,如有侵权请联系删除。如没特殊注明,文章均为庚午网络原创,转载请注明https://www.hngengwu.com/shejiguandian/424.html

                    <bdo id='6yrzq4yj'></bdo><ul id='apide26c'></ul>
                  1. <small id='0r02ogbm'></small><noframes id='hmfykc9h'>

                    <legend id='vohhvqcu'><style id='m120cw1t'><dir id='o8jxelwp'><q id='5vtf9cl2'></q></dir></style></legend>
                    <tfoot id='bk27oqbc'></tfoot>
                    <i id='d3n8cq8t'><tr id='3dl36ml9'><dt id='g61vp0nc'><q id='44o8yc4v'><span id='4bdbnnpj'><b id='hyfp1krj'><form id='jfqqwz20'><ins id='56wg2lem'></ins><ul id='i6vy916f'></ul><sub id='mnv5f4ps'></sub></form><legend id='f9qifbkp'></legend><bdo id='c0phkl31'><pre id='4nalpil7'><center id='omc4rwsi'></center></pre></bdo></b><th id='mtil4e0l'></th></span></q></dt></tr></i><div id='4ujrj4pj'><tfoot id='oz6cz294'></tfoot><dl id='rytokmdr'><fieldset id='4odaak7s'></fieldset></dl></div>
                    多一份策划方案,总有益处。

                    请直接添加技术总监微信联系咨询

                    网站设计 品牌营销

                    多一份参考,总有益处

                    联系庚午网络,获得专属《策划方案》及报价

                    咨询相关问题或预约面谈,可以通过以下方式与我们联系

                    业务热线:18574395938 / 大客户专线:18574395938