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

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

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

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

Posted by jz5