头部中的Java脚本加载
[英]Javascript loading in head
问题描述
I'm new to Javascript and I'm using this code to call out a javascription function: 
我是Java语言的新手，正在使用以下代码来调用Javascription函数：
<body onload="replaceLinks()">
This was placed right under my body tag. 它被放在我的身体标签下面。 The problem is, it executes after the page loads and that's not fast enough for what I'm trying to accomplish. 问题是，它在页面加载后执行，而且执行我要完成的速度还不够快。
How can I put that in the head of the document so it loads first? 如何将其放在文档的开头，以便首先加载？
Thank you! 谢谢！
<script>
function replaceLinks() {
var links = document.querySelectorAll('.restore a:link');
for (var i = 0; i < links.length; i++) {
if (/\.(jpg|gif|png|jpe?g)$/.test(links[i].href)) continue;
links[i].innerHTML = '<a href="/register.php" class="guestbutton">DOWNLOAD VIDEO</a>';
links[i].href = 'register.php';
}
}
</script>
2 个解决方案
解决方案1
1 2014-04-10 19:12:49
Put the JS in the head, not as a function, but as an immediately executing statement (or an IIFE if you want to prevent variable leakage). 将JS放在首位，而不是作为函数，而是作为立即执行的语句（或IIFE，如果要防止变量泄漏）放在首位。 Then, don't call it from <body onload> . 然后，不要从<body onload>调用它。
However, if your function modifies the DOM, you need to wait until the DOM (or relevant sections) has finished loading. 但是，如果您的函数修改了DOM，则需要等待DOM（或相关部分）完成加载。
解决方案2
0 2014-04-11 14:10:12
it executes after the page loads and that's not fast enough for what I'm trying to accomplish.
The onload event will wait for the page to be loaded - depending on what your page is doing that may be a signifiant delay. onload事件将等待页面加载-具体取决于页面正在执行的操作，这可能会导致严重的延迟。
Scripts in the head aren't what you want 头上的脚本不是您想要的
A script which modifies the content of the page must wait for the content it wants to modify to exist. 修改页面内容的脚本必须等待其要修改的内容存在。 That doesn't mean waiting for document ready though. 但这并不意味着要等待文档准备就绪。
So, for example, this will not work : 因此，例如， 这将不起作用 ：
<html>
<head>
<script>
function replaceLinks() {
var links = document.querySelectorAll('.restore a:link');
for (var i = 0; i < links.length; i++) {
if (/\.(jpg|gif|png|jpe?g)$/.test(links[i].href)) continue;
links[i].innerHTML = '<a href="/register.php" class="guestbutton">DOWNLOAD VIDEO</a>';
links[i].href = 'register.php';
}
}
replaceLinks(); // run the replace function
</script>
</head>
<body>
<a class="restore" href="#">A link</a>
</body>
</html>
It won't work because when replaceLinks is called the links it should modify don't exist yet. 它不起作用，因为当replaceLinks时，它应该修改的链接尚不存在。
Put your script at the end of the page 将您的脚本放在页面末尾
It is a generally-held best practice to put scripts at the end of the page . 通常， 将脚本放在页面末尾是最佳实践。 Ie for the example in the question like so: 即在这样的问题的例子是这样的：
<html>
<head>
</head>
<body>
<a class="restore" href="#">A link</a>
<script>
function replaceLinks() {
var links = document.querySelectorAll('.restore a:link');
for (var i = 0; i < links.length; i++) {
if (/\.(jpg|gif|png|jpe?g)$/.test(links[i].href)) continue;
links[i].innerHTML = '<a href="/register.php" class="guestbutton">DOWNLOAD VIDEO</a>';
links[i].href = 'register.php';
}
}
replaceLinks(); // run the replace function
</script>
</body>
</html>
In this way, the content it wants to modify already exists when it runs, and it runs as soon as the script tag is parsed. 这样，它要修改的内容在运行时就已经存在，并且在脚本标签被解析后便立即运行。
Note that the function does not need to be in the same script block, it simply needs to be defined before being called (it could be declared in the head - but there's no reason to do that). 请注意，该函数不必位于同一脚本块中，只需在调用之前定义它即可（可以在头中声明它，但是没有理由这样做）。
However, don't use javascript for that 但是，请勿为此使用javascript
There are a number of problems with what's proposed in the question though: 但是，问题中提出的建议有很多问题：
- The page's original contents will be displayed first, and then replaced with "DOWNLOAD VIDEO" links. 页面的原始内容将首先显示，然后由“下载视频”链接代替。 Ie similar to FOUC 即类似于FOUC
- Users can access the links by either reading the source or simply disabling javascript 用户可以通过阅读源代码或仅禁用javascript来访问链接
As such, it would be much more appropriate to not use javascript for this task and modify the contents on the server before sending to the client. 因此，不使用JavaScript执行此任务发送到客户端之前修改服务器上的内容，这将是更更合适。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.