首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

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

在WKWebView中注入JavaScript以获取所单击图像的src属性,可以通过以下步骤实现:

  1. 首先,需要创建一个WKWebView对象,并加载一个网页。
  2. 在WKWebView的代理方法webView(_:decidePolicyFor:decisionHandler:)中,拦截网页的点击事件。
  3. 当用户点击网页中的图片时,通过JavaScript注入的方式获取该图片的src属性。
  4. 将获取到的src属性传递给原生代码进行处理或展示。

以下是一个示例代码:

代码语言:txt
复制
import WebKit

class ViewController: UIViewController, WKNavigationDelegate, WKUIDelegate {
    var webView: WKWebView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let configuration = WKWebViewConfiguration()
        webView = WKWebView(frame: view.bounds, configuration: configuration)
        webView.navigationDelegate = self
        webView.uiDelegate = self
        
        view.addSubview(webView)
        
        if let url = URL(string: "https://example.com") {
            let request = URLRequest(url: url)
            webView.load(request)
        }
    }
    
    // 拦截网页的点击事件
    func webView(_ webView: WKWebView, decidePolicyFor navigationAction: WKNavigationAction, decisionHandler: @escaping (WKNavigationActionPolicy) -> Void) {
        if navigationAction.navigationType == .linkActivated {
            // 获取点击的元素
            let element = navigationAction.targetFrame?.request.url?.absoluteString
            
            // 判断是否为图片
            if let element = element, element.hasSuffix(".jpg") || element.hasSuffix(".png") {
                // 注入JavaScript获取图片的src属性
                let script = "var imgSrc = document.elementFromPoint(\(navigationAction.location.x), \(navigationAction.location.y)).src; imgSrc;"
                webView.evaluateJavaScript(script) { (result, error) in
                    if let src = result as? String {
                        // 处理或展示获取到的src属性
                        print("点击的图片src属性为:\(src)")
                    }
                }
            }
        }
        
        decisionHandler(.allow)
    }
}

这段代码创建了一个WKWebView对象,并加载了一个网页。在webView(_:decidePolicyFor:decisionHandler:)方法中,拦截了网页的点击事件,并判断点击的元素是否为图片。如果是图片,则通过JavaScript注入的方式获取该图片的src属性,并将其传递给原生代码进行处理或展示。

