动态更改脚本src客户端 [英] dynamically change script src client-side

问题描述

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

I have an HTML page which contains:

• a < select> 带有onchange事件的3个选项下拉到JS函数


• 一个内部有脚本元素的DIV持有者：

• a <select> dropdown with 3 options with an onchange event to a JS function
• a DIV holder with a script element inside:

以下是代码：

<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]

When I select option 2 or 3 I get this output in my browser: [object HTMLScriptElement]

我想要做的是根据下拉元素中选择的值切换脚本标记的src属性。
我想做这个客户端，最好没有任何外部库...

What I want to do is switch the src property of the script tag based on the value selected in the dropdown element. I want to do this client-side and preferably without any external libraries...

推荐答案

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

The other solution is great :) ...but if you still want to create elements via JavaScript you should use appendChild instead of innerHTML...

这是您的JavaScript应该是：）

Here is what your JavaScript should be :)

<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>

这篇关于动态更改脚本src客户端的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！