BETA

Android Webview 覚え書き

投稿日:2018-11-30
最終更新:2018-12-11

androidでwebviewを使った時につまずいた部分のまとめ

特定のhtml要素を非表示にする

背景

webviewを使うときに上部にtoolbarを起きたかった。
しかし、webページには既にtoolbarの様なデザインのheaderが実装されており、toolbarが2つある変なデザインになってしまった。
どうしてもアプリのtoolbarを使いたかったので、webviewでページを読む時にhtmlのheaderを非表示にする事にした。

実装

webviewclinentのメソッドであるonPageFinishedの中で、headerのスタイルを変更するjavascriptを書き、実行させた。

コード

webview.webViewClient = object : WebviewClient(this) {  
            override fun onPageFinished(view: WebView?, url: String?) {  
                super.onPageFinished(view, url)  
                // Kitkat以上と未満でjavascript実行処理を分ける  
                if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT){  
                    view?.evaluateJavascript("javascript:document.getElementsByTagName('header')[0].style.display='none';", null)  
                } else {  
                    view?.loadUrl("javascript:document.getElementsByTagName('heade')[0].style.display='none';")  
                }  
            }  
        }  

つまずいた部分

API 19 以上と未満でjsを実行するメソッドが異なっていた

API 19(Kitkat)未満ではloadUrlメソッドを使ってjsを実行していたが、API 19以上からはevaluateJavascriptメソッドがjsを実行する関数になっているらしい。

* 別にAPI 19以上でもloadUrlでjsの実行ができた。だが処理によっては動かなくなることもあるっぽいので大人しくevaluateJavascriptメソッドを使うのが良さそう。

webview上のhtmlのデバッグをしていなかった

そもそもwebviewのデバッグ方法を知らなかったので、どこが悪い部分を手探りでやっていた。
google chromeにてchrome://inspectにアクセスし、pcと繋がっているスマホがwebviewを開くと、chrome上でwebviewの開いているページ一覧が表示され、inspectを押すとweb開発と同じ様にwebページの検証を行う事ができる。

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

@kichinagaの技術ブログ

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる
技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
or 外部アカウントではじめる
10秒で技術ブログが作れます!