如何使用getElementById动态添加脚本src？

Question

对我宽容一点——我不会在 javascript 上花很多时间。 ：D

我正在尝试编写一个脚本，该脚本将基于 URL 查询构建 JS 调用，但无法获取脚本 src 进行更新。

例如，如果有人访问 https://example.com/page?aid=ABC123，我想创建一个脚本调用，其功能类似于：

<script type='text/javascript' src='https://example.com/script.js?aid=ABC123'></script>

但我需要根据 URL 中的“aid”变量动态构建该调用。

我的“页面”代码如下所示：

<script type='text/javascript' src='' id='hwContent'></script>
<script type='text/javascript'>
const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
const artid = urlParams.get('aid');
var url = "https://example.com/js.php?aid=";
document.getElementById('hwContent').src = url + artid;
</script>

目前我正在测试，“script.js”代码只是基本的“成功！”使用 document.write 发送消息 - 我什至还没有看到“援助”是否能够到达脚本文件。

如果我直接访问脚本 URL，它就可以工作。 如果我将脚本 URL 硬编码到脚本 src 字段中，它就可以工作。 但是，一旦我将 src 字段留空并依靠 getElementById 将 url 插入 src 字段，就不会发生任何事情 - 应该显示“成功！”的区域。消息只是空白。 Chrome 检查器显示没有 JS 错误。

Answer 1

像您一样获取

artid

，创建一个

script

标签并将其添加到

document.head

：

const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
const artid = urlParams.get('aid');
var url = "https://example.com/js.php?aid=";
var s = document.createElement( 'script' );
s.setAttribute( 'src', url + artid );
 document.head.appendChild( s );