Question

我是Javascript的新手，我使用此代码来调用javascription函数：

<body onload="replaceLinks()">

这是放在我的身体标签下面。问题是，它在页面加载后执行，而且对于我想要完成的事情来说还不够快。

如何将它放在文档的头部，以便首先加载？

谢谢！

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

Answer 1

将JS放在头部，而不是作为一个函数，而是作为一个立即执行的语句（或者如果你想防止变量泄漏，则为IIFE）。然后，请勿从<body onload>拨打电话。

但是，如果您的函数修改了DOM，则需要等到DOM（或相关部分）完成加载。

Answer 2

它在页面加载后执行，并且对于我正在尝试完成的事情来说还不够快。

onload事件将等待页面加载 - 具体取决于您的页面正在做什么，这可能是一个显着的延迟。

头部的脚本不是你想要的

修改页面内容的脚本必须等待它想要修改的内容存在。这并不意味着等待文件准备就绪。

因此，例如，这不起作用：

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

它不起作用，因为调用replaceLinks时它应修改的链接尚不存在。

将您的脚本放在页面末尾

put scripts at the end of the page这是一种普遍持有的最佳做法。即对于像这样的问题中的例子：

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

通过这种方式，它想要修改的内容在运行时已经存在，并且一旦解析了脚本标记就会立即运行。

请注意，该函数不需要在同一个脚本块中，它只需要在被调用之前定义（它可以在头部声明 - 但是没有理由这样做）。

但是，请不要使用javascript

但问题中提出的问题存在许多问题：

首先显示页面的原始内容，然后用“DOWNLOAD VIDEO”链接替换。即类似于FOUC
用户可以通过阅读源代码或只是禁用javascript

因此，在发送给客户端之前，不使用javascript执行此任务并修改服务器上的内容将更加合适

。

Javascript加载到头

2 个答案:

头部的脚本不是你想要的

将您的脚本放在页面末尾

但是，请不要使用javascript