带内容加载的 iframe答案

【问题标题】：Iframe w/ Content Load带内容加载的 iframe
【发布时间】：2017-02-27 11:36:43
【问题描述】：

这是我在 StackOverflow 上的第一个问题，非常感谢所有社区。我目前正在尝试解决一个问题，但找不到任何解决方案：

我想在 iframe 中显示内容，它必须自动调整大小（高度）

目前，一切都按计划进行，除了一件事情：当我进入页面时，iframe 内容已正确加载，但 iframe 大小不正确。我必须刷新一次，然后它将是正确的大小。这是我的代码：

<script>
  function resizeIframe(obj) {
        obj.style.width = obj.contentWindow.document.body.scrollWidth + 'px';
        obj.style.height = 0;
        obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
  }
</script>

<iframe  frameborder="0" width="1000" scrolling="no" onload="resizeIframe(this)" src="/myurl.url"></iframe>

任何帮助将不胜感激！

谢谢

【问题讨论】：

制作一个小提琴之类的东西来重现错误。
尝试在 iframe 创建后放置您的脚本。即<iframe>....</iframe> <script>.... </script>我可能是错的，但值得一试
是的，我也试过了！但它也失败了，我很确定主 html 页面上必须有某种加载优先级，但不知道如何更改它（首先加载 iframe，然后是内容）

标签： javascript jquery html css iframe

【解决方案1】：

您可以告诉它在加载后刷新页面，或者为您的函数设置超时设置以等待它运行。

您是否尝试过在 document.ready(function() {}); 中添加函数

【讨论】：

我尝试应用一次性重新加载过程，但弹出窗口“您要重新加载吗”，这不是很好。我会试试文档。准备好了，我会回来的（我希望有好结果！）

【解决方案2】：

你可以试试这个吗？

document.getElementById('<iframe id>').onload = function (event) {
    var IframWin = event.target.contentWindow;
    $(IframWin.document).ready(function(){
          //your resize code
    });

    //I think this gonna work
    IframWin.$(document).ready(function(){
          //your resize code
    });
};

编辑-> 如果该 iframe 是您的，您可以创建文档就绪功能。并且你可以从 iframe 调用父函数。

在 iframe 中->

$(document).ready(function(){
    parent.resizeFunction();
});

【讨论】：