ONZE企業サイトへ

Archives
Tags

【JavaScript】非推奨である「document.write()」の代替方法

Ads by Google

これ。
つい先日まで知らなかったんですが。
JavaScriptの「document.write()」を使うのは現在はNGとされているようですね。

W3CではHTML5でのdocument.write()の使用を非推奨としています。
またGoogleの PageSpeed Insights でも、document.write()を使っていると警告が表示されます。

具体的には、ウェブサイト読み込み時のローディング処理のために、下記のようなコードを<head>〜</head>内に記述していました。

<head>
<script>
	document.open();
	document.write('<link rel="stylesheet" href="style.css">');
	document.close();
</script>
</head>

複数のサイトで似たようなコードを使用してしまっていたので急遽、代替方法を用意しました。

いくつか方法はありますが、例えば次のようなコードに書き換えることが可能です。

<head>
<script>
	document.head.insertAdjacentHTML('beforeend', '<link rel="stylesheet" href="style.css">');
</script>
</head>

ここではinsertAdjacentHTMLを使ってみました。
document.head.insertAdjacentHTML('beforend', '...')は「head要素の一番最後にHTML文字列を追加する」という意味ですが、このスクリプトが実行されている時点ではまだhead内の記述が途中であるため、スクリプト要素の直後に任意の文字列が出力されることになります。

なお他の方法としてはdocument.createElement()なども選択肢のひとつとして考えられます。

<script>
	 var link = document.createElement('link');
	 link.href = 'style.css';
	 link.rel = 'stylesheet';
	 link.type = 'text/css';  // 必要ないけどとりあえず。
	 var head = document.getElementsByTagName('head')[0];
	 head.appendChild(link);
</script>

以上。ぜひ参考にしてください。

こちらの記事もいかがですか?

アナタにオススメ!
同じカテゴリーの他の記事です。

Ads by Google