根据内容设置 iFrame 宽度和高度答案

【问题标题】：Set iFrame width and height based on content根据内容设置 iFrame 宽度和高度
【发布时间】：2013-11-22 02:16:28
【问题描述】：

目前我有一个打开 ASPX 页面的 jquery iframe 模式对话框。此页面包含另一个带有 jQuery 的 iFrame。内容 iframe 没有设置任何高度或宽度，因此根据内部内容的大小调整大小。外部 jQuery iframe 模态不会根据其中的内容 iframe 调整大小。这是打开模态的代码：

function openModal() {

    var horizontalPadding = 30;
    var verticalPadding = 30;
    var jqurl = "ContentPage.aspx";
    var title = "Modal Title";
    jQuery('<iframe scrolling="no" id="cLaunch" class="cLaunch" src="' + jqurl + '" frameborder="0"/>').dialog({
        title: title,
        modal: true,
        resizable: true,
        position: ['center', 50],

        fluid:true,
        overlay: {
            opacity: 0.5,
            background: "grey"
        }

    });
}

setInterval(function () {
    document.getElementById("cLaunch").style.width = document.getElementById("cLaunch").contentWindow.document.documentElement.scrollWidth + 30 +  'px';
    document.getElementById("cLaunch").style.height = document.getElementById("cLaunch").contentWindow.document.body.scrollHeight + 'px';


}, 1000)

内容页面.aspx：

<iframe name="contentloader"  id="contentloader"  frameborder="0" scrolling="no"></iframe>

任何帮助将不胜感激。

【问题讨论】：

标签： javascript jquery iframe height width

【解决方案1】：

尝试根据 iframe 中加载的内容来设置 iframe 的宽度和高度

$("#cLaunch").load(function() {
    $(this).height( $(this).contents().find("body").height());
    $(this).width( $(this).contents().find("body").width());
});

【讨论】：