如果发生变化，如何在 onload 后显示所有 iframe 内容？答案

【问题标题】：How to show all iframe content after onload if its change?如果发生变化，如何在 onload 后显示所有 iframe 内容？
【发布时间】：2019-04-04 23:00:50
【问题描述】：

我正在为一家公司制作一些东西，他们要求我制作一个 iframe，在调整大小（仅高度）时，调整正文的大小以查看完整的 iframe。

iframe 包含一个表单，完成后，iframe 更改为自己添加表单的简历，图像...

我已经尝试使用 DOM 和 jQuery 制作 onclick、onchange 和 onresize 事件，更改 iframe 和包含它的 div 的高度，更改 iframe 和正文/文档的高度，使用 setInterval 来将 iframe 的高度添加到 body 高度......我不能使用第三方库，公司决定。

HTML：

<iframe id="iframeCenter" src="#####" width="100%" height="auto" onload="changeIframeSize()" scrolling="no" frameborder="0">  
</iframe>

JavaScript：

function changeIframeSize() {
  var iframe = document.getElementById("iframeCenter");
  iframe.style.height = iframe.contentWindow.document.body.scrollHeight + 'px';
}

其实onload函数是起作用的，当文档加载iframe高度变化时，但是当iframe变化时，body高度不一样。

【问题讨论】：

标签： javascript iframe

【解决方案1】：

TLDR：因此，您需要做的是，每当 iFrame 内部的内容发生更改时，您需要在 iFrame 外部发送信号，并且应该在页面外部有一个侦听器并相应地更改高度.

每当渲染组件或更新任何内容时，我都会使用 iFrame postMessage 和窗口的 eventListener，我使用这些在 iFrame 和主页之间进行通信，因此您现在处于正确的路径上，您需要做的就是在 iFrame 内部传递值，

const payload = 'updateHeight'
targetWindow.postMessage(message, targetOrigin, payload)

并在主屏幕中添加eventListener

window.eventListener('message', (event)=> {
  if(event.data === 'updateHeight') {
   // change the height here by calling `changeIframeSize()`
  }
})

这是 postMessage 的documentation

附加信息：如果将来你想要一个回调或者想要在 iFrame 外部或内部传递一个函数，你可以去post-robot，它对我有很大帮助。

【讨论】：

【解决方案2】：

在 iframe 上方创建其他 div。并更改该 div 的高度并使 iframe 的高度为 100%。我想这会对你有所帮助。否则，您可以制作自定义 javascript 和 jquery 来轻松制作该部分。

【讨论】：