如何在script标签的src属性中使用变量实现动态加载脚本？

我懂你的问题——硬编码src的URL时脚本能正常加载，但想用变量sym动态拼接URL就失效了对吧？这是因为浏览器解析HTML时，会直接把script标签的src属性值当成静态字符串处理，压根识别不了里面的JavaScript变量。

给你个简单可行的方案：用JavaScript动态创建script元素，把变量拼接到URL里再插入到页面中，这样就能正常加载目标脚本了。

基础实现代码 #

<script>
  var sym = "MSFT";
  // 创建一个新的script标签
  const dynamicScript = document.createElement('script');
  // 用模板字符串（或者普通字符串拼接）把变量插入到URL里
  dynamicScript.src = `http://markets.financialcontent.com/stocks?Module=snapshot&Ticker=$SPX+${sym}&Output=JS`;
  // 将script标签添加到页面的head或body中，触发加载
  document.head.appendChild(dynamicScript);
</script>

进阶：监听加载状态 #

如果需要在脚本加载完成或失败时做一些处理，可以添加onload和onerror事件监听：

<script>
  var sym = "MSFT";
  const dynamicScript = document.createElement('script');
  dynamicScript.src = `http://markets.financialcontent.com/stocks?Module=snapshot&Ticker=$SPX+${sym}&Output=JS`;

  // 脚本加载成功后的回调
  dynamicScript.onload = function() {
    console.log('目标脚本加载完成啦！');
    // 这里可以写依赖该脚本的后续代码
  };

  // 脚本加载失败后的回调
  dynamicScript.onerror = function() {
    console.error('哎呀，脚本加载失败了，请检查URL是否正确');
  };

  document.head.appendChild(dynamicScript);
</script>

这种方式完全绕过了静态HTML解析的限制，通过JS动态控制脚本的加载，完美适配你用变量动态改变URL的需求。

内容的提问来源于stack exchange，提问作者TonyT