在执行之前处理外部 javascript 脚本加载事件答案

【问题标题】：handle external javascript script loaded event before it's executed在执行之前处理外部 javascript 脚本加载事件
【发布时间】：2017-03-16 01:41:41
【问题描述】：

我有一个html 页面和一个script，我想以特定方式处理它们：在加载之后但在执行之前。基本上我想预加载脚本，但在满足某些条件时执行。脚本不依赖于其他脚本，因此我将其设为非阻塞 (async)：

<script onload='onScripLoad()' scr='...' async></script>

我想要的只是类似于onload 的东西，但它在下载脚本之前执行。有可能吗？

这里的问题是我能够预加载脚本，但无法与我的应用生命周期中的所需事件同步。 onScripLoad 已执行 after 脚本已加载 AND after 它已被执行。我需要的是控制脚本何时执行（推迟执行）。

添加更多详细信息我想预加载脚本并在 body 中的某些元素可用时执行它，但我不能将脚本放在该元素之后，因为在这种情况下它会与其他一些资源一起排队正在head 中下载。因此，我想将我的脚本放在head 中，使其成为async，并且一旦下载，仅在特定元素可用时执行（或事件在执行之前创建该元素）。我不能让它不异步，因为它是一个我无法控制并且不希望我的整个页面依赖它的脚本。

【问题讨论】：

您不能将外部脚本中的代码放在一个函数中，然后仅在两个条件都为真时调用该函数吗？
您不能将外部脚本中的逻辑放在一个函数中，该函数会提前加载，然后在某个条件为真时从辅助脚本调用该函数吗？
如果我可以控制外部脚本，我会这样做。不幸的是，它是一个 3d 派对库，并且它具有某些在开始下载后立即执行的 javascript。

标签： javascript html onload

【解决方案1】：

您可以在 head 部分加载外部脚本，将逻辑包装在函数中，然后稍后在条件中调用该函数：

externalscript.js：

function externalFunction(data) {
  console.log(data);
}

索引：

<head>
  <script src='externalscript.js' async></script>
</head>
<body>
  <script>
  var body_data = 'test';
  if (timing-driven-condition) {
    externalFunction(body_data);
  }
  </script>
</body>

函数 externalFunction 将首先加载，但在条件内调用它之前不会被使用，让您可以控制它何时执行。

希望这会有所帮助！ :)

【讨论】：

“函数 externalFunction 将立即加载” - 即使使用 async 属性？
我的意思是它会先加载：P
如果我可以控制外部脚本，我会这样做。不幸的是，它是一个 3d 派对库，并且它具有某些在开始下载后立即执行的 javascript。