如果由OnClick加载iframe，则自动调整iframe不起作用

Question

我正在构建一个只能通过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>

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

修改

以下代码段调整我的大小

存储在已加载的网站上：

<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>

Answer 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

<小时/>

OLD

<小时/> 请解释它是如何工作的。它在这个片段中运行...如果我没有自动调整大小脚本，我该怎么知道要修复什么？

段

<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>