无法使用外部javascript更改html脚本src

Cannot change html script src with external javascript

本文关键字：更改 html 脚本 src javascript 外部      更新时间：2023-09-26

我已经阅读了我能找到的每一个谷歌结果，但这仍然不起作用。。。我所要做的就是根据单击的链接来更改脚本源。源文件将由document.write返回一到两行，如下所示：

document.write(`This is content script a`);

所以我有下面的设置，一个html文件，有两个链接，调用changeSrc函数，它应该更改源：

<!DOCTYPE html>
<html>
	<body>
		<a id="aLink" href="#" onclick="changeSrc('a');return false;">Change to a</a/><br>
		<a id="aLink" href="#" onclick="changeSrc('b');return false;">Change to b</a/><br>
		<script id="contentScript" src="a.js"></script>
	</body>
</html>

JS文件：

function changeSrc (arg) {
    document.getElementById("contentScript").innerHTML = '';
    if (arg == "a") {
        document.getElementById("contentScript").innerHTML = '<script id="contentScript" src="a.js"></script>';
    } else if (arg == "b") { {
        document.getElementById("contentScript").innerHTML = '<script id="contentScript" src="b.js"></script>';
    }

}

为什么点击链接时脚本源没有改变？！

谢谢你抽出时间，我觉得自己像个十足的白痴。。。

尝试

document.getElementById("ContentScript").src = your_script_source_here

希望这能有所帮助！

  1. 不能使用重复IDaLink aLink。你知道什么是身份证
  2. 不要使用内联JS。使业务逻辑远离（View）模板
    使用脚本方式将侦听器分配给元素。看看addEventListener
  3. </a/>应为</a>
  4. #contentScript是<script>标签。为什么要在上面使用innerHTML = ""？脚本执行不在文本HTML的范围内
  5. 您可以将所需"src"存储到锚点data-*属性中
  6. 由于<script>标签的"src"只能更改一次
    您应该动态创建一个全新的<script>元素：

<a id="aLink" data-src="http://jsbin.com/taqadu/1/js" href="#">Change to a</a><br>
<a id="bLink" data-src="http://jsbin.com/dizavo/1/js" href="#">Change to b</a>
<script>
function id(v){return document.getElementById(v);} // Helper
function changeSrc(event){
  
  event.preventDefault(); // instead of `return false;`
  // Get already existent one
  var contentScript = id("contentScript");
  // if exists, remove it
  if(!!contentScript) contentScript.parentNode.removeChild(contentScript);
  // Create a new one
  contentScript = document.createElement("script");
  // Assign ID
  contentScript.id = "contentScript";
  // Assign "src" from the anchor's data-* attribute
  contentScript.src = this.dataset.src;
  // Finally add the newly generated `script` to body
  document.body.appendChild( contentScript );
}
id("aLink").addEventListener("click", changeSrc);
id("bLink").addEventListener("click", changeSrc);
</script>

https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement
https://developer.mozilla.org/en/docs/Web/API/Node/appendChild
https://developer.mozilla.org/en-US/docs/Web/API/Node/removeChildhttps://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
https://developer.mozilla.org/en/docs/Web/API/Event/preventDefault

相关文章：