【问题标题】：Auto Resize iframe Not Work If Iframe Loaded By OnClick如果 OnClick 加载了 iframe，则自动调整 iframe 大小不起作用
【发布时间】：2016-04-30 17:19:23
【问题描述】：

我正在构建一个只能通过 iframe 看到的网站。我还添加了一个可以调整自动调整高度的脚本。

但是加载我的博客，因此必须同时加载两个页面的额外负担。为了应对，我应用 OnClick 来加载 iframe。

自动调整大小但结果不起作用。

加载 Iframe 代码：

<script type="text/javascript">
function okeBos() {
document.getElementById("iframeControl").innerHTML='<iframe scrolling="no" src="http://name-domain.com" style="border: 0; width: 100%;"></iframe>';document.getElementById("starApps").style.display="none";
};
</script>

<div id="iframeControl"></div><div id="starApps"><span onclick="okeBos()">Load Iframe</span></div>

你知道如何使用自动调整大小来实现这样的技巧吗？请帮助我，谢谢..

编辑

以下代码sn -p Resize My

存储在加载的站点：

<script src='http://britha.com/Upload/MyFile/iframeResizer.contentWindow.min.js' type='text/javascript'></script>
<script>
    var iFrameResizer = {
        messageCallback: function(message){
        }
    }
</script>

存储在包含 iframe 的站点上：

<script src="http://britha.com/Upload/MyFile/iframeResizer.js" type="text/javascript"></script>
<script type="text/javascript">
    iFrameResize({
        log                     : true,
        enablePublicMethods     : true,
        enableInPageLinks       : true,
    });
</script>

【问题讨论】：

标签： javascript jquery iframe iframe-resizer

【解决方案1】：

更新

我对 iframe 的了解是，它们通常是 DOM 上最后加载的，所以有时你不得不期待延迟。我忽略了询问您是否可以通过正常方式（即在标记（HTML）中）成功加载 iframe。无论如何，我强烈建议您以正常方式加载 iframe，因为 iframe-resizer 插件无法识别它。它必须在 2 个页面之间进行协调、计算和调整，所以我很确定它会考虑加载时间。每当用户决定按下按钮时弹出的 iframe 对计算机来说就像 5 年（不是科学事实，只是夸大其词）。

我制作了一个 Plunker 并使用了 repository 提供的示例，我还添加了一些我自己的测试。这是最重要的代码：

父页面

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/iframe-resizer/3.5.3/iframeResizer.min.js"></script>
<script>
iFrameResize({options});

子页面

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/iframe-resizer/3.5.3/iframeResizer.contentWindow.min.js"></script>
<script>

最重要的一点：不要动态创建 IFRAME

PLUNKER

旧

请解释它是如何不起作用的。它在此片段中起作用...如果我没有自动调整大小脚本，我应该如何知道要修复什么？

片段

<script>
  
function okeBos() {
   document.getElementById("iframeControl").innerHTML='<iframe scrolling="no" src="http://name-domain.com" style="border: 0; width: 100%;"></iframe>';
  
    document.getElementById("starApps").style.display="none";
};
  
</script>

<div id="iframeControl"></div>

<div id="starApps">
  <span onclick="okeBos()">Load Iframe</span>
</div>

【讨论】：