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ページの検証を行う事ができる。

記事が少しでもいいなと思ったらクラップを送ってみよう!
36
+1
@kichinagaの技術ブログ

よく一緒に読まれている記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる

技術ブログをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

技術ブログを開設する

Qrunchでアウトプットをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

Markdownで書ける

ログ機能でアウトプットを加速

デザインのカスタマイズが可能

技術ブログ開設

ここから先はアカウント(ブログ)開設が必要です

英数字4文字以上
.qrunch.io
英数字6文字以上
ログインする