[JavaScript] バグる 自分自身の script 要素を取得するコード

DevelopmentJavaScript

script タグを追記するタイプのブログパーツを導入しようとしたところ不具合が出たので調べてみました。

script 要素を追加して、src に渡されたパラメーターや、自分の周りに動的にいろいろな要素を追加するというのは、よくあると思いますが、自分自身の script 要素を document の最後にある script 要素としているコードはバグります

検索するとよくあるコードみたいです。

不具合のある自分自身の script 要素を取得するコード

document から script 要素を取得して、配列の末尾を自分自身としています。

(function () {
var scripts = document.getElementsByTagName('script');
var src = scripts[scripts.length 1].src;
console.log("私は " + src);
})();

view raw
foo.js
hosted with ❤ by GitHub

不具合の出るパターン

自分自身の 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>

view raw
index.html
hosted with ❤ by GitHub

結果

console

ちなみに、<script src="foo.js"></script> を div タグの外側に置くと自分自身を取得できますが、ブログパーツ用としては使えません。

さらにちなみに、今回 script 要素を動的に追加してたのは、Zenback でした。