JSライブラリを使わないで全画面にほげする。あ、やっぱりスマホページだけ。

JavaScript

全画面にほげしたいけど、そのサイトが以下のような状態の場合、素のJavaScriptでのDOM操作が必要になります。

SPAではない
React、Vueなどのフレームワークを使っているページと、使ってないページがある
jQueryをグローバルで定義していない
footer（またはheader）は共通化している（includeファイル）

この状態で全画面にほげすることを考えたとき、共通化しているfooter内で、以下の処理を行うことを考えました。

全画面で表示したいコンテンツを display: noneでマークアップする
jsでコンテンツのDOMを取得して、目的の場所にappendし、 display: blockにする

当初document.createElementで要素を作成していこうと思ったのですが、レイアウトが単純ではないのでやめました。

1. 全画面に表示したいコンテンツを display: noneにしておく

footer.incのどこか

・・・
<div class="js-target" style="display: none;">hoge</div>
・・・

2. jsでコンテンツのDOMを取得して、目的の場所にappendし、 display: blockにする

目的の場所をbody直下にした場合。

footer.incのどこか（コンテンツより下）

<div class="js-target" style="display: none;">hoge</div>
...
<script>
var element = document.getElementsByClassName('js-target')[0];
if (element) {
  document.getElementsByTagName("body")[0].prepend(element);
  element.style.display = 'block';
}
</script>
...

これで、footer.incを読み込んでいる、全ての画面でbody直下にhogeが表示されるようになりました。

あ、やっぱりスマホページだけ。

全画面ではなくUser Agentを見て、スマホページだけに出したいという要件に変わった場合、上の処理に下の条件分岐を追加してあげます。
※スマホの定義はプロジェクトに依存するので、その都度変更します。

var element = document.getElementsByClassName('js-target')[0];
if (element) {
  var ua = navigator.userAgent;
  if (ua.indexOf('iPhone') > 0 || ua.indexOf('iPod') > 0 || ( ua.indexOf('Android') > 0 && ua.indexOf('Mobile') > 0 ) || ua.indexOf('Windows Phone') > 0) {
      document.getElementsByTagName("body")[0].prepend(element);
      element.style.display = 'block';
  }
}

ゼロから新規で同じ思想で使ってつくるサイトならいいのですが、
古いページとモダンなページ、脱jQueryしているページとしていないページが混在していると、全ての画面に何かをするというのにはひと工夫が必要でした。

uggds

あ、やっぱりスマホページだけ。