全画面にほげしたいけど、そのサイトが以下のような状態の場合、素のJavaScriptでのDOM操作が必要になります。
- SPAではない
- React、Vueなどのフレームワークを使っているページと、使ってないページがある
- jQueryをグローバルで定義していない
- footer(またはheader)は共通化している(includeファイル)
この状態で全画面にほげすることを考えたとき、共通化しているfooter内で、以下の処理を行うことを考えました。
- 全画面で表示したいコンテンツを
display: none
でマークアップする - jsでコンテンツのDOMを取得して、目的の場所にappendし、
display: block
にする
当初document.createElementで要素を作成していこうと思ったのですが、レイアウトが単純ではないのでやめました。
1. 全画面に表示したいコンテンツを display: none
にしておく
・・・
<div class="js-target" style="display: none;">hoge</div>
・・・
2. jsでコンテンツのDOMを取得して、目的の場所にappendし、 display: block
にする
目的の場所をbody直下にした場合。
<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しているページとしていないページが混在していると、全ての画面に何かをするというのにはひと工夫が必要でした。