実行時にjavascriptコードをhtmlファイルにロードするには？

実行時にjavascriptコードをhtmlファイルに読み込むことができるかどうか聞かせてください。たとえば、スクリプトファイルの場所を入力するテキストボックスと、スクリプトファイルの読み込みをトリガーするフォームボタンを配置します。実行時にjavascriptコードをhtmlファイルにロードするには？

ありがとうございます。

出典

2012-01-27 seven_swodniw

（3行目にURLを修正）そのボタンのonclickの内これを貼り付け：

var script = document.createElement("script"); 
script.setAttribute("type", "text/javascript"); 
script.setAttribute("src", "url to the script file here"); 
document.getElementsByTagName("head")[0].appendChild(script);

このスクリプトはすぐにダウンロードされ始めます4行目が実行された後、ダウンロードされるとすぐに実行されるか、または使用可能になります。

出典

2012-01-27 17:00:01

ヘッド要素があることを確認してください。そうでない場合は、体に追加することもできます。 Btw、純粋なJavaScriptに固執するための+1は、質問にjQueryというタグが付いていないためです。 –

この方法で2つのスクリプトを追加するとどうなりますか？彼らは同時にダウンロードを開始するのでしょうか、または2番目のものが最初のものを待つでしょうか？ –

はい、jQuery getScript methodこれは些細なことができる：

あるいはのみネイティブJavaScriptの方法を用いて

//on button click event: 
$.getScript(urlOfScript);

：

//on button click event: 
var head = document.getElementsByTagName('head')[0]; 
var script = document.createElement('script'); 
script.type = 'text/javascript'; 
script.src = 'urlOfScript'; 
head.appendChild(script);

出典

2012-01-27 16:59:32

上記のすべての良い答え。他のhtmlフラグメントと同様に、jsをajax経由でロードすることもできます。ショート例：

start.html

<html> 
<head> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
</head> 
<body> 
    <a href="#" onclick="$('#result').load('start.js'); return false;">start</a> 
    <div id="result"></div> 
</body> 
</html>

start.js

<script type="text/javascript"> 
    alert('Hello world!'); 
</script>

あなたは、AjaxのためのjQueryを必要としない - 私はコンセプトの迅速な証拠としてそれを使用。

出典

2012-01-27 17:07:09 DamirR

これを実現するためのjqueryメソッドもあります。

let src = 'http://www.example.com/dosome/afsddfa'; 
$('<script>').attr(
{ 
    src: src, 
    type: 'text/javascript' 
}).appendTo('body');

スクリプト要素を作成して本文に追加します。

.appendTo('head')も使用できます。

出典

2017-09-18 03:21:28

実行時にjavascriptコードをhtmlファイルにロードするには？

答えて

関連する問題