如何通过从用户输入中获取用户值来动态更改脚本src

Question

我正在尝试动态更改<script src=旧值">InputValue取决于用户在输入中键入的内容，并且在提交后页面将重新加载新的<script src=newValue">

<input type="text" id="text" />
<input type="button" id="btn" value="Submit" onClick="javascript: window.open('http://www.mywebsite.com/print/' + document.getElementById('text').value);" />

<script src="//script.ashx?company=InputValue" async></script>

Answer 1

第一个例子更改了script元素的src属性。第二个示例是插入一个新的脚本元素。我不知道在你的情况下什么最有效。

第一个例子：

document.forms.test.addEventListener('submit', e => {
e.preventDefault();
var new_script = e.target.script.value;
var script_elm = document.scripts.customscript;
script_elm.src = `/script.ashx?company=${new_script}`;
console.log(script_elm);
});

<form name="test">
<input name="script" type="text" />
<button>Add script</button>
</form>
<script name="customscript" async></script>

第二个例子：

document.forms.test.addEventListener('submit', e => {
e.preventDefault();
var script_elm = document.createElement('script');
script_elm.async = true;
script_elm.innerText = 'function testing(){alert("testing")};';
document.body.append(script_elm);
testing();
});

<form name="test">
<button>Add script</button>
</form>