如何在WebKit视图中获取单击元素的Id

Question

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

Answer 1

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

1. 使用WKUserScript将一些javascript注入WebView
2. 注入的javascript将监听任何点击事件的文档主体
3. 收到点击事件后，使用elementFromPoint查找DOM元素
4. 通过这种方式设置，javascript将与本机代码进行通信
5. 收到点击并找到元素后，请联系点击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)
}
}

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

Answer 2

classViewController: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)
}