为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

30秒到达战场 2019-06-19 15:33:32
调整IFRAME的宽度和高度以配合其内容我需要一个解决办法自动调整这个width和height一种iframe几乎不适合它的内容。关键是宽度和高度可以在iframe已经装好了。我想我需要一个事件行动来处理包含在iframe中的身体尺寸的变化。
查看完整描述

3 回答

?
慕的地6264312

TA贡献1817条经验 获得超6个赞

<script type="application/javascript">function resizeIFrameToFitContent( iFrame ) {

    iFrame.width  = iFrame.contentWindow.document.body.scrollWidth;
    iFrame.height = iFrame.contentWindow.document.body.scrollHeight;}window.addEventListener('DOMContentLoaded', function(e) {

    var iFrame = document.getElementById( 'iFrame1' );
    resizeIFrameToFitContent( iFrame );

    // or, to resize all iframes:
    var iframes = document.querySelectorAll("iframe");
    for( var i = 0; i < iframes.length; i++) {
        resizeIFrameToFitContent( iframes[i] );
    }} );</script><iframe src="usagelogs/default.aspx" id="iFrame1"></iframe>


查看完整回答
反对 回复 2019-06-19
?
富国沪深

TA贡献1790条经验 获得超9个赞

跨浏览器jquery插件.

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


查看完整回答
反对 回复 2019-06-19
?
慕容708150

TA贡献1831条经验 获得超4个赞

到目前为止,给出的所有解决方案只占一次性调整大小。您提到您希望能够在修改内容后调整iframe的大小。为了做到这一点,您需要在iframe中执行一个函数(一旦内容被更改,您需要触发一个事件来表示内容已经更改)。

我被困住了一段时间,因为iframe中的代码似乎仅限于iframe中的DOM(并且无法编辑iframe),而在iframe之外执行的代码被困在iframe之外的DOM中(并且无法从iframe内部接收一个事件)。

解决方案来自发现(通过同事的帮助)可以告诉jQuery使用什么DOM。在本例中,父窗口的DOM。

因此,这样的代码可以满足您的需要(当在iframe中运行时):

<script type="text/javascript">
    jQuery(document).ready(function () {
        jQuery("#IDofControlFiringResizeEvent").click(function () {
            var frame = $('#IDofiframeInMainWindow', window.parent.document);
            var height = jQuery("#IDofContainerInsideiFrame").height();
            frame.height(height + 15);
        });
    });</script>


查看完整回答
反对 回复 2019-06-19
  • 3 回答
  • 0 关注
  • 549 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信