Help us understand the problem. What is going on with this article?

script タグを動的に削除しても、スクリプトは動作するのだろうか

More than 3 years have passed since last update.

気になったので、確かめてみました。
script タグを動的に削除しても、スクリプトは動作し続けるのだろうか、と。

結論から言うと、スクリプトは動作します。タグを削除しても、メモリ上にあるオブジェクトや関数は削除されるわけではないので、当たり前といえば当たり前です。

以下、動作確認用の HTML です。

<html>
<body>
<button id="button1" type="button">test1</button>
<button id="button2" type="button" onclick="handler()">test2</button>
<script id="jquery" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
    jQuery("#button1").click(handler);
});

function handler(){
    alert(jQuery("script").length);
    jQuery("script").remove();
}
</script>
</body>
</html>

ボタンが2つありますが、いずれをクリックしても、呼び出される関数handler() は同じです。動作は同じですが、関数の紐づけ方が異なり、片方は jQuery でイベントハンドラを登録し、片方は onclick 属性を使用しています。

関数では、script タグの数をダイアログで表示した後、script タグを全て削除しています。

2つのボタン、どちらをクリックしても、動作し続けます。最初の1回目だけ 2 とダイアログに表示され、後は 0 です。初回で script タグは削除されてしまうからです。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away