个人中心
gpt4 book ai didi

javascript - 如何在 android webview 中使用 js 获取特定的
's data by it' s id？

转载 作者：行者123 更新时间：2023-11-28 01:14:05 24 4
gpt4 key购买 nike

我是网络开发的初学者，所以如果我的问题很愚蠢，请原谅。基本上我正在使用 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) {

                        }
                    });

最佳答案

使用 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

关于javascript - 如何在 android webview 中使用 js 获取特定的 <div >'s data by it' s id？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51954917/

24 4 0
文章推荐： css - 点击输入外，返回false？
文章推荐： html - Play 字符串的 scala 模板语法
文章推荐： javascript - JS/JQuery 隐藏元素、更改文本、显示元素
文章推荐： jquery - 显示/隐藏内容
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com