如何通过script嵌入标签将URL路径段作为变量传入外部JS文件？

当然有靠谱的办法啦！针对你这种在多页面共用外部JS、需要动态传递路径段的场景，我整理了几种实用又可靠的方案，你可以按需选择：

• 方案一：利用script标签的data属性（推荐）
  这种方式既规范又不会污染全局作用域，是最推荐的做法。
  步骤很简单：

  1. 在嵌入外部JS的script标签上添加自定义data属性，把路径段传进去：

     <script src="<?= $baseUrl?>/js/cms-functions.js" data-category-path="/category-1/"></script>
     

  2. 在cms-functions.js中，通过document.currentScript获取当前脚本标签，再读取对应的data属性值：

     // 获取当前加载的脚本标签
     const currentScript = document.currentScript;
     // 读取自定义data属性里的路径段
     const categoryPath = currentScript.dataset.categoryPath;
     // 用变量拼接动态URL
     let albumURL = `${o.baseUrl}${categoryPath}` + encodeURI(albumTitle + "?album_id=" + albumId);
     

  优点：每个script实例可以独立设置参数，适合多页面不同路径的场景，完全符合HTML规范。

• 方案二：提前定义全局变量
  这种方式简单直接，适合快速实现，不需要复杂的逻辑处理。

  1. 在引入外部JS之前，先在页面中定义一个全局变量（比如挂在window对象上）：

     <script>
       // 根据当前页面动态设置路径段
       window.categoryPath = "/category-1/";
     </script>
     <script src="<?= $baseUrl?>/js/cms-functions.js"></script>
     

  2. 在cms-functions.js中直接使用这个全局变量：

     let albumURL = `${o.baseUrl}${window.categoryPath}` + encodeURI(albumTitle + "?album_id=" + albumId);
     

  注意：要确保变量名不会和项目中其他全局变量冲突，避免出现意外问题。

• 方案三：将路径段作为查询参数添加到script的src中
  这种方式适合不想用全局变量或data属性的场景，不过需要处理URL参数的解析。

  1. 在script的src末尾拼接查询参数，传递路径段：

     <script src="<?= $baseUrl?>/js/cms-functions.js?categoryPath=/category-1/"></script>
     

     如果路径段包含特殊字符，记得先用encodeURIComponent()编码后再拼接
  2. 在cms-functions.js中解析当前脚本URL的查询参数：

     const currentScript = document.currentScript;
     const scriptUrl = new URL(currentScript.src);
     // 获取查询参数中的路径段
     const categoryPath = scriptUrl.searchParams.get('categoryPath');
     // 拼接动态URL
     let albumURL = `${o.baseUrl}${categoryPath}` + encodeURI(albumTitle + "?album_id=" + albumId);
     

  优点：不需要额外的标签或全局变量，参数直接附在脚本URL上。

备注：内容来源于stack exchange，提问作者phlidd