jquery获取加载时的iframe内容的高度

我有一个帮助页面,help.php,我在main.php中的iframe中加载如何获取此页面的高度,一旦它加载了iframe?

我问这是因为我无法将iframe的高度设置为100%或自动。 这就是为什么我认为我需要使用JavaScript ..我正在使用jQuery

CSS:

body { margin: 0; padding: 0; } .container { width: 900px; height: 100%; margin: 0 auto; background: silver; } .help-div { display: none; width: 850px; height: 100%; position: absolute; top: 100px; background: orange; } #help-frame { width: 100%; height: auto; margin:0; padding:0; } 

JS:

 $(document).ready(function () { $("a.open-help").click(function () { $(".help-div").show(); return false; }) }) 

HTML:

 <div class='container'> <!-- --> <div class='help-div'> <p>This is a div with an iframe loading the help page</p> <iframe id="help-frame" src="../help.php" width="100%" height="100%" frameborder="1"></iframe> </div> <a class="open-help" href="#">open Help in iFrame</a> <p>hello world</p> <p>hello world</p> <p>hello world</p> <p>hello world</p> <p>hello world</p> </div> 

好的我终于find了一个很好的解

 $('iframe').load(function() { this.style.height = this.contentWindow.document.body.offsetHeight + 'px'; }); 

由于一些浏览器(较旧的Safari和Opera)在CSS呈现之前完成了报告载入,因此您需要设置一个微型超时并将其清空并重新分配iframe的src。

 $('iframe').load(function() { setTimeout(iResize, 50); // Safari and Opera need a kick-start. var iSource = document.getElementById('your-iframe-id').src; document.getElementById('your-iframe-id').src = ''; document.getElementById('your-iframe-id').src = iSource; }); function iResize() { document.getElementById('your-iframe-id').style.height = document.getElementById('your-iframe-id').contentWindow.document.body.offsetHeight + 'px'; } 

不太复杂的答案是使用.contents()来获取iframe。 有趣的是,我相信,由于身体上的填充,它会返回与我原来的答案中的代码不同的值。

 $('iframe').contents().height() + 'is the height' 

这就是我为跨域通信所做的工作,所以我担心这可能不必要的复杂。 首先,我会把jQuery放入iFrame的文档中; 这将消耗更多的内存,但不应该增加加载时间,因为脚本只需要加载一次。

使用iFrame的jQuery尽可能早地测量iframe的身体高度(onDOMReady),然后将URL哈希值设置为该高度。 在父文档中,将一个onload事件添加到iframe标签,该标签将查看iframe的位置并提取您需要的值。 由于onDOMReady将始终发生在文档的加载事件之前,因此可以相当肯定地说,在没有竞争条件复杂化的情况下,该值将正确传达。

换一种说法:

…在Help.php中:

 var getDocumentHeight = function() { if (location.hash === '') { // EDIT: this should prevent the retriggering of onDOMReady location.hash = $('body').height(); // at this point the document address will be something like help.php#1552 } }; $(getDocumentHeight); 

…和父文档中:

 var getIFrameHeight = function() { var iFrame = $('iframe')[0]; // this will return the DOM element var strHash = iFrame.contentDocument.location.hash; alert(strHash); // will return something like '#1552' }; $('iframe').bind('load', getIFrameHeight ); 

我发现以下工作在Chrome,Firefox和IE11上:

 $('iframe').load(function () { $('iframe').height($('iframe').contents().height()); }); 

当Iframe内容完成加载事件将触发,它将设置IFrames高度的内容。 这只适用于与IFrame相同的域中的页面。

你不需要iframe中的jquery来做这件事,但是我使用它会导致代码变得非常简单…

把它放在你的iframe文件里。

 $(document).ready(function() { parent.set_size(this.body.offsetHeight + 5 + "px"); }); 

为了消除小窗户上的滚动条,增加了五个,这在尺寸上从来就不是完美的。

而这个在你的父文件里面。

 function set_size(ht) { $("#iframeId").css('height',ht); } 

没有jQuery的代码现在是微不足道的:

 const frame = document.querySelector('iframe') function syncHeight() { this.style.height = `${this.contentWindow.document.body.offsetHeight}px` } frame.addEventListener('load', syncHeight) 

解除事件:

 frame.removeEventListener('load', syncHeight)