Javascript 动态更改脚本 src 客户端
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13748269/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
dynamically change script src client-side
提问by Bogdan
I have an HTML page which contains:
我有一个 HTML 页面，其中包含：
- a
<select>dropdown with 3 options with an onchange event to a JS function - a DIV holder with a script element inside:
<select>带有 3 个选项的下拉菜单，带有一个 JS 函数的 onchange 事件- 一个带有脚本元素的 DIV 持有者：
Here's the code:
这是代码：
<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>
And here's the JS function:
这是 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>
When I select option 2 or 3 I get this output in my browser: [object HTMLScriptElement]
当我选择选项 2 或 3 时，我在浏览器中得到以下输出： [object HTMLScriptElement]
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...
我想要做的是根据下拉元素中选择的值切换脚本标签的 src 属性。我想做这个客户端，最好没有任何外部库......
回答by Joseph
The other solution is great :) ...but if you still want to create elements via JavaScript you should use appendChild instead of innerHTML...
另一个解决方案很棒:) ...但是如果您仍然想通过 JavaScript 创建元素，则应使用 appendChild 而不是 innerHTML ...
Here is what your JavaScript should be :)
这是你的 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>
回答by bluetoft
function getData(title){
document.getElementById("widget").src= (title == "ro" || title == "-") ? "js1.js" : "js2.js";
}
回答by Toni Toni Chopper
do simply:
简单地做：
function getData(title) {
switch(title) {
case "ro":
document.getElementById("output").innerHTML = '<script id="widget" type="text/javascript" src="js1.js" />';
break;
case "en":
document.getElementById("output").innerHTML = '<script id="widget" type="text/javascript" src="js2.js" />';
break;
default:
void(0);
}
}
