[JavaScript] バグる 自分自身の script 要素を取得するコード
script タグを追記するタイプのブログパーツを導入しようとしたところ不具合が出たので調べてみました。
script 要素を追加して、src に渡されたパラメーターや、自分の周りに動的にいろいろな要素を追加するというのは、よくあると思いますが、自分自身の script 要素を document の最後にある script 要素としているコードはバグります。
検索するとよくあるコードみたいです。
- JavaScript – 自分自身のscriptタグを取得する – Qiita
- 外部ファイルのスクリプトに引数を渡す方法 | JavaScript プログラミング解説
- とてもシンプルに自分自身が属する script 要素を取得 – IT戦記
不具合のある自分自身の script 要素を取得するコード
document から script 要素を取得して、配列の末尾を自分自身としています。
| (function () { | |
| var scripts = document.getElementsByTagName('script'); | |
| var src = scripts[scripts.length – 1].src; | |
| console.log("私は " + src); | |
| })(); |
不具合の出るパターン
自分自身の src を表示するコード（foo.js）の前に、script 要素を document に追加するコードがあります。
| <!DOCTYPE html> | |
| <html> | |
| <body> | |
| <div> | |
| <script> | |
| (function () { | |
| var j = document.createElement("script"); | |
| j.src = "http://localhost/dummy.js"; | |
| document.body.appendChild(j); | |
| })(); | |
| </script> | |
| <script src="foo.js"></script> | |
| </div> | |
| </body> | |
| </html> |
結果
ちなみに、<script src="foo.js"></script> を div タグの外側に置くと自分自身を取得できますが、ブログパーツ用としては使えません。
さらにちなみに、今回 script 要素を動的に追加してたのは、Zenback でした。