万金流
以码会友。 吾Q:578751655。 水平有限,轻喷,谢!

目的:修改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");
}

结果略。

posted on 2024-10-25 05:54  万金流  阅读(176)  评论(0编辑  收藏  举报