Question

我需要在页面加载后将外部js文件加载到html文件中。这是因为在这个外部js文件中，变量仅在加载html文件后自行更新。据说我之后还需要使用showScreen功能。 showScreen是外部js文件中的布尔值。

我只希望它在showscreen为true时切换屏幕，并且只能在加载html文件后加载。所以现在如果我在html中执行window.onload = showScreen，它总是未定义的

external.js（这是外部文件和我试图使用的函数的一部分）

function showScreen(showTraditionalScreen) {
   console.log("showTraditionalScreen "+ showTraditionalScreen);
   return showTraditionalScreen;
}

更新：

index.html（这是我要进行更改的文件的下半部分）

<script src="js/main.js"></script>
        <script src="js/additions.js"></script>
        <script src="../server/webcam.js" defer></script>
        <script>
           if(window.onload =showScreen)
              window.location.href = "traditional.html";
           }
       </script>
    </body>
 </html>

它目前没有做任何事情，但重点是，当showScreen为true时，页面将更改为traditional.html。目前它没有那样做

此文件也是异步的，因此console.log继续打印true或false

我知道ajax是一个不错的选择，我一直在尝试，但我仍然有点失落。

如何在页面加载后在html文件中使用external.js函数？为什么我的文件目前不允许我使用showcreen？

Answer 1

您可以使用defer

<script src="path" defer></script>

此布尔属性设置为向浏览器指示在解析文档之后但在触发DOMContentLoaded之前要执行脚本。 defer属性仅适用于外部脚本（仅当存在src属性时才应使用）。

Answer 2

将函数调用包装在window.onload

中

看起来if(window.onload = showScreen)可能正在检查onload变量的赋值是否发生，而不是检查showScreen的返回是否为真。这是你的意图吗？我认为这将在页面加载完成之前返回true（如果成功），所以如果这是你想要的那样，那么检查页面是否已加载是没有用的。

您的showScreen函数需要一个参数。当你以onload的方式分配这样的函数时，你传递了一个默认的'event'参数。如果这就是你想要的，也许这就是你的意思“这是因为在这个外部js文件中，变量只在html文件加载后自动更新。”？

我还认为你在if语句的第一行末尾错过了一个左括号，因此可能会导致问题。

这是另一种提供你想要的东西。在下面的代码中，我正在等待页面加载，一旦它有，我正在检查showScreen函数是否返回true。假设您需要将页面加载事件作为参数，我已将其传递给您的showScreen函数。否则我不确定showTraditionalScreen param来自哪里。

<script>
  window.onload( function(event){
    if(showScreen(event)) {
      window.location.href = "traditional.html";
    }
  });
</script>

如何在页面加载后加载外部js文件并使用其中的函数

2 个答案:

将函数调用包装在window.onload