javascriptは基本的にファイルから読み込んだりPHPとかに直書きする場合がほとんどです。
でも何らかの事情でjsコード側からjsコードを実行したい時もありますよね？
例えば要素を動的に追加して動的にスクリプトを実行するとかの場合、そういうトリッキーな方法が必要になってきます。
そういう訳でここではjsコード内でさらにjsコードを実行する書き方を紹介してきます。
jsコード実行の二通りのやり方
javascript内でさらにjsコードを実行する方法は次の二通り
- 純粋なjavascriptだけでコード実行
- jQueryを使ってコード実行
開発の現場だとjQueryを使うことが多いですが、一応このふた通りで説明していきます。
純粋なjavascriptだけでコード実行
まず１つめの方法はライブラリとか使わずにjavascriptの機能だけでコード実行することです。
どうやってやるかというとscriptタグを生成してbody要素にねじ込むだけです。
例えば次がスクリプト側でアラート表示するコードを実行するコード例
|
1 2 3 4 5 6 |
window.onload = function(){ let s = document.createElement('script'); let code = 'alert(\'Hello!\')'; s.innerHTML = code; document.body.appendChild(s); } |
scriptタグをcreateElemetnで生成 ⇒ その中にコードを入れる ⇒ bodyタグにappendChildで挿入
手順はたったこれだけですごく単純です。
コードを見れば分かるのでこれ以上は説明しようがありません(笑)
でもいざやろうとすると中々この方法は思いつきにくいんですよね・・・
jQueryを使ってjsコード実行
次の方法はjQueryを使ってコード実行することです。
今時純粋なjavascriptだけ使うことの方が少ないのでこちらの方が役立つかもしれません。
やることは先ほどと同じでbody要素にscript要素を入れるだけです。
例えば次がDOM読み込み時にコードを実行するコード例
|
1 2 3 4 5 6 |
$(function(){ let s = $('<script>'); let code = 'alert(\'Hello!\')'; s.html(code); $('body').append(s); }); |
さっき紹介したコードをjQuery風に書き直しているだけです。
ただコードというのはスクリプト内で文字列として定義しないといけません。
なのでコード中では次のような \" とか \' みたいなエスケープを忘れないことは注意したいですね。
ここまでのコードまとめ
最後にここまでのコードをもう一度まとめます。
まず純粋なjavascriptだけでjsコードを実行する場合のコード例が次の通り
|
1 2 3 4 |
let s = document.createElement('script'); let code = 'alert(\'Hello!\')'; s.innerHTML = code; document.body.appendChild(s);<br> |
script要素を生成してそこにコードを突っ込むだけです。
ちなみにscript要素を挿入する要素はbodyでなくてもDOM内にある要素ならなんでもOKです。
そして次がjQueryからscript要素を生成してコード実行する例
|
1 2 3 4 |
let s = $('<script>'); let code = 'alert(\'Hello!\')'; s.html(code); $('body').append(s); |
jQueryの機能を使うと少しだけスマートな感じになりますね。
という訳で以上がjavascript内でjsコードを実行する方法です。
コード内でコード実行と書くとすごくトリッキーな感じですがやり方はすごく簡単でした。
ではでは($・・)/~~~
