jQuery.getScript と同じことを素の Javascript でやる

jQuery の getScript は、なかなか独特な動作をする。

jQuery.getScript( 'http://example.com/test.js', callback );

例えば ↑ こう書くと

  1. test.js を非同期で読み込んで実行
  2. callback 関数を実行
  3. test.js を DOM から削除

↑ こういう動作をする。

3. の部分がちょっと独特で、DOM から消えるので再利用はできないが、場面によっては結構便利に使える。

これを jQuery に頼らず、ネイティブな素の Javascript（いわゆる Vanilla JS）で出来ないかなー？
と思って探してたら、Stack Overflow にあった。

function getScript(source, callback) {
	var script = document.createElement('script');
	var prior = document.getElementsByTagName('script')[0];
	script.async = 1;

	script.onload = script.onreadystatechange = function( _, isAbort ) {
		if(isAbort || !script.readyState || /loaded|complete/.test(script.readyState) ) {
			script.onload = script.onreadystatechange = null;
			script = undefined;

			if(!isAbort) { if(callback) callback(); }
		}
	};

	script.src = source;
	prior.parentNode.insertBefore(script, prior);
}

これ、すげぇｗ

今度、getScript が必要になったら、これ使う。

IT・ICT

Posted by るな