站长资源网络编程 使用jQuery不判断浏览器高度解决iframe自适应高度问题 整理:jimmy2026/8/5浏览2次 站长资源 网络编程 网盘链接 云盘下载 简介这里介绍两个超级简单的方法，不用写什么判断浏览器高度、宽度啥的。下面的两种方法自选其一就行了。一个是放在和iframe同页面的，一个是放在test.html页面的。注意别放错了地方。iframe的代码中，注意要写ID，没有ID查找不到复制代码 代码如下:<div id="MyContent"><p>这里介绍两个超级简单的方法，不用写什么判断浏览器高度、宽度啥的。</p> <p>下面的两种方法自选其一就行了。一个是放在和iframe同页面的，一个是放在test.html页面的。</p> <p>注意别放错了地方。<br> iframe的代码中，注意要写ID，没有ID查找不到</p> <p><U>复制代码</U> 代码如下:<br> <iframe src="/UploadFiles/2021-04-02/test.html"> </p> <p>方法一：</p> <p><U>复制代码</U> 代码如下:<br> //注意：下面的代码是放在和iframe同一个页面调用<br> $("#main").load(function(){<br> var mainheight = $(this).contents().find("body").height()+30;<br> $(this).height(mainheight);<br> }); <br> </p> <p>方法二：</p> <p><U>复制代码</U> 代码如下:<br> //注意：下面的代码是放在test.html调用<br> $(window.parent.document).find("#main").load(function(){<br> var main = $(window.parent.document).find("#main");<br> var thisheight = $(document).height()+30;<br> main.height(thisheight);<br> });<br> </p> <p>在做项目的过程中需要使用iframe，但是iframe默认有一个高度，超过该默认高度的会内容会被隐藏起来，而小于该默认高度的内容呢又会把默认高度当成内容的高度，在经过寻找答案的过程中，找到了怎样去控制iframe高度自适应</p> <p>iframe自适应高度本身是很简单的方法，就是在页面加载完成后，重新计算一下高度即可。</p> <p>代码如下：</p> <p><U>复制代码</U> 代码如下:<br> //公共方法：设置iframe的高度以保证全部显示数据<br> //function SetPageHeight() {<br> // var iframe = getUrlParam('ifname');<br> // var myiframe = window.parent.document.getElementById(iframe);<br> // iframeLoaded(myiframe);<br> //}<br> var iframeLoaded = function (iframe) {<br> if (iframe.src.length > 0) {<br> if (!iframe.readyState || iframe.readyState == "complete") {<br> var bHeight = <br> iframe.contentWindow.document.body.scrollHeight;<br> var dHeight = <br> iframe.contentWindow.document.documentElement.scrollHeight;<br> var height = Math.max(bHeight, dHeight);<br> iframe.height = height;<br> }<br> }<br> }<br> //分页时重新设置 iframe 高度 ； 修改后：iframe.name = iframe.id<br> var reSetIframeHeight = function()<br> {<br> try {<br> var oIframe = parent.document.getElementById(window.name);<br> oIframe.height = 100;<br> iframeLoaded(oIframe);<br> }<br> catch (err)<br> {<br> try {<br> parent.document.getElementById(window.name).height = 1000;<br> } catch (err2) { }<br> }<br> }<br> </p> <p>调用reSetIframeHeight()；方法即可。</p></div> </div> </div> <div class="share"> </div> <div class="nextinfo"> <p>上一篇：<a href="/3g/1/116458.html" title="javascript 判断整数方法分享">javascript 判断整数方法分享</a></p> <p>下一篇：<a href="/3g/1/116460.html" title="jquery队列函数用法实例">jquery队列函数用法实例</a></p> </div> <div class="otherlink"> <h2>最新资源</h2> <ul> <li><a href="/3g/1/623703.html" title="群星《奔赴！万人现场 第2期》[FLAC/分轨]">群星《奔赴！万人现场 第2期》[FLAC/分轨]</a></li> <li><a href="/3g/1/623702.html" title="群星《奇妙浪一夏 (上海迪士尼度假区音乐">群星《奇妙浪一夏 (上海迪士尼度假区音乐</a></li> <li><a href="/3g/1/623701.html" title="群星《奇妙浪一夏 (上海迪士尼度假区音乐">群星《奇妙浪一夏 (上海迪士尼度假区音乐</a></li> <li><a href="/3g/1/623700.html" title="【古典音乐】詹姆斯·高威《季节》1993[WA">【古典音乐】詹姆斯·高威《季节》1993[WA</a></li> <li><a href="/3g/1/623699.html" title="贝拉芳蒂《卡里普索之王》SACD[WAV+CUE]">贝拉芳蒂《卡里普索之王》SACD[WAV+CUE]</a></li> <li><a href="/3g/1/623698.html" title="小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE">小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE</a></li> <li><a href="/3g/1/623697.html" title="群星《欢迎来到我身边 电影原声专辑》[32">群星《欢迎来到我身边 电影原声专辑》[32</a></li> <li><a href="/3g/1/623696.html" title="群星《欢迎来到我身边 电影原声专辑》[FL">群星《欢迎来到我身边 电影原声专辑》[FL</a></li> <li><a href="/3g/1/623695.html" title="雷婷《梦里蓝天HQⅡ》 2023头版限量编号低">雷婷《梦里蓝天HQⅡ》 2023头版限量编号低</a></li> <li><a href="/3g/1/623694.html" title="群星《2024好听新歌42》AI调整音效【WAV分">群星《2024好听新歌42》AI调整音效【WAV分</a></li> </ul> </div> </div> <div class="sidebar"> </div> <div class="sidebar"> 友情链接:<a href="http://www.imxmx.com/" title="杰晶网络" target="_blank">杰晶网络</a> <a href="/" title="DDR爱好者之家" target="_blank">DDR爱好者之家</a> <a href="http://www.nqxw.com/" title="南强小屋" target="_blank">南强小屋</a> <a href="http://www.paidiu.com/" title="黑松山资源网" target="_blank">黑松山资源网</a> <a href="http://www.dyhadc.com/" title="白云城资源网" target="_blank">白云城资源网</a> <a href="/sitemap1.xml">站点地图</a> <a href="/sitemap.xml">SiteMap</a> </div> </article> <footer> <p>Design by <a href="http://m.ddrfans.com">DDR爱好者之家</a> <a href="http://m.ddrfans.com">http://m.ddrfans.com</a></p> </footer> <script src="/images3g/nav.js"></script> <script type="text/javascript"> jQuery.noConflict(); jQuery(function() { var elm = jQuery('#left_flow2'); var startPos = jQuery(elm).offset().top; jQuery.event.add(window, "scroll", function() { var p = jQuery(window).scrollTop(); jQuery(elm).css('position', ((p) > startPos) ? 'fixed' : ''); jQuery(elm).css('top', ((p) > startPos) ? '0' : ''); }); }); </script> </body> </html>