Question

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

iframe包含一个表单，完成后，对iframe的更改将为表单添加一个履历表，图像...

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

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';
}

实际上，当文档加载iframe高度更改时，onload功能起作用，但是当iframe更改时，主体高度则不一样。

Answer 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，这对我很有帮助。

Answer 2

在iframe上方设置另一个div。并更改该div的高度并使该iframe的高度为100％。我认为这会对您有所帮助。否则，您可以制作一个自定义javascript和jquery来轻松实现该部分。

如果更改了inload，如何显示所有iframe内容？

2 个答案: