Не могу получить список childNodes у body

108

31 января 2022, 11:00

Изучаю реакт. Делаю простое приложение для администрирования страницы статического сайта. Суть в том, что на странице admin мы с помощью iframe загружаем главную страницу сайта и получаем все элементы страницы на которые вешаем обработчики для редактирования. Столкнулся с такой проблемой, что получив iframe могу достучатся только к элементу body, но не ниже. Получаю iframe в нем есть #document, а внутри head и body и всё. Дальше пусто. childNodes у body нет, в тоже время если в консоли браузера попросить у iframe body childNodes все корректно отображается. Вот часть кода отвечающая за работу с childNodes, конкретно метод open().

import React, { Component } from "react"; 
import axios from "axios"; 
import "./../../helpers/iframeLoader.js"; 
 
export default class Editor extends Component { 
  constructor() { 
    super(); 
 
    this.currentPage = "index.html"; 
 
    this.state = { 
      pageList: [], 
      newPageName: "" 
    }; 
    this.createNewPage = this.createNewPage.bind(this); 
  } 
 
  componentDidMount() { 
    this.init(this.currentPage); 
  } 
 
  init(page) { 
    this.iframe = document.querySelector("iframe"); 
    this.open(page); 
    this.loadPageList(); 
  } 
 
  open(page) { 
    this.currentPage = `../${page}`; 
    this.iframe.load(this.currentPage, () => { 
      const body = this.iframe.contentDocument.body; 
      console.log(body); 
      console.log(this.iframe); 
 
      body.childNodes.forEach(node => { 
        console.log(node); 
      }); 
    }); 
  } 
 
  loadPageList() { 
    axios.get("./api").then(res => this.setState({ pageList: res.data })); 
  } 
 
  createNewPage() { 
    axios 
      .post("./api/createNewPage.php", { name: this.state.newPageName }) 
      .then(res => { 
        console.log(res); 
        this.setState({ newPageName: "" }); 
        this.loadPageList(); 
      }) 
      .catch(() => alert("Такая страница уже существует")); 
  } 
 
  deletePage(page) { 
    axios 
      .post("./api/deletePage.php", { name: page }) 
      .then(res => { 
        console.log(res); 
        this.loadPageList(); 
      }) 
      .catch(() => alert("Что-то пошло не так")); 
  } 
 
  render() { 
 
    return ( 
      <iframe src={this.currentPage} frameBorder="0"></iframe> 
    ); 
  } 
}

Вот загрузчик фрейма, но дело не в нем.

HTMLIFrameElement.prototype.load = function(url, callback) { 
  const iframe = this; 
 
  try { 
    iframe.src = 
      url + 
      "?rnd=" + 
      Math.random() 
        .toString() 
        .substring(2); 
  } catch (error) { 
    if (!callback) { 
      return new Promise((resolve, reject) => { 
        reject(error); 
      }); 
    } else { 
      callback(error); 
    } 
  } 
 
  const maxTime = 60000; 
  const interval = 200; 
  let timerCount = 0; 
 
  if (!callback) { 
    return new Promise((resolve, reject) => { 
      const timer = setInterval(() => { 
        if (!iframe) return clearInterval(timer); 
        timerCount++; 
        if ( 
          iframe.contentDocument && 
          iframe.contentDocument.readyState === "complete" 
        ) { 
          clearInterval(timer); 
          resolve(); 
        } else if (timerCount * interval > maxTime) { 
          reject(new Error("Iframe load file!")); 
        } 
      }, interval); 
    }); 
  } else { 
    const timer = setInterval(() => { 
      if (!iframe) return clearInterval(timer); 
      timerCount++; 
      if ( 
        iframe.contentDocument && 
        iframe.contentDocument.readyState === "complete" 
      ) { 
        clearInterval(timer); 
        callback(); 
      } else if (timerCount * interval > maxTime) { 
        callback(new Error("Iframe load file!")); 
      } 
    }, interval); 
  } 
};

Весь код на гитхабе если нужно. https://github.com/Andykrvua/static_site_admin_panel