React - доступ к встроенным элементам iframe - PullRequest
Новая
       74

React - доступ к встроенным элементам iframe

1 голос
/ 01 мая 2020

У меня есть iframe, и я пытаюсь получить доступ к его текстовой области и добавить прослушиватель: 

    onIframeRef = (node) => {
       this.Iframe = node;
    };

  componentDidMount() {
      let iframeDoc = this.Iframe.contentDocument || this.Iframe.contentWindow.document;
      let textArea = iframeDoc.contentWindow.document.getElementById("some-textarea")[0];
      textArea.addEventListener("input", this.onInput);
   }

    render() {
            return <div>
                 <iframe
                  ref={this.onIframeRef}
                  sandbox="allow-same-origin"
                  srcdoc='<html><body><textarea id="some-textarea"></textarea></body></html>'
                  ></iframe>
             </div> 
    }

Я запутался, если установка srcdoc означает, что код имеет тот же источник или нет, так как код не работает и this.Iframe не имеет ни contentDocument, ни contentWindow

1 Ответ

1 голос
/ 01 мая 2020

srcdo c означает, что он имеет одинаковое происхождение, однако ваш код не работает по следующим двум причинам:

  1. Это правда, что при запуске componentDidMount это означает, что iframe был вставлен в DOM, но это не означает, что он сам iframe был загружен, и поэтому, когда следующий код выполняется, он вернет null 
iframeDoc.contentWindow.document.getElementById("some-textarea")

let textArea = iframeDoc.contentWindow.document.getElementById("some-textarea")[0]

Элемент get по id возвращает сам элемент, и поэтому [0] вернет undefined.

Чтобы заставить ваш код работать, вы должны слушать событие загрузки в iframe, а затем запустите свой код в этом прослушивателе событий (чтобы убедиться, что сам iframe dom был загружен)

здесь есть работающие кодыandbox https://codesandbox.io/s/funny-turing-25wn9?file= / src / App. js

...