根据内容 – JQUERY / Javascript使iframe高度动态化
我在iframe中加载了一个aspx网页。 Iframe中的内容可以比iframe的高度更高。 iframe不应该有滚动条。
我有一个包装的div标签内的iframe基本上是所有的内容。 我写了一些jQuery来调整大小：
$("#TB_window", window.parent.document).height($("body").height() + 50);
其中TB_window是包含Iframe的div。
body – iframe中aspx的body标签。
该脚本附加到iframe内容。 我从父页面获取TB_window元素。 虽然这在Chrome上运行良好，但TB_window在Firefox中崩溃。 为什么会发生这种情况，我感到非常困惑/迷失。
您可以使用contentWindow.document.body.scrollHeight检索IFRAME内容的高度
加载IFRAME之后，可以通过执行以下操作更改高度：
<script type="text/javascript"> function iframeLoaded() { var iFrameID = document.getElementById('idIframe'); if(iFrameID) { // here you can make the height, I delete it first, then I make it again iFrameID.height = ""; iFrameID.height = iFrameID.contentWindow.document.body.scrollHeight + "px"; } } </script>
然后，在IFRAME标签上，像这样连接处理程序：
<iframe id="idIframe" onload="iframeLoaded()" ...
我刚才有一种情况，在发生表单提交之后，我还需要从IFRAME本身调用iframeLoaded 。 您可以通过在IFRAME的内容脚本中执行以下操作来完成此操作：
parent.iframeLoaded();
对Aristos的一个稍微改进的答案…
<script type="text/javascript"> function resizeIframe(iframe) { iframe.height = iframe.contentWindow.document.body.scrollHeight + "px"; } </script>
然后在你的iframe中声明如下：
<iframe onload="resizeIframe(this)" ...
有两个小小的改进：
- 您不需要通过document.getElementById获取元素 – 因为您已经在onload回调中获得了该元素。
- 如果要在下一个语句中重新分配
iframe.height = ""则不需要设置iframe.height = ""。 这样做实际上会导致开销，因为你正在处理一个DOM元素。
我发现接受的答案是不够的，因为Safari浏览器或Chrome浏览器不支持 X-FRAME-OPTIONS：Allow-From。 用一种不同的方法，而不是在由来自Disqus的Ben Vinegar 发表的演讲中找到的。 这个想法是添加一个事件监听器到父窗口，然后在iframe中，使用window.postMessage向父节点发送一个事件，告诉它做一些事情（调整iframe的大小）。
所以在父文档中添加一个事件监听器：
window.addEventListener('message', function(e) { var $iframe = jQuery("#myIframe"); var eventName = e.data[0]; var data = e.data[1]; switch(eventName) { case 'setHeight': $iframe.height(data); break; } }, false);
在iframe中，写一个函数来发布消息：
function resize() { var height = document.getElementsByTagName("html")[0].scrollHeight; window.parent.postMessage(["setHeight", height], "*"); }
最后，在iframe中，添加一个onLoad到body标签来触发resize函数：
<body onLoad="resize();">
加入这个iframe，这对我工作：
onload="this.height=this.contentWindow.document.body.scrollHeight;"
如果你使用jQuery，请尝试下面的代码：
onload="$(this).height($(this.contentWindow.document.body).find(\'div\').first().height());"
有四种不同的属性，你可以看看在iFrame中的内容的高度。
document.documentElement.scrollHeight document.documentElement.offsetHeight document.body.scrollHeight document.body.offsetHeight
可悲的是，他们都可以给出不同的答案，这些浏览器之间的不一致。 如果将body边距设置为0，则document.body.offsetHeight会给出最佳答案。 要获得正确的值，请尝试此功能; 它是从iframe调整器库中提取的，这个库在内容改变时保持iFrame的大小正确，或者调整浏览器的大小。
function getIFrameHeight(){ function getComputedBodyStyle(prop) { function getPixelValue(value) { var PIXEL = /^\d+(px)?$/i; if (PIXEL.test(value)) { return parseInt(value,base); } var style = el.style.left, runtimeStyle = el.runtimeStyle.left; el.runtimeStyle.left = el.currentStyle.left; el.style.left = value || 0; value = el.style.pixelLeft; el.style.left = style; el.runtimeStyle.left = runtimeStyle; return value; } var el = document.body, retVal = 0; if (document.defaultView && document.defaultView.getComputedStyle) { retVal = document.defaultView.getComputedStyle(el, null)[prop]; } else {//IE8 & below retVal = getPixelValue(el.currentStyle[prop]); } return parseInt(retVal,10); } return document.body.offsetHeight + getComputedBodyStyle('marginTop') + getComputedBodyStyle('marginBottom'); }
你可以在这里参考相关的问题 – 如何使iframe的宽度和高度相同，其父div？
设置动态高度 –
- 我们需要与跨域iFrames和父母沟通
- 然后我们可以发送iframe的滚动高度/内容高度到父窗口
和代码 – https://gist.github.com/mohandere/a2e67971858ee2c3999d62e3843889a8
我发现特洛伊的答案没有奏效。 这是为Ajax重写的代码：
$.ajax({ url: 'data.php', dataType: 'json', success: function(data) { // Put the data onto the page // Resize the iframe var iframe = $(window.top.document).find("#iframe"); iframe.height( iframe[0].contentDocument.body.scrollHeight+'px' ); } });
要添加到似乎在底部切断的窗口块，特别是当你没有滚动我使用：
function resizeIframe(iframe) { var addHeight = 20; //or whatever size is being cut off iframe.height = iframe.contentWindow.document.body.scrollHeight + addHeight + "px"; }
$(document).height() // - $('body').offset().top
和/或
$(window).height()
请参阅堆栈溢出问题如何获取身体元素的高度 。
试试这个在jQuery中找到身体的高度：
if $("body").height()
它没有价值，如果萤火虫 。 也许这就是问题所在。
当你需要一个没有jQuery的解决方案时，这一点很有用。 在这种情况下，您应该尝试添加一个容器并为其设置一个填充百分比
HTML示例代码：
<div class="iframecontainer"> <iframe scrolling="no" src="..." class="iframeclass"width="999px" height="618px"></iframe> </div>
CSS示例代码：
.iframeclass{ position: absolute; top: 0; width: 100%; } .iframecontainer{ position: relative; width: 100%; height: auto; padding-top: 61%; }
简单的解决方法是测量内容区域的宽度和高度，然后使用这些度量来计算底部填充百分比。
在这种情况下，测量值为1680 x 720像素，因此底部填充为720/1680 = 0.43 * 100，达到43％。
.canvas-container { position: relative; padding-bottom: 43%; // (720 ÷ 1680 = 0.4286 = 43%) height: 0; overflow: hidden; } .canvas-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
BlueFish的一个稍微改进的答案…
function resizeIframe(iframe) { var padding = 50; if (iframe.contentWindow.document.body.scrollHeight < (window.innerHeight - padding)) iframe.height = iframe.contentWindow.document.body.scrollHeight + "px"; else iframe.height = (window.innerHeight - padding) + "px"; }
这需要考虑窗口屏幕（浏览器，电话）的高度，这对于响应式设计和高度巨大的内嵌框架非常有用。 填充表示您要在iframe上方和下方的填充，以防整个屏幕显示。
jQuery('.home_vidio_img1 img').click(function(){ video = '<iframe src="'+ jQuery(this).attr('data-video') +'"></iframe>'; jQuery(this).replaceWith(video); }); jQuery('.home_vidio_img2 img').click(function(){ video = <iframe src="'+ jQuery(this).attr('data-video') +'"></iframe>; jQuery('.home_vidio_img1 img').replaceWith(video); jQuery('.home_vidio_img1 iframe').replaceWith(video); }); jQuery('.home_vidio_img3 img').click(function(){ video = '<iframe src="'+ jQuery(this).attr('data-video') +'"></iframe>'; jQuery('.home_vidio_img1 img').replaceWith(video); jQuery('.home_vidio_img1 iframe').replaceWith(video); }); jQuery('.home_vidio_img4 img').click(function(){ video = '<iframe src="'+ jQuery(this).attr('data-video') +'"></iframe>'; jQuery('.home_vidio_img1 img').replaceWith(video); jQuery('.home_vidio_img1 iframe').replaceWith(video); });
而不是使用javscript / jquery我发现最简单的方法是：
<iframe style="min-height:98vh" src="http://yourdomain.com" width="100%"></iframe>
以防万一这有助于任何人。 我拉着我的头发试图让这个工作，然后我注意到，iframe有一个高度：100％的类入口。 当我删除这个，一切按预期工作。 所以，请检查是否有任何css冲突。
