如何在 WebKit 视图中获取单击元素的 ID？答案

【问题标题】：How to get the Id of clicked element in a WebKit view?如何在 WebKit 视图中获取单击元素的 ID？
【发布时间】：2018-11-27 08:37:37
【问题描述】：

我在 url 中加载了一个 UIWebKit，我想在单击时选择一个 html 元素的 id。当我知道 id 时我可以获取元素，但是当单击它时如何获取未知元素 ID。感谢你们对我的帮助！

【问题讨论】：

标签： ios swift webkit

【解决方案1】：

您可以按照以下方式进行。

使用WKUserScript将一些javascript注入WebView。
注入的 javascript 将侦听文档正文中的任何点击事件。
收到点击事件后，使用 elementFromPoint 查找 DOM 元素。
这样设置，javascript 将与本机代码进行通信。
收到点击并找到元素后，联系被点击 DOM 的原生代码。

我已经测试过这种工作方式，它适合我。

import UIKit
import WebKit

class ViewController: UIViewController {

    @IBOutlet weak var webView: WKWebView!
    private var url = URL(string: "https://www.google.com")!


    override func viewDidLoad() {
        super.viewDidLoad()

        initializeWebView()
        loadData()

    }

    private func initializeWebView() {

        let javascript = """
        window.onload = function() {
            document.addEventListener("click", function(evt) {
                var tagClicked = document.elementFromPoint(evt.clientX, evt.clientY);
                window.webkit.messageHandlers.jsMessenger.postMessage(tagClicked.outerHTML.toString());
            });
        }
        """

        let userScript = WKUserScript.init(source: javascript,
                                           injectionTime: .atDocumentStart, forMainFrameOnly: true)
        webView.configuration.userContentController.addUserScript(userScript)
        webView.configuration.userContentController.add(self, name: "jsMessenger")
    }

    private func loadData() {
        let request  = URLRequest(url: url)
        webView?.load(URLRequest.init(url: url))
    }
}


extension ViewController: WKScriptMessageHandler {
    func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
        print(message.body)
    }
}

它将整个元素作为字符串提供给您

【讨论】：

非常明确的答案！你为我节省了很多时间，谢谢！
因为它有帮助，请考虑投赞成票，因为您已经接受了答案。

【解决方案2】：

类 ViewController: UIViewController, WKNavigationDelegate, WKUIDelegate {

@IBOutlet weak var webContentView: UIView!
var web: WKWebView!

override func viewDidLoad() {
    super.viewDidLoad()

   let config = WKWebViewConfiguration()
    let JSsource =  """
    window.onload = function() {
        document.addEventListener("click", function(evt) {
            var tagClicked = document.elementFromPoint(evt.clientX, evt.clientY);
            window.webkit.messageHandlers.jsMessenger.postMessage(tagClicked.outerHTML.toString());
        });
    }
    """

     let script = WKUserScript(source: JSsource, injectionTime: .atDocumentEnd, forMainFrameOnly: false)
     config.userContentController.addUserScript(script)
    config.userContentController.add(self as! WKScriptMessageHandler, name: "jsMessenger")

    self.web = WKWebView(frame: CGRect(x: 0, y: 0, width: self.view.frame.size.width, height: self.view.frame.size.height-60), configuration : config)

    self.web.navigationDelegate = self
    self.web.uiDelegate = self
    self.webContentView.addSubview(self.web!)
  }
func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
    print(message.body)
}

【讨论】：