如果iframe通过单击加载，则自动调整iframe大小无效

Auto Resize iframe Not Work If Iframe Loaded By OnClick

本文关键字：iframe 调整 无效 单击 加载 如果      更新时间：2023-09-26

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

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

编辑

以下代码片段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>

更新

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

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

父页面

<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

柱塞

旧的

请解释它是如何不起作用的。它在这个代码段中起作用。。。如果我没有自动调整大小的脚本，我该怎么知道该修复什么？

摘录

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

相关文章：