Блог

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

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

#javascript #reactjs #typescript #iframe #react-ref

#javascript #reactjs #typescript #iframe #react-ref

Вопрос:

У меня есть iframe в моем коде React, который я пытаюсь вызвать из родительского. Я создал Ref-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 , которое имеет смысл, потому что я не уверен, как ссылаться на функцию, определенную в файле iframe src.

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

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

Ответ №1:

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