3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2018-03-12

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

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

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

  1. 全画面で表示したいコンテンツを display: noneでマークアップする
  2. 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しているページとしていないページが混在していると、全ての画面に何かをするというのにはひと工夫が必要でした。

3
1
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?