55728


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

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

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

[code]

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


CC BY-SA 4.0
2019-06-12T12:20:26.487
55727
2019-06-12T13:12:24.847
question
javascript css html5 jsp
headタグ内のscriptタグ内にあるdocument.write()の置き換え方法について


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

[code]

      <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>
    
[/code]

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

[![スクリーンショット](https://i.stack.imgur.com/cE1If.png)](https://i.stack.imgur.com/cE1If.png)

* * *

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

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

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

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


CC BY-SA 4.0
2019-06-12T13:12:24.847
55728
2019-06-12T13:12:24.847
30079
55727
answer