单个JavaScript文件。不插入内联脚本，如何检查特定页面是否已加载？

Question

Without inserting inline scripts, how can I check if a specific page has loaded? 不插入内联脚本，如何检查特定页面是否已加载？ Usually I put an inline script that calls a function in the page's html head using window.onload, but how can this be achieved with a linked JavaScript file? 通常，我会使用window.onload在页面的html头中放置一个内联脚本来调用函数，但是如何使用链接的JavaScript文件来实现此目的？

For example, suppose I have a button that opens a special page, and I need the DOM to be ready before I start any using scripts on that. 例如，假设我有一个打开特殊页面的按钮，并且需要在开始使用DOM之前准备好DOM。 Should I use two JavaScript files, linked at the bottom of each body?, then wrap everything in a function called by the onload event? 我是否应该使用在每个主体底部链接的两个JavaScript文件，然后将所有内容包装在onload事件调用的函数中？

Answer 1

It's pretty common practice to place the script tags at the bottom of the page, just before the final body tag. 将脚本标签放在页面底部，即最终的body标签之前，是一种很常见的做法。 This will mean that the DOM would have loaded by this point and it will be safe to execute your code. 这将意味着DOM将在此时加载，并且可以安全地执行您的代码。 Also it means that your scripts won't be downloaded till the very end which makes for a better experience for visitors. 这也意味着您的脚本要到最后才下载，从而为访问者带来更好的体验。

If you wanted to be particular about it, you could then add an event listener onto the body tag and have your code run after body loads. 如果您想对此加以说明，则可以在body标签上添加一个事件侦听器，并在加载body之后运行代码。 I'm not sure your exact use case so I don't know if this would serve your purpose better. 我不确定您的确切用例，因此不知道这是否可以更好地满足您的目的。 Assuming you aren't doing anything out of the ordinary and your scripts are placed just before the final body tag this wouldn't make much of an extra difference as the majority of the DOM would have already loaded. 假设您没有做任何不寻常的事情，并且您的脚本被放置在最终body标签之前，那么这不会有太大的额外差别，因为大多数DOM都已经加载了。 If you did want to do this you'd use the following code. 如果您确实想这样做，则可以使用以下代码。

var bodyElement = document.getElementsByTagName("BODY")[0];
bodyElement.onload = function () {
    // Your loading function
}

Answer 2

Let A be the page with the button you click. 让A为带有单击按钮的页面。
Let B be the the special page that opens on A's button click 令B为在A的按钮上单击打开的特殊页面

I struggle to understand what you're asking exactly, but this sounds like a case of "A comes before B". 我很难理解您要问的是什么，但这听起来像是“ A在B之前”。

If the button on page A is clickable after that page finishes loading, then the script that runs after page B finishes loading can safely assuming that both A and B have loaded. 如果在该页面完成加载后可单击页面A上的按钮，则可以安全地假定A和B均已加载，则在页面B完成加载后运行的脚本。 You can write logic in B that depends on A being loaded only if you can guarantee that A loads B. What happens if B is accessed directly bypassing A? 仅当可以保证A加载B时，才可以在B中编写依赖于A的逻辑。如果绕过A直接访问B会发生什么情况？

Possible markup for B follows: B的可能标记如下：

<html>
    <head>
        <title>Special Page</title>
    </head>
    <body>

        <script src="test.js"></script>
    </body>
</html>

The test.js file linked above: 上面链接的test.js文件：

window.onload = function(){
    console.log('special page is loaded');
};

The onload event on page B may safely assume A has loaded but only if you can guarantee A always calls B. B页上的onload事件可以安全地假定A已加载，但前提是您可以保证A始终调用B。

I have no idea if you're trying to load page B into an iframe or do a page redirect from A to B or fetch B into A by way of Ajax and HTTP GET. 我不知道您是否要尝试将页面B加载到iframe或将页面从A重定向到B或通过Ajax和HTTP GET将B提取到A中。

单个JavaScript文件。不插入内联脚本，如何检查特定页面是否已加载？

问题描述

2 个解决方案

解决方案1
1 2016-02-24 15:55:55

解决方案2
1 2016-02-24 15:56:03

单个JavaScript文件。 不插入内联脚本，如何检查特定页面是否已加载？

问题描述

2 个解决方案

解决方案1 1 2016-02-24 15:55:55

解决方案2 1 2016-02-24 15:56:03

单个JavaScript文件。不插入内联脚本，如何检查特定页面是否已加载？

解决方案1
1 2016-02-24 15:55:55

解决方案2
1 2016-02-24 15:56:03