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)
