javascript - 动态更改脚本 src 客户端

Question

我有一个 HTML 页面，其中包含:

• 一个<select>带有 3 个选项的下拉列表以及 JS 函数的 onchange 事件
• 内部有脚本元素的 DIV 容器:

代码如下:

<select onChange="getData(this.value);">
    <option value="-">Limba/Language</option>
    <option value="ro">Romana</option>
    <option value="en">Engleza</option>
</select>
<div id="output">
    <script id="widget" type="text/javascript" src="js1.js"></script>
</div>

这是 JS 函数:

<script type="text/javascript">
function getData(title)
{
    switch(title)
    {
        case "ro":
            var s = document.createElement("script");
                s.type = "text/javascript";
                s.src = "js1.js";
                s.innerHTML = null;
                s.id = "widget";
                document.getElementById("output").innerHTML = s;
        break;
        case "en":
            var s = document.createElement("script");
                s.type = "text/javascript";
                s.src = "js2.js";
                s.innerHTML = null;
                s.id = "widget";
                document.getElementById("output").innerHTML = s;
        break;
        default:
        void(0);
    }
}
</script>

当我选择选项 2 或 3 时，我在浏览器中得到以下输出:[object HTMLScriptElement]

我想做的是根据在下拉元素中选择的值切换脚本标记的 src 属性。我想在客户端执行此操作，最好不要使用任何外部库...

Answer 1

另一个解决方案很棒 :)...但是如果您仍然想通过 JavaScript 创建元素，您应该使用 appendChild 而不是 innerHTML...

这是你的 JavaScript 应该是这样的:)

<script type="text/javascript">
function getData(title)
{
    switch(title)
    {
        case "ro":
            var s = document.createElement("script");
                s.type = "text/javascript";
                s.src = "js1.js";
                s.innerHTML = null;
                s.id = "widget";
                document.getElementById("output").innerHTML = "";
                document.getElementById("output").appendChild(s);
        break;
        case "en":
            var s = document.createElement("script");
                s.type = "text/javascript";
                s.src = "js2.js";
                s.innerHTML = null;
                s.id = "widget";
                document.getElementById("output").innerHTML = "";
                document.getElementById("output").appendChild(s);
        break;
        default:
        void(0);
    }
}
</script>