Как показать весь контент iframe после загрузки, если его изменить?

Question

Я делаю кое-что для компании, и они просят меня создать iframe, который при изменении размера (только высоты) изменяет размеры тела, чтобы увидеть полный iframe.

iframe содержит форму,и после того, как вы завершите его, изменение iframe добавит к себе резюме формы, изображение ...

Я уже пытался сделать события onclick, onchange и onresize, с DOM и jQuery, изменить высоту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, но когдаiframe изменяется, рост не делает то же самое.

Answer 1

сделать другой div прямо над iframe.И измените высоту этого div и сделайте этот iframe 100% высоты.Я думаю, что это поможет вам.В противном случае вы можете создать собственный javascript и jquery, чтобы сделать эту часть легко.

Answer 2

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

Дополнительная информация: Если в будущем вам нужен обратный вызов или вы хотите передать функцию вне или внутри iFrame, вы можете перейти на post-robot , Это мне очень помогло .