0

HTML5ではdocument.write()が非推奨であるため他の記述方法に書き換えたいと思っています。

JSPファイルのheadタグ内のscriptタグ内で、例えば以下のように、
特定のブラウザだけに適用するCSSファイルを指定する場合や、
User Agent Stylesheetをリセットさせるreset.cssを指定する場合のように、
実行順序、読み込み順序を考慮してDOM構成中に
他のCSSファイルに先行して読み込ませる必要のあるケースで困っています。

innerHTMLプロパティを使う方法などで代替できる場合もありますが、
読み込み順序を維持したままで置き換えるにはどのように記述すべきでしょうか。

<head>
  <script>
    if(Chromeだったら){
      document.write('<link rel="stylesheet" href="reset.css">');
    }
  </script>
  <link 他のstylesheet読み込み>
  <script 他のscriptファイル読み込み></script>
</head>

1 件の回答 1

0

document.writeではなく通常のDOM操作関数を使えば期待通りの動作となります。たとえばinsertAdjacentHTMLを使う場合は次のようになります。

  <head>
    <script>
      // head 要素内に link 要素を追加
      document.head.insertAdjacentHTML('beforeend', '<link rel="stylesheet" href="reset.css">')
    </script>
    <link rel="stylesheet" href="hokano-css.css">
    <script src="other-script.js"></script>
  </head>

このページを実際に読み込んだ結果は下の画像のようになり、意図通りの順番で要素が並んでいることが分かります。

スクリーンショット


このような動作になる理由は、ブラウザがHTMLを読み込んでDOMを構築している途中であってもscript要素があれば即座に実行されるという挙動になっていることが理由です(type="module"などの属性がある場合は除く)。

document.head.insertAdjacentHTML('beforend', '...')head要素の一番最後にHTML文字列を追加するという意味ですが、このスクリプトが実行されている時点ではまだhead内は最初のscript要素しか読みこまれていない状態であり、head要素の最後に追加するというのはその時点での最後、すなわち最初のscript要素の次に追加するということになります。

そして、スクリプトの実行が完了したあとにHTMLの読み込みが再開され、残りのlink要素やscript要素が構築されてhead要素に追加されます。

以上の仕組みによって、通常のDOM操作をscript要素内で実行することでDOM構築に割り込んで要素を追加できます。

この質問に回答するには、ログインする必要があります。