webviewで特定の要素を非表示にしたい

Question

自社サイトのページを、アプリのwebview機能で表示させているのですが
アプリ上ではheader-topにあたる部分を表示させたくありません。

https://note.com/shinokichi/n/n80e37b1be0b2
上記URLの対処法　2:ECサイト側でヘッダを消す　とまったく同じ感じにしたいのです。。

アプリ側でcssで非表示設定することも出来るのですが、読み込まれる時に一瞬だけ非表示されてしまうのをやめたくて
契約させてもらっているアプリ開発会社の担当の方に相談したところ、UA判定を使ってサイト側で非表示設定してくださいと言われました。

UA判定のJSをいれて追加してみたのですが、やはり変わらずアプリ上でheader-topが一瞬表示されてしまいます。

非表示にしたい部分

<div id="header-top">
　<div class="hero">
    <h1>
    　<a href="https://yahoo.co.jp">
        <img src="logo.png">
    　</a>
    </h1>
    <span>サイトタイトル</span>
　</div>
</div>

<script>
    if ((navigator.userAgent.indexOf('iPhone') > 0 || navigator.userAgent.indexOf('iPad') > 0 || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0) && navigator.userAgent.indexOf('契約しているアプリプラットフォーム名') == 0) {
        document.getElementById("header-top").style.display = "none";
         }
</script>

Comments

[miyabi_pudding]

その、スクリプトは、HTMLのどの部分で呼び出していますか？

[_hasegawa_]

header.phpなのですが、<div id="header-top">~</div>よりも上の最上段に記載しております。

[miyabi_pudding]

わかりました。
回答いたしましたので、参考にしてみて下さい。

[miyabi_pudding]

解決したのでしょうか？
であれば、自己解決の投稿か、BA選出して、質問を閉じましょう。

[_hasegawa_]

申し訳ありません！
解決いたしましたm(__)mありがとうございます！

Answer 1

スクリプトを読み込んだり実行している位置などにもよりますが、
JavaScriptで処理している以上、
CSSレンダリングより先に処理を走らせるのは難しいです。

なので、下記のやり方がよいかと。

• CSSで、初期値をdisplay: noneにし、

JavaScriptによって、該当ユーザーエージェント以外の時に、display: blockにする

• JavaScriptの実行位置を早めの行に置き、

DOMツリーが生成された直後に実行されるように組む

他にもありますが、フロントエンド側のみでできる施策は大まかにはこの二つかと。
一番目が確実だと思います。

Comments

[_hasegawa_]

なるほど…！JSのほうが後に実行されるのですね。

#header-top {
display: none
}

<script>
if ((navigator.userAgent.indexOf('iPhone') > 0 || navigator.userAgent.indexOf('iPad') > 0 || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0) ! navigator.userAgent.indexOf('契約しているアプリプラットフォーム名') === 0) {
document.getElementById("header-top").style.display = "block";
}
</script>

＞JavaScriptによって、該当ユーザーエージェント以外の時に、display: blockにする
こちらであっていますでしょうか…？JS初心者で申し訳ありません＞＜

[miyabi_pudding]

!の前に、&&を入れましょう。
それで、大丈夫かと思います。
また、
DOMツリーが生成された後に実行するようにしましょう。
その方法に関してはご自身で調べて下さい。

> なるほど…！JSのほうが後に実行されるのですね。

必ずしもそうではありません。
head要素内に入れている場合はJavaScript処理が先に走ります。
ただし、その前行にCSSを、読み込んだり記載があれば、そちらが先に動きます。
あとはJSも、CSSも、非同期で実行できますので、その場合もまた、処理の順番変わってきます。

なので、そこらへんも含めての質問にするなら、HTML構文も"質問本文"に記載下さい。