Блог

Главная - Вопросы по программированию - Реагировать — Подождите, пока содержимое srcDoc iframe не будет загружено, а затем выполните код

Реагировать — Подождите, пока содержимое srcDoc iframe не будет загружено, а затем выполните код

#javascript #reactjs #iframe

Вопрос:

Как проверить, загружено ли содержимое srcDoc iframe?
После загрузки содержимого запустите iframe.style.height = iframe.contentWindow.document.body.scrollHeight "px";

Я пробовал списки событий(load, DOMContentLoaded), onLoad = () =>, .onload, состояние, цикл до true, отправка сообщений из iframe в родительский, вызов функции из iframe в родительский, window.onmessage, все работало на локальном хосте, но не на живом веб-сайте при начальной загрузке страницы.

Проблема в том, что код выполняется слишком быстро, и у меня нет идей, чтобы попробовать.
Я узнал setTimeout об этом, когда попробовал 5 секунд с кодом iframe.style.height = iframe.contentWindow.document.body.scrollHeight "px"; , и он работал так, как должен.

Codesandbox аналогичный пример без части ожидания(onLoad работает не так, как должно быть на живом веб-сайте): https://codesandbox.io/s/tbql2

 import React from "react";

class App extends React.Component {
  constructor() {
    super();
    this.iframeRef = React.createRef();
    this.html =
      '<html><body style="margin:0;"><div style="height:500px;background-color:aqua;padding:5px;">iframe srcDoc</div></body></html>';
  }

  onLoad = () => {
    // not working on live website because the code is executed before the srcDoc content loads.
    const iframe = this.iframeRef.current;
    iframe.style.height =
      iframe.contentWindow.document.body.scrollHeight   "px";
  };

  // componentDidMount() {
  // //   this is working as it should, now how to do this after iframe srcDoc content loads.
  //   const iframe = this.iframeRef.current;
  //   setTimeout(function () {
  //     iframe.style.height =
  //       iframe.contentWindow.document.body.scrollHeight   "px";
  //   }, 5000);
  // }

  IframeComponent() {
    return (
      <>
        <iframe
          ref={this.iframeRef}
          onLoad={() => this.onLoad()}
          srcDoc={this.html}
          title="title"
        />
      </>
    );
  }

  render() {
    return <>{this.IframeComponent()}</>;
  }
}

export default App;
Метки: , ,