为什么代码卡住了？

Question

有三个可访问的网页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>

我的问题是：

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

感谢。

Answer 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>

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

不需要解决方法，因为它是可能的。

我可以等待子窗口加载第二页吗？

1 个答案:

为什么代码卡住了？

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

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