猿问

基于jQuery/Javascript内部内容使iframe高度动态

基于jQuery/Javascript内部内容使iframe高度动态

我正在加载一个ASPX网页在一个iframe。IFRAME中的内容可以比IFRAME的高度更高。iframe不应该有滚动条。

我有个包装纸div标签内的iframe，这基本上是所有的内容。我编写了一些jQuery来实现大小调整：

$("#TB_window", window.parent.document).height($("body").height() + 50);

哪里TB_window是一个div，在这个div中，Iframe都被控制住了。

body-IFRAME中ASPX的身体标记。

此脚本附加到iframe内容。我要去拿TB_window元素来自父页。虽然这在Chrome上很好，但是tb_窗口在Firefox中会崩溃。我真搞不懂为什么会这样。


陪伴而非守候
浏览 386回答 3
3回答

慕标琳琳

控件的高度。IFRAME的内容使用：contentWindow.document.body.scrollHeight在.之后IFRAME加载后，可以通过以下操作更改高度：<script&nbsp;type="text/javascript"> &nbsp;&nbsp;function&nbsp;iframeLoaded()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;iFrameID&nbsp;=&nbsp;document.getElementById('idIframe'); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(iFrameID)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;here&nbsp;you&nbsp;can&nbsp;make&nbsp;the&nbsp;height,&nbsp;I&nbsp;delete&nbsp;it&nbsp;first,&nbsp;then&nbsp;I&nbsp;make&nbsp;it&nbsp;again &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;iFrameID.height&nbsp;=&nbsp;""; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;iFrameID.height&nbsp;=&nbsp;iFrameID.contentWindow.document.body.scrollHeight&nbsp;+&nbsp;"px"; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;}</script>然后，在IFRAME标记，您可以这样连接处理程序：<iframe&nbsp;id="idIframe"&nbsp;onload="iframeLoaded()"&nbsp;...不久前我遇到了另外一个需要打电话的情况iframeLoaded从IFRAME在表单提交发生在.您可以通过在IFRAME内容脚本：parent.iframeLoaded();
0

一只名叫tom的猫

<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 = ""如果你要在下一个声明中重新分配它。这样做实际上会在处理DOM元素时产生开销。
0

有只小跳蛙

我发现接受的答案是不够的，因为X帧选项：允许-从在Safari或Chrome中不支持..使用不同的方法，在展示来自Disqus的本醋。这样做的目的是向父窗口添加一个事件侦听器，然后在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内部，向body标记添加一个onload，以触发调整大小函数：<body onLoad="resize();">
0
随时随地看视频慕课网APP

相关分类

JavaScript
JQuery
我要回答