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

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继续打印真假

我知道 ajax 是一个不错的选择，我一直在尝试，但我还是有点迷茫。

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

Answer 1

你可以使用defer

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

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

Answer 2

将函数调用包装在 window.onload 中

看起来if(window.onload = showScreen) 可能正在检查对 onload 变量的赋值是否发生，而不是检查showScreen 的返回是否为真。这是你的意图吗？我认为这将在页面完成加载之前返回 true（如果它成功），因此如果这是您想要的，它作为一种检查页面是否已加载的方法没有用处。

您的showScreen 函数带有一个参数。当您按照您所做的方式将这样的函数分配给onload 时，您将传入一个默认的“事件”参数。如果这就是你想要的，也许这就是你的意思“这是因为在这个外部 js 文件中，一个变量只在 html 文件加载后才更新。”？

我还认为您在 if 语句的第一行末尾缺少一个左括号，这可能会导致问题。

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

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