调整IFRAME的宽度和高度以配合其内容

Question

调整IFRAME的宽度和高度以配合其内容

我需要一个解决办法自动调整这个width和height一种iframe几乎不适合它的内容。关键是宽度和高度可以在iframe已经装好了。我想我需要一个事件行动来处理包含在iframe中的身体尺寸的变化。

Answer 1

<script&nbsp;type="application/javascript">function&nbsp;resizeIFrameToFitContent(&nbsp;iFrame&nbsp;)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;iFrame.width&nbsp;&nbsp;=&nbsp;iFrame.contentWindow.document.body.scrollWidth; &nbsp;&nbsp;&nbsp;&nbsp;iFrame.height&nbsp;=&nbsp;iFrame.contentWindow.document.body.scrollHeight;}window.addEventListener('DOMContentLoaded',&nbsp;function(e)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;iFrame&nbsp;=&nbsp;document.getElementById(&nbsp;'iFrame1'&nbsp;); &nbsp;&nbsp;&nbsp;&nbsp;resizeIFrameToFitContent(&nbsp;iFrame&nbsp;); &nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;or,&nbsp;to&nbsp;resize&nbsp;all&nbsp;iframes: &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;iframes&nbsp;=&nbsp;document.querySelectorAll("iframe"); &nbsp;&nbsp;&nbsp;&nbsp;for(&nbsp;var&nbsp;i&nbsp;=&nbsp;0;&nbsp;i&nbsp;<&nbsp;iframes.length;&nbsp;i++)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;resizeIFrameToFitContent(&nbsp;iframes[i]&nbsp;); &nbsp;&nbsp;&nbsp;&nbsp;}}&nbsp;);</script><iframe&nbsp;src="usagelogs/default.aspx"&nbsp;id="iFrame1"></iframe>

Answer 2

跨浏览器jquery插件.交叉弓形，跨域图书馆用mutationObserver保持IFRAME的大小与内容和postMessage若要在iframe和主机之间进行通信，请执行以下操作。使用jQuery或不使用jQuery。

Answer 3

到目前为止，给出的所有解决方案只占一次性调整大小。您提到您希望能够在修改内容后调整iframe的大小。为了做到这一点，您需要在iframe中执行一个函数(一旦内容被更改，您需要触发一个事件来表示内容已经更改)。我被困住了一段时间，因为iframe中的代码似乎仅限于iframe中的DOM(并且无法编辑iframe)，而在iframe之外执行的代码被困在iframe之外的DOM中(并且无法从iframe内部接收一个事件)。解决方案来自发现(通过同事的帮助)可以告诉jQuery使用什么DOM。在本例中，父窗口的DOM。因此，这样的代码可以满足您的需要(当在iframe中运行时)：<script&nbsp;type="text/javascript"> &nbsp;&nbsp;&nbsp;&nbsp;jQuery(document).ready(function&nbsp;()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;jQuery("#IDofControlFiringResizeEvent").click(function&nbsp;()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;frame&nbsp;=&nbsp;$('#IDofiframeInMainWindow',&nbsp;window.parent.document); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;height&nbsp;=&nbsp;jQuery("#IDofContainerInsideiFrame").height(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;frame.height(height&nbsp;+&nbsp;15); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}); &nbsp;&nbsp;&nbsp;&nbsp;});</script>