目的:修改script标签的src属性,并生效。
操作:删除原有script,添加新的。
细节:如果仅修改原有script标签的src属性,浏览器并不加载新的js文件。
html:
<html>
<head>
<title>
页面
</title>
<script src="js/j1.js"></script>
<script id="s2" src="js/j2.js"></script>
</head>
<body onload="init();">
<p>一段简单的文字。</p>
<select id="c1" onchange="myselect();"></select>
<input type="button" value="运行show" onclick="show();"/>
</body>
</html>
j1.js代码:
//初始化页面元素
function init() {
let options = [
{k:'j2',v:'j2'},
{k:'j3',v:'j3'},
{k:'j4',v:'j4'}
];
let selectElement = document.querySelector('#c1');
// 填充下拉列表
options.forEach(option => {
opt = document.createElement('option');
opt.value = option.v;
opt.textContent = option.k;
selectElement.appendChild(opt);
});
// 设置默认选项
//selectElement.value = 'j3'; // 将默认选项设置为 "选项2"
}
//改变选择框内容时执行
function myselect()
{
let selectElement = document.querySelector('#c1');
changeJS(selectElement.value);
}
//供内部调用,修改js文件
function changeJS(Mynewjs) {
// 获取 <head> 标签
let head = document.head;
let myjs;
// 移除 id 为 s2 的标签
var scriptToRemove = document.querySelector('#s2');
if (scriptToRemove) {
head.removeChild(scriptToRemove);
}
// 准备标签的 src 属性
str = scriptToRemove.src.split('/');
myjs ="js/"+Mynewjs+".js";
//调试
//console.log(myjs);
// 创建新的 <script> 标签
let newScript = document.createElement('script');
newScript.id = 's2';
newScript.src = myjs;
// 将新的 <script> 标签添加到 <head> 的最后
head.appendChild(newScript);
}
j2.js代码(j3,j4类似,仅输出不同):
function show()
{
console.log("Show from j2.js");
}
结果略。