如何使用JavaScript等待网页加载完成？

Question

我想用JavaScript在HTML中在两个页面之间切换，但当我使用window.location切换时，该句后面的代码继续执行。

所以，例如，当我调用getElementById（）时，它无法识别元素，因为页面仍在加载中。

function myFun(){

    // ...

    window.location = 'page.html';

    // ... wait until page.html is loaded

}

我该如何等待页面加载以避免这个问题呢？

- Monica

Answer 1

当你执行时

window.location = 'page.html';

你在浏览器中替换了一个包含myFun代码的页面，用一个新页面代替了它。按照这个指示后面的代码无法被执行。

如果你想要执行它，在改变页面之前（但我不明白为什么要这样做），你可以这样做：

document.onload = function(){ window.location = 'page.html'; };

- Denys Séguret

---

但是 myFun 放在一个单独的 .js 文件中。 - Monica

如果在您的HTML文件中导入了它，那么它就像直接在页面中一样。当您替换页面时，它的执行会停止。 - Denys Séguret

好的，谢谢。正如你所说，这是不可能的，所以我已经改变了程序的逻辑来解决这个问题！ :) - Monica

Answer 2

您可以使用jQuery的document.ready，也可以创建自定义绑定，例如这个。如果您使用jQuery。

   $(document).ready(function() {
        window.location = 'page.html';
    });

- Emmanuel N

Answer 3

在执行window.location = 'page.html';后，您无法在自己的页面中执行代码。您的页面将被新页面替换，当前页面中的代码将不再存在。

在page.html加载到当前窗口后，唯一可以执行某些代码的方法如下：

1. 在iframe或另一个窗口中加载它，并监视iframe或窗口何时完成加载。通过这种方式，您的当前代码保持存在，不会被替换。
2. 在page.html中有一些代码，可监视其何时完成加载并从那里触发所需的操作。

- jfriend00