AndroidのWebViewでロードしたURLから特定のdivタグを表示しない方法

###前提・実現したいこと
閲覧ありがとうございます。Androidの開発をしています。
WebViewで、webview.loadUrl(url); のようにあるURLのサイトを表示をしています。
今やりたいことはwebviewのロードが終了したら、bodyタグの中で特定のタグを表示しないようにしたいのです。

現在表示しようとしているHTMLは以下の様な構成になっています。

lang
1<html>
2<head> … </head>
3
4<body>
5<div id="main" data-role="page" data-theme="a" data-content-theme="b" data-position="inline">
6
7    <div data-role="header" data-theme="a" data-position="inline" style="margin-top: -8px;">…</div>
8    <div class="content">…</div>
9    <div data-role="footer" data-position="fixed" data-theme="c" data-content-theme="c">…</div>
10
11</div>
12
13<body>
14</html>

この中で、div data-role="footer" で囲まれた部分を表示したくありません。

lang
1<div data-role="footer" data-position="fixed" data-theme="c" data-content-theme=“c">…</div>

###発生している問題

色々調べたところ、「class="footer"」のようにclass指定されていれば、次のようにJavaScriptでclassを使って要素を取り出して非表示指定出来ると思われました。

lang
1      
2@Override
3    public void onPageFinished(WebView view, String url){
4        view.loadUrl("javascript:document.getElementsByClassName('footer')[0].style.display='none';");
5    }

今悩んでいるのは、classやidの指定が無いのでどうすれば「div data-role="footer"」のような要素を特定して非表示に出来るかわからないということです。

何かヒントやいい方法をお持ちの方がいらっしゃいましたらご教示くださると助かります。
なにとぞよろしくお願いします。

###解決方法

omochiさんのコードを使わせていただき、次のようなコードをonPageFinishedメソッドから呼び出して期待通りに動きました。ご回答くださった方々まことにありがとうございました。

lang
1    private void removeFooter() {
2        // 表示したくない部分を取り除く
3        mWebView.loadUrl("javascript:(function() { " +
4                "var elements = document.getElementsByTagName('div'); " +
5                "for(var i = 0; i < elements.length; i++){ " +
6                "if(elements[i].getAttribute('data-role') == 'footer'){" +
7                "elements[i].style.display='none'; " +
8                "}}" +
9                "})()");
10    }
11

行動規範の内容に同意します

回答2件

ベストアンサー

JSにあまり詳しくありませんが以下で可能だと思います。
条件としてdata属性のroleがユニークである必要があります。

JavaScript
1var elements = document.getElementsByTagName("div");
2for(var i = 0; i < elements.length; i++){
3	if(elements[i].getAttribute('data-role') == "footer"){
4		elements[i].style.display="none";
5		return;
6	}
7}

*JQuery等でdata属性からdivを取得できるならもっと簡単にできそうですね

投稿2016/06/01 08:41

編集2016/06/01 09:32

omochi

総合スコア410

sakura_bird1

2016/06/01 09:36 編集

どうもありがとうございます。とても助かりました！最終的にomochiさんのコードを使わせていただき、以下のようにして期待通りに動くことを確認出来ました。 private void removeFooter() { // 表示したくない部分を取り除く mWebView.loadUrl("javascript:(function() { " + "var elements = document.getElementsByTagName('div'); " + "for(var i = 0; i < elements.length; i++){ " + "if(elements[i].getAttribute('data-role') == 'footer'){" + "elements[i].style.display='none'; " + "}}" + "})()"); }

行動規範の内容に同意します