Вызов функции, определенной в iframe от родителя, с использованием React Ref

У меня есть iframe в моем коде React, который я пытаюсь вызвать из родителя. Я создал React Ref для iframe, который подключен к iframe, но я не уверен, как реагировать на функции внутри iframe из компонента React. Вот упрощенный пример:

// App.tsx
import * as React from "react";
import "./styles.css";

interface Props {}

interface State {
  iframeRef: React.RefObject<HTMLIFrameElement>;
}

export default class App extends React.Component<Props, State> {

  /**
   * @inheritdoc
   */
  public constructor(props: Props) {
    super(props);
    this.state = {
        ...this.state,
        iframeRef: React.createRef()
    };
  }
  
  /**
   * @inheritdoc
   */
  public render() { 
    return (
    <div className="App">
      <h1>In component</h1>
      <iframe
        ref={this.state.iframeRef}
        title={"iframe"}
        src={"public/iframe.html"}
      />
    <button 
      onClick={() => this.state.iframeRef.current!.contentWindow!.document!.body!.sayHi()}
    >click me</button>
    </div>
  );
    }
}

а вот код HTML, который вызывается в iframe:

// public/iframe.html
<!DOCTYPE html>
<html>
  <body>
    in iframe
    <script>
      function sayHi() {
        alert("hello");
      }
    </script>
  </body>
</html>

У меня две проблемы. Я не вижу HTML, определенный в файле src, это просто пустое поле с рамкой. Другая проблема заключается в том, что когда я нажимаю кнопку, я получаю сообщение об ошибке _this2.state.iframeRef.current.contentWindow.document.body.sayHi is not a function, что имеет смысл, потому что я не уверен, как ссылаться на функцию, определенную в файле src iframe.

Как я могу заставить iframe отображать содержимое файла src? И как я могу получить доступ к функциям, определенным в iframe, на который я ссылаюсь?

У меня есть песочница, с которой я играл


reactjs typescript javascript iframe react-ref
person TheStrangeQuark    schedule 10.12.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я понял это самостоятельно. Проблема была немного не связана с тем, что я ожидал, но я опубликую, если кто-то еще столкнется с этой проблемой. Ввод public/iframe.html приводил к тому, что он не находил файл, и мне нужно было установить src={iframe.html}, и я не знал, что public было местом по умолчанию для поиска этих файлов. Кроме того, вызов функции в html должен быть onClick={() => this.state.iframeRef.current!.contentWindow!.sayHi()}.

person TheStrangeQuark    schedule 11.12.2020