【问题标题】：Can I wait for a child window to load the second page?我可以等待子窗口加载第二页吗？
【发布时间】：2018-02-06 02:28:44
【问题描述】：

共有三个可访问页面，http://localhost/parent.html、http://localhost/child1.html 和 http://localhost/child2.php。只有parent.html 对我来说是可编辑的，而其他的则不是。 child2.php 只能通过来自 child1.html 的 POST 请求访问。

我想做的是自动从每个子页面中提取数据。我现在在parent.html 上，将使用子窗口从这里访问其他两个页面。但是，等待加载第二页的代码不起作用。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>parent.html</title>
    <script>
    function waitForLoading(targetWindow) {
      return new Promise((resolve, reject) => {
        targetWindow.addEventListener("load", resolve);
      });
    }

    document.addEventListener("DOMContentLoaded", async () => {
      const childWindow = open("child1.html", "_blank");
      await waitForLoading(childWindow);
      // do something with DOM

      childWindow.document.querySelector("form[action='child2.php']").submit();
      await waitForLoading(childWindow); // getting stuck here
      // do something with DOM           // so, this line is unreachable
    });
    </script>
  </head>
  <body>
    <h1>parent.html</h1>
  </body>
</html>

我的问题是：

为什么代码会卡住？
如何等待子窗口加载第二页？
如果不可能，您知道实现目标的任何变通方法吗？

谢谢。

【问题讨论】：

标签： javascript events onload dom-events

【解决方案1】：

为什么代码会卡住？

即使子窗口加载另一个页面，它似乎也不会第二次或更晚运行load 或DOMContentLoaded。

如何等待子窗口加载第二页？

循环观察页面的加载状态。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>parent.html</title>
    <script>
    function waitFirstPage(targetWindow) {
      return new Promise((resolve, reject) => {
        targetWindow.addEventListener("load", resolve);
      });
    }
    function movePage(targetWindow, action) {
      const originalDocument = targetWindow.document;
      action();
      return new Promise((resolve, reject) => {
        (function loop() {
          if (targetWindow.document !== null
            && targetWindow.document !== originalDocument
            && targetWindow.document.readyState === "complete") {
            resolve();
          }
          setTimeout(loop, 100);
        })();
      });
    }

    document.addEventListener("DOMContentLoaded", async () => {
      const childWindow = open("child1.html", "_blank");
      await waitFirstPage(childWindow);
      // do something with DOM

      await movePage(childWindow, () => {
        childWindow.document.querySelector("form[action='child2.html']").submit();
      });
      // do something with DOM
    });
    </script>
  </head>
  <body>
    <h1>parent.html</h1>
  </body>
</html>

如果不可能，您知道实现目标的任何变通方法吗？

不需要变通办法，因为这是可能的。

【讨论】：