Javascript 如果iframe内容发生更改，如何在加载后显示所有iframe内容？

我正在为一家公司做一些东西，他们让我做一个iframe，在调整大小（仅高度）时，调整身体大小以看到完整的iframe

iframe包含一个表单，在您完成它之后，iframe会为自己添加一个表单的简历、一个图像

我已经尝试过使用DOM和jQuery制作onclick、onchange和onresize事件，更改iframe和包含它的div的高度，更改iframe和body/document的高度，使用setInterval将iframe的高度添加到body height中。。。我不能使用第三方图书馆，这是公司的决定

HTML:

---

实际上，当文档加载iframe高度改变时，onload函数起作用，但是当iframe改变时，身体高度不一样。

因此，无论何时在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()`
  }
})

这是邮递邮件的地址

---

其他信息：如果将来您想要回调，或者想要在iFrame外部或内部传递函数，这对我帮助很大。

在iFrame的正上方进行其他div。改变那个div的高度，使iframe的高度为100%。 我想这对你有帮助。否则，您可以创建一个自定义javascript和jquery来轻松地创建该部分

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

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