对于这个问题,腾讯云没有特定的产品或服务与之直接相关。但是,腾讯云提供了一系列云计算产品和服务,如云服务器、云数据库、云存储等,可以帮助开发者构建和部署各种应用。你可以访问腾讯云官方网站(https://cloud.tencent.com/)了解更多信息。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

iOSWebKit框架应用与解析 原

native代理回调方法,会获取JavaScript传递进来消息,如下: -(void)userContentController:(WKUserContentController *)userContentController...信息应用程序名称 iOS9后可用 config.applicationNameForUserAgent = @"HS"; 四、WKWebView属性和方法解析         下面列举了WKWebView...JavaScript代码注入也是通过WKUserContentController来完成,使用addUserScript:方法来注入JavaScript,其中需要通过WKUserScript类来生成要注入对象...,这个类使用如下方法来进行实例化: /* source为要注入js代码 WKUserScriptInjectionTime设置注入时机 forMainFrameOnly参数设置是否只主页面注入 typedef...JavaScript调用方法时需要设置代理,不需要时需要将代理移除,WKUserContentController也提供了移除这个代理方法,如果不移除,将会造成WebView不能释放。

1.9K40

WKWebView详解

centeredAtPoint:(CGPoint)point; 按指定因子(magnification属性)缩放页面内容,并将结果集中指定点上,即指定点为中心放大 --- 浏览 是否允许水平滑动手势来触发网页前进和后退...是执行失败结果 completionHandler主线程执行 --- 获取截图 获取WebView可见区域截图 - (void)takeSnapshotWithConfiguration:(WKSnapshotConfiguration...你必须设置此属性播放内联视频 当在iPhoneHTML文档添加视频元素时,还必须包括playsinline属性 iOS 10.0之前创建应用程序必须使用webkit-playsinline属性...WebView用户界面通过实现这个协议来控制新窗口打开,增强用户单击元素时显示默认菜单项表现,并执行其他用户界面相关任务。这些方法可以通过处理JavaScript或其他插件内容来调用。...defaultText是输入框展示默认文本 frameJavaScript进程发起这次调用 输入界面被解除之后调用completionHandler来回调给页面,点击确定传输入框文本,取消传

20.6K193
  • Hybrid App 应用 开发 9 个必备知识点复习(WebView 调试 等)

    滚动刷新率及内置手势; WKWebView 支持了更多 HTML5 特性; WKWebView 高效 app 和 web 信息交换通道; WKWebView 允许 JavaScript Nitro...库加载并使用, UIWebView 限制了; WKWebView 目前缺少关于页码相关 API; WKWebView 提供加载网页进度属性WKWebView 使用 Safari 相同 JavaScript...引擎; WKWebView 增加加载进度属性: estimatedProgress ; WKWebView 不支持页面缓存,需要自己注入 cookie , 而 UIWebView 是自动注入 cookie...,而在 iOS 10 上,JS 执行 document.cookie 或服务器 set-cookie 注入 Cookie 会很快同步到 NSHTTPCookieStorage ,FireFox... 当调试项目的加载时,您应用程序将会有一个蓝色地方,点击会出现一个四叶三叶草东西

    3.1K00

    【Hybrid】288- Hybrid App 应用开发 9 个必备知识点复习

    WKWebView 支持了更多 HTML5 特性; WKWebView 高效 app 和 web 信息交换通道; WKWebView 允许 JavaScript Nitro 库加载并使用, UIWebView...限制了; WKWebView 目前缺少关于页码相关 API; WKWebView 提供加载网页进度属性WKWebView 使用 Safari 相同 JavaScript 引擎; WKWebView...增加加载进度属性: estimatedProgress ; WKWebView 不支持页面缓存,需要自己注入 cookie , 而 UIWebView 是自动注入 cookie ; WKWebView... 当调试项目的加载时,您应用程序将会有一个蓝色地方,点击会出现一个四叶三叶草东西...1.4电脑端远程 DebugGap 将检测即将到来客户端,开发人员可以单击每个客户端进行调试。 六、 iOS 平台下如何调试 WebView?

    2.3K20

    Hybrid App 应用开发 9 个必备知识点复习

    WKWebView 支持了更多 HTML5 特性; WKWebView 高效 app 和 web 信息交换通道; WKWebView 允许 JavaScript Nitro 库加载并使用,...UIWebView 限制了; WKWebView 目前缺少关于页码相关 API; WKWebView 提供加载网页进度属性WKWebView 使用 Safari 相同 JavaScript...引擎; WKWebView 增加加载进度属性: estimatedProgress ; WKWebView 不支持页面缓存,需要自己注入 cookie , 而 UIWebView 是自动注入 cookie...,而在 iOS10 上,JS 执行 document.cookie 或服务器 set-cookie 注入 Cookie 会很快同步到 NSHTTPCookieStorage ,FireFox 工程师曾建议通过... 当调试项目的加载时,您应用程序将会有一个蓝色地方,点击会出现一个四叶三叶草东西

    2.7K20

    iOS开发----JavaScriptCore、UIWebView及WKWebView交互那些事

    分别使用 UIWebView 以及 WKWebView 实现效果如下: JavaScriptCore 类库里面有12个类(还有两个是负责导入相关类头文件以及一个关于WebKit宏定义);基本交互过程...,其实最常使用有三个:JSContext、JSValue、JSExport JSContext 简单理解为执行JavaScript一个环境,就好像我们绘制View时候需要获取CGContext...客户端调用JavaScript 执行简单JavaScript 获取定义JavaScript变量 捕获执行异常 JavaScript 调用客户端 仔细看看JSValue类型转换,就可以知道,JS...UIWebViewDelegate UIWebViewDelegate webViewDidFinishLoad() 方法对JSContext进行截取,并执行操作: WKWebView 首先有一点...,WKWebView获取不JSContext,那咋办?

    1.5K20

    Hybrid App 应用开发 9 个必备知识点复习

    WKWebView 支持了更多 HTML5 特性; WKWebView 高效 app 和 web 信息交换通道; WKWebView 允许 JavaScript Nitro 库加载并使用, UIWebView...限制了; WKWebView 目前缺少关于页码相关 API; WKWebView 提供加载网页进度属性WKWebView 使用 Safari 相同 JavaScript 引擎; WKWebView...增加加载进度属性: estimatedProgress ; WKWebView 不支持页面缓存,需要自己注入 cookie , 而 UIWebView 是自动注入 cookie ; WKWebView... 当调试项目的加载时,您应用程序将会有一个蓝色地方,点击会出现一个四叶三叶草东西...1.4电脑端远程 DebugGap 将检测即将到来客户端,开发人员可以单击每个客户端进行调试。 六、 iOS 平台下如何调试 WebView?

    2.3K30

    分享超详细 WKWebView 开发和使用经验

    WKWebView 几个不常用特性 WKWebview 加载过程性能指标图解 WKWebview 秒开实践及踩坑之路 今天分享这篇文章全面的介绍了 WKWebView,作者根据开发和使用经验从属性...WKWebView 属性 webView 属性 title: 网页标题,一般为 html 内容 URL: 网页URL地址,为最终加载地址 loading:...: 加载 HTTPS 请求服务端信任证书 以上属性都可以采用 KVO 观察属性变化: // NSKeyValueObservingOptionNew 更改后值 // NSKeyValueObservingOptionOld...,才能从 WKUIDelegate 代理方法获取到。...H5 前端所有想要拦截 js,css 或者其他网络请求资源,需要将路径写成自适应协议路径,例如如下写法即可: <script type="text/<em>javascript</em>" src="//192.168.1.150

    4.9K30

    JS Bridge 通信原理

    注入上下文 前面我们有讲过 iOS 内置了 JavaScriptCore 这个框架,可以实现执行 JS 以及注入 Native 对象等功能。...iOS WKWebView WKWebView 里面通过 addScriptMessageHandler 来注入对象到 JS 上下文,可以 WebView 销毁时候调用 removeScriptMessageHandler...Android Android 里面需要区分版本,安卓4.4之前版本支持 loadUrl,使用方式类似我们 a 标签 href 里面写 JS 脚本一样,都是javascript:xxx 形式...这种方式无法直接获取返回值。 webView.loadUrl("javascript:foo()") 安卓4.4以上版本一般使用 evaluateJavascript 这个 API 来调用。...:foo()", null); } else { webView.loadUrl("javascript:foo()"); } UIWebView iOS UIWebView 里面使用

    4.8K50

    wkwebview加载完成_【Swift】WKWebView与JS交互使用

    二、WKWebView 支持更多HTML5特性 高达60fps滚动刷新频率与内置手势 与Safari相容JavaScript引擎 性能、稳定性方面有很大提升占用内存更少 协议方法及功能都更细致...接口实现,需要有提示信息以及两个相应事件, 确认及取消,并且completionHandler回传相应结果,确认返回YES, 取消返回NO //参数 message为 js 方法 confirm...JS修改节点内容 let js = "document.getElementsByTagName('h2')[0].innerText = '这是一个iOS写入方法'"; //将js注入到网页 6...JSValue 是对 JavaScript引用,任何 JS 值都可以被包装为一个 JSValue。...还有 JSExport 协议: 实现将原生类及其实例方法,类方法和属性导出为 JavaScript 代码协议。

    5.7K00

    H5如何与原生App通信?

    RN容器 react-native开发,从rn 0.37版本开始官方引入了组件,安卓调用原生浏览器,IOS默认调用是UIWebView容器。...这里我们在请求参数中加上了cbName=jsCallClientBack,这个jsCallClientBack为JS调用客户端定义回调函数,在业务层jsBridge封装,我们传入一个匿名函数作为回调...js里可以直接调用原生方法。 使用prompt,console.log,alert方式,这三个方法对js里是属性原生android webview这一层是可以重写这三个方法。...Android客户端调用H5方法 安卓APP,客户端通过webviewloadUrl进行调用: // android JAVA code webView.loadUrl("javascript:.../html/index.html')} injectedJavaScript={'window.androidConfig = {}'} // 通过这个props可以webView初始化时注入属性方法

    6K20

    如何绕过XSS防护

    eval()a fromCharCode来创建所需XSS向量: 默认SRC标记可获取过去检查...事件方法插入javascript还将适用于任何使用Form,Iframe,Input,Embed等元素HTML标记类型注入。...() (用户撤消事务历史记录返回) onUnload() (当用户单击任何链接或按下后退按钮时,攻击者会强制单击) onURLFlip() (当由HTML+TIME(定时交互式多媒体扩展)媒体标记播放高级流式格式...还有其他一些站点例子,其中存储cookie用户名不是从数据库获取,而是只显示给访问页面的用户。...单击此处获取示例(如果用户浏览器设置为“自动检测”,并且Internet Explorer和IE呈现引擎模式下Netscape 8.1没有覆盖页面上内容类型,则不需要charset语句)。

    3.9K00

    JSBridge 技术原理分析

    4.2 之后,Android引入新接口 @JavascriptInterface解决安全问题,所以 Android 注入对对象方式是有兼容性问题。...拦截 URL SCHEME 主要流程是:Web 端通过某种方式(例如 iframe.src)发送 URL Scheme 请求,之后 Native 拦截到请求并根据 URL SCHEME(包括参数...实践过程,这种方式有一定缺陷: 使用 iframe.src 发送 URL SCHEME 会有 url 长度隐患。 创建请求,需要一定耗时,比注入 API 方式调用同样功能,耗时会较长。...方式1:由 Native 端进行注入 注入方式和 Native 调用 JavaScript 类似,直接执行桥全部代码。...JavaScript调用接口时,需要优先判断 JSBridge 是否已经注入成功。

    1.8K10
    领券