在 WKWebView 中注入 javascript 以获取单击图像的 src 属性

Question

我想在 webkitview 中注入一个 javascript 代码，当用户点击它时获取被点击图像的 src 属性。我还发现有些图像没有将它们的 src 属性直接放在 img balise 中，但它是由 balise 中的一个类注入的。我发现这个脚本可以在 webview 中获取点击的 Html 元素：  document.addEventListener("click", function(evt) {        var tagClicked = document.elementFromPoint(evt.pageX - window.pageXOffset, evt.pageY - window.pageYOffset);        window.webkit.messageHandlers.jsMessenger.postMessage(tagClicked.outerHTML.toString());        });类注入的 src 属性示例： <img alt="Chaussure de football enfant terrains secs Agility 900 FG JR grise et bleue" class="source-medium">在这种情况下，如果返回的字符串是图像，我可以从返回的字符串中获取 src 属性，但是如果 src 属性是由 img balise 中的类注入的，则我无法从返回的字符串中获取它。任何人都可以帮忙吗？谢谢。

Answer 1

你会很高兴知道它比这简单得多，因为事件对象有一个属性，称为target被点击的元素。由于您对img元素感兴趣，我们不必担心它是您想要的元素的子元素，因此我们可以直接使用evt.target。

为了更容易，HTMLImageElement对象有一个src属性，它提供图像的完整、解析的 URL，所以：

document.addEventListener("click", function(evt) {

    if (evt.target.tagName === "IMG") {

        window.webkit.messageHandlers.jsMessenger.postMessage(evt.target.src);

    }

});

但如果你真的想要outerHTML：

document.addEventListener("click", function(evt) {

    if (evt.target.tagName === "IMG") {

        window.webkit.messageHandlers.jsMessenger.postMessage(evt.target.outerHTML);

    }

});

假设这是一个 HTML 页面，您可以依赖tagName所有大写的存在（即使它不在解析页面的 HTML 中）。