如何通过在 android webview 中使用 js 通过它的 id 获取特定 <div> 的数据？答案

【问题标题】：How to get a particular <div>'s data by it's id by using js in android webview?如何通过在 android webview 中使用 js 通过它的 id 获取特定 <div> 的数据？
【发布时间】：2019-01-28 00:14:45
【问题描述】：

我是网络开发的初学者，所以如果我的问题很愚蠢，请原谅。基本上，我正在使用html+css+js 脚本在webView 中显示textEditor，这显示没有任何问题，但现在的问题是如何获得具有ID“myEditor”的特定内容？谁能帮我解决这个问题？

HTML 代码：

  <html>

<head>

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font- 
 awesome/4.7.0/css/font-awesome.css">
</head>

 <body>
  <style>
    #editorContainer {
        max-width: 600px;
        margin: auto;
    }

    #myEditor {
        border: 1px solid #000;
        padding: 20px;
    }

    #toolbar {
        padding: 10px 20px;
        border: 1px solid #d9d9d9;
        background-color: #d9d9d9;
    }

    #toolbar button {
        border: 1px solid transparent;
        font-size: 18px;
        cursor: pointer;
        padding: 5px 10px;
        background-color: transparent;
    }

    #toolbar button:hover {
        border: 1px solid #2e2e2e;
    }
</style>
<div id="editorContainer">
    <div id="toolbar">
        <button onclick="document.execCommand('bold',true,'' )"><i class="fa fa-bold" aria-hidden="true"></i></button>
        <button onclick="document.execCommand('italic', true, '')"><i class="fa fa-italic" aria-hidden="true"></i></button>
        <button onclick="document.execCommand('underline', true, '')"><i class="fa fa-underline" aria-hidden="true"></i></button>
        <button onclick="document.execCommand('strikethrough', true, '')"><i class="fa fa-strikethrough" aria-hidden="true"></i></button>

    </div>
    <div id="myEditor" contenteditable="true">
        <h1>Simple Text Editor</h1>
        <p>This is a very simple text editor. I will add other features and design elements to it as time goes along.</p>
    </div>
</div>

<!-- Based on Codeburst.io Tutorial: https://codeburst.io/how-to-build-your-own-wysiwyg-editor-6002fa3f5ea8 -->

<!--
              Features to add:
              - Save command state
              -->
<script>
    var onclick = function() {
        var cmd = this.getAttribute('data-role');
        switch (cmd) {
            case 'h1':
            case 'h2':
            case 'p':
                document.execCommand('formatBlock', false, '<' + cmd + '>');
                break;
            default:
                document.execCommand(cmd, false, null);
                break;
        }
    };

    var els = document.querySelectorAll('#editControls a');

    Array.prototype.forEach.call(els, function(el) {
        el.addEventListener('click', onclick);
    });
</script>

现在下面的代码正在返回 webView 的完整脚本，但我想知道如何编辑它以获得所需的结果。

Java 代码：

webView.evaluateJavascript(
                    "(function() { return ('<html>'+document.getElementsByTagName('html')[0].innerHTML+'</html>'); })();",
                    new ValueCallback<String>() {
                        @Override
                        public void onReceiveValue(String html) {

                        }
                    });

【问题讨论】：

标签： javascript android html css webview

【解决方案1】：

使用 Jsoup 库：https://github.com/jhy/jsoup

Document document = Jsoup.parse(html);
Element sampleDiv = document.getElementById("sampleDiv");

示例：

import org.jsoup.Jsoup;
import org.jsoup.nodes.Document;
import org.jsoup.nodes.Element;
import org.jsoup.select.Elements;

public class JsoupTester {
   public static void main(String[] args) {

      String html = "<html><head><title>Sample Title</title></head>"
         + "<body>"
         + "<p>Sample Content</p>"
         + "<div id='sampleDiv'><a href='www.google.com'>Google</a>"
         + "<h3><a>Sample</a><h3>"
         +"</div>"
         + "<div id='imageDiv' class='header'><img name='google' src='google.png' />"
         + "<img name='yahoo' src='yahoo.jpg' />"
         +"</div>"
         +"</body></html>";
      Document document = Jsoup.parse(html);

      //a with href
      Elements links = document.select("a[href]");

      for (Element link : links) {
         System.out.println("Href: " + link.attr("href"));
         System.out.println("Text: " + link.text());
      }

      // img with src ending .png
      Elements pngs = document.select("img[src$=.png]");

      for (Element png : pngs) {
         System.out.println("Name: " + png.attr("name"));
      }

      // div with class=header
      Element headerDiv = document.select("div.header").first();
      System.out.println("Id: " + headerDiv.id());

      // direct a after h3
      Elements sampleLinks = document.select("h3 > a"); 

      for (Element link : sampleLinks) {
         System.out.println("Text: " + link.text());
      }
   }
}

结果：

Href: www.google.com
Text: Google
Name: google
Id: imageDiv
Text: Sample

【讨论】：

【解决方案2】：

在您的 Javascript 中，document.getElementsByTagName('html')[0].innerHTML 查找 <html> 标记的第一个实例，然后检索其中的 HTML。由于<html> 标记包含我们的整个HTML 文件，它返回整个文件。

要获取 ID 为 myEditor 的特定元素的 HTML，请尝试使用 document.getElementById('myEditor').innerHTML，它会找到具有匹配 ID 属性的元素的第一个实例并返回其 innerHTML。

【讨论】：

感谢您的回答先生，但它无法解决我的问题