如何让 JavaScript 在页面加载前执行？

Question

我有这个代码

<html>
  <head>
    <script>
      function main(){
        function loadWordlist(url){
          var xhttp = new XMLHttpRequest();
          xhttp.onreadystatechange = function() {
              if (this.readyState == 4 && this.status == 200) {
                 console.log('firstFunction');
              }
          };
          xhttp.open("GET", url, true);
          xhttp.send();
        }
        loadWordlist('https://www.example.com/');
      }
      main()
    </script>
  </head>
  <body>
    <script>
      console.log('secondFunction')
    </script>
  </body>
<html>

在这里，我从 url 获取内容，在此期间浏览器包含加载代码并执行它

但是我先得到secondFunction ，然后得到firstFunction我希望firstFunction先执行，然后在secondFunction完成后执行firstFunction

Answer 1

从第一个 function 拨第二个 function。

<html>
  <head>
    <script>
      function main(){
        function loadWordlist(url){
          var xhttp = new XMLHttpRequest();
          xhttp.onreadystatechange = function() {
              if (this.readyState == 4 && this.status == 200) {
                 console.log('firstFunction');
                 secondFunction();
              }
          };
          xhttp.open("GET", url, true);
          xhttp.send();
        }
        loadWordlist('https://www.example.com/');
      }
      main()
    </script>
  </head>
  <body>
    <script>
      function secondFunction() {
        console.log('secondFunction');
      }
    </script>
  </body>
<html>

如果那不可能，您可以使xhttp.send()阻塞。 我强烈反对它。 这是糟糕的用户体验。 但这是可能的，也许在某些用例中这是唯一的解决方案。

<html>
  <head>
    <script>
      function main(){
        function loadWordlist(url){
          var xhttp = new XMLHttpRequest();
          xhttp.onreadystatechange = function() {
              if (this.readyState == 4 && this.status == 200) {
                 console.log('firstFunction');
              }
          };
          xhttp.open("GET", url, false);
          xhttp.send();
        }
        loadWordlist('https://www.example.com/');
      }
      main()
    </script>
  </head>
  <body>
    <script>
      console.log('secondFunction')
    </script>
  </body>
<html>