如何通过getElementById动态设置script标签的src属性？

安全阿岳

2026-6-17

动态构建带查询参数的Script调用问题解决

为什么原代码无效

当页面加载时，浏览器会立刻处理带有src=''的<script>标签——空src会被解析为当前页面的URL，浏览器完成加载后就结束了这个标签的处理流程，后续再修改src属性不会触发重新加载，所以你的动态赋值操作没有效果。

可行方案：动态创建Script标签

直接通过JavaScript生成新的<script>元素，配置好带参数的src后插入页面，浏览器会正常加载并执行这个脚本。

基础实现代码

<script type='text/javascript'>
const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
const artid = urlParams.get('aid');

// 仅当URL中存在aid参数时才创建脚本，避免无效请求
if (artid) {
  const script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = `https://example.com/js.php?aid=${artid}`;
  // 将脚本插入到页面头部或尾部，这里选择头部
  document.head.appendChild(script);
}
</script>

保留原标签ID的实现（可选）

如果需要替换原来的hwContent标签，可以先移除旧标签，再给新脚本设置相同ID后插入：

const oldScript = document.getElementById('hwContent');
if (oldScript) {
  oldScript.remove();
}

const script = document.createElement('script');
script.id = 'hwContent';
script.type = 'text/javascript';
script.src = `https://example.com/js.php?aid=${artid}`;
document.head.appendChild(script);