如何调用带查询字符串的跨域JavaScript文件？

针对你需要一行代码嵌入跨域小部件、且脚本能获取配置参数的需求，以下是几个实用方案：

方案1：通过当前脚本节点解析带参URL #

利用document.currentScript获取当前执行脚本的DOM节点，直接解析其src中的查询参数，无需依赖全局变量，纯前端实现：

用户嵌入的一行代码 #

(function(){var s=document.createElement('script');s.src='http://your-widget-domain/widget.js?configKey=configVal&theme=dark';document.body.appendChild(s);})();

小部件脚本（widget.js）内部逻辑 #

// 获取当前脚本的完整带参URL
const scriptUrl = document.currentScript.src;
// 解析查询参数
const params = new URLSearchParams(new URL(scriptUrl).search);
// 读取配置项
const configKey = params.get('configKey'); // 得到configVal
const theme = params.get('theme'); // 得到dark

// 后续用配置初始化小部件逻辑

注：document.currentScript兼容所有现代浏览器，若需兼容IE，可在脚本加载时通过遍历document.scripts节点匹配当前脚本的src实现兼容。

方案2：一行代码内嵌全局配置+加载脚本 #

如果觉得URL解析麻烦，可在同一自执行函数中定义全局配置变量，再加载脚本，同样是一行代码完成嵌入，脚本直接读取全局变量：

用户嵌入的一行代码 #

(function(){window.WIDGET_CONFIG={configKey:'configVal',theme:'dark'};var s=document.createElement('script');s.src='http://your-widget-domain/widget.js';document.body.appendChild(s);})();

小部件脚本（widget.js）内部逻辑 #

// 直接读取全局配置
const { configKey, theme } = window.WIDGET_CONFIG;

// 初始化小部件

这个方案兼容性更好，代码逻辑更直观，适合对兼容性要求高的场景。

注意事项 #

• 若参数包含特殊字符（如中文、&、=等），需用encodeURIComponent编码，比如在生成查询参数时：

  (function(){const config={name:'测试',type:'a&b'};const params=new URLSearchParams(config).toString();const s=document.createElement('script');s.src='http://your-widget-domain/widget.js?'+params;document.body.appendChild(s);})();
  

• 跨域加载脚本本身不受浏览器同源策略限制，无需额外配置CORS。

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