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

我无法在WKWebview中获得网页的某个按钮的单击事件,如何使用java脚本将单击事件添加到wkwebview

在WKWebView中无法直接获得网页按钮的单击事件,但可以通过使用JavaScript脚本将单击事件添加到WKWebView中。下面是一种实现方式:

  1. 首先,创建一个WKWebView对象并加载网页:
代码语言:txt
复制
import WebKit

let webView = WKWebView(frame: CGRect(x: 0, y: 0, width: 320, height: 480))
let url = URL(string: "https://example.com")
let request = URLRequest(url: url!)
webView.load(request)
  1. 创建一个WKUserScript对象,用于注入JavaScript代码到网页中:
代码语言:txt
复制
let script = WKUserScript(source: "document.getElementById('buttonId').addEventListener('click', function() { window.webkit.messageHandlers.buttonClicked.postMessage('Button clicked'); });", injectionTime: .atDocumentEnd, forMainFrameOnly: true)

在上述代码中,buttonId是网页中按钮的ID,buttonClicked是自定义的消息名称,可以根据需要修改。

  1. 创建一个WKWebViewConfiguration对象,并将WKUserScript对象添加到其中:
代码语言:txt
复制
let configuration = WKWebViewConfiguration()
configuration.userContentController.addUserScript(script)
  1. 在WKWebViewConfiguration对象中注册一个消息处理器,用于接收来自网页的消息:
代码语言:txt
复制
configuration.userContentController.add(self, name: "buttonClicked")
  1. 实现WKScriptMessageHandler协议,处理来自网页的消息:
代码语言:txt
复制
extension ViewController: WKScriptMessageHandler {
    func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
        if message.name == "buttonClicked" {
            if let messageBody = message.body as? String {
                print("Button clicked: \(messageBody)")
            }
        }
    }
}

在上述代码中,ViewController是包含WKWebView的视图控制器,你可以根据实际情况修改。

  1. 创建一个WKWebView对象时,将WKWebViewConfiguration对象传递给它:
代码语言:txt
复制
let webView = WKWebView(frame: CGRect(x: 0, y: 0, width: 320, height: 480), configuration: configuration)

通过以上步骤,你可以在WKWebView中通过JavaScript脚本将按钮的单击事件添加到WKWebView中,并通过WKScriptMessageHandler协议处理来自网页的消息。

对于腾讯云相关产品和产品介绍链接地址,由于要求不能提及具体的品牌商,建议你参考腾讯云的官方文档和产品介绍页面,以获取相关信息。

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

相关·内容

移动端app开发问题及理解

ondrag 元素被拖动时运行脚本 ondragend 拖动操作末端运行脚本 ondragenter 当元素已被拖动到有效拖放区域是运行脚本 ondragleave 元素离开有效拖放目标时运行脚本...onscroll 元素滚动条被滚动时 移动端事件有 click 单击事件 类似于pc端click,移动端,连续click触发有200ms-300ms延迟 touch 触摸类事件 touchstart...手指在屏幕上下滑触发 vant组件使用过程遇到问题 弹框dialog组件确认回调函数 最开始绑定是confirm事件 但是实际调用时候接口一直调用进入死循环了,控制台报Maximum call...js如何与app端交互 具体可看下这个 https://zhuanlan.zhihu.com/p/337890794 理解 首先了解下 app移动端网页运行在手机应用内嵌浏览器引擎,没有UI...iPhoneUIWebView(iOS2.0-12.0 ),WKWebView(iOS8.0+,macOS10.10+),AndroidWebView WebView可以理解为手机应用运行和展示网页界面和接口

3.8K10

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

库加载并使用, UIWebView 限制了; WKWebView 目前缺少关于页码相关 API; WKWebView 提供加载网页进度属性; WKWebView 使用 Safari 相同 JavaScript...WKWebView NSURLProtocol问题 WKWebView 独立于 app 进程之外进程执行网络请求,请求数据不经过主进程,因此, WKWebView 上直接使用 NSURLProtocol...然后 WebView 列表中选择你要调试页面,点击“ Inspect ”选项,跟调试 PC 网页一样,使用 Chrome 控制台进行调试。...DebugGap 1.4电脑端远程 DebugGap 检测即将到来客户端,开发人员可以单击每个客户端进行调试。 DebugGap 七、 iOS 平台下如何调试 WebView?...: console.dirxml() 用来显示网页某个节点( node) 所包含 html/xml 代码: var node = document.getElementById("info

3.1K00

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

限制了; WKWebView 目前缺少关于页码相关 API; WKWebView 提供加载网页进度属性; WKWebView 使用 Safari 相同 JavaScript 引擎; WKWebView...WKWebView NSURLProtocol问题 WKWebView 独立于 app 进程之外进程执行网络请求,请求数据不经过主进程,因此, WKWebView 上直接使用 NSURLProtocol...全局 WebView 客户端刚启动时,就初始化一个全局 WebView 待用,并隐藏,当用户访问了 WebView 时,直接使用这个 WebView 加载对应网页,并展示。...然后 WebView 列表中选择你要调试页面,点击“ Inspect ”选项,跟调试 PC 网页一样,使用 Chrome 控制台进行调试。...1.4电脑端远程 DebugGap 检测即将到来客户端,开发人员可以单击每个客户端进行调试。 六、 iOS 平台下如何调试 WebView?

2.3K20

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

限制了; WKWebView 目前缺少关于页码相关 API; WKWebView 提供加载网页进度属性; WKWebView 使用 Safari 相同 JavaScript 引擎; WKWebView...WKWebView NSURLProtocol问题 WKWebView 独立于 app 进程之外进程执行网络请求,请求数据不经过主进程,因此, WKWebView 上直接使用 NSURLProtocol...全局 WebView 客户端刚启动时,就初始化一个全局 WebView 待用,并隐藏,当用户访问了 WebView 时,直接使用这个 WebView 加载对应网页,并展示。...然后 WebView 列表中选择你要调试页面,点击“ Inspect ”选项,跟调试 PC 网页一样,使用 Chrome 控制台进行调试。...1.4电脑端远程 DebugGap 检测即将到来客户端,开发人员可以单击每个客户端进行调试。 六、 iOS 平台下如何调试 WebView?

2.3K30

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

UIWebView 限制了; WKWebView 目前缺少关于页码相关 API; WKWebView 提供加载网页进度属性; WKWebView 使用 Safari 相同 JavaScript...WKWebView NSURLProtocol问题 WKWebView 独立于 app 进程之外进程执行网络请求,请求数据不经过主进程,因此, WKWebView 上直接使用 NSURLProtocol...然后 WebView 列表中选择你要调试页面,点击“ Inspect ”选项,跟调试 PC 网页一样,使用 Chrome 控制台进行调试。...1.4电脑端远程 DebugGap 检测即将到来客户端,开发人员可以单击每个客户端进行调试。 六、 iOS 平台下如何调试 WebView?...: console.dirxml() 用来显示网页某个节点( node) 所包含 html/xml 代码: var node = document.getElementById("info"

2.6K20

小程序iOS客户端框架——控件事件逻辑框架与控件原生化(上)

另外,对于某些H5无法实现,或实现性能较差控件,微信小程序采用了“控件原生化”方式,客户端实现原生控件提供给开发者使用,本文将对原生控件设计和体验优化做详细介绍。...下面是对图1界面逻辑进行处理js文件示例,脚本响应按钮点击事件,并输出日志信息: (图2. js脚本响应处理按钮事件) 微信客户端通过 WKWebView以及JavaScriptCore提供了小程序运行环境...小程序按钮点击事件时序图) 当前端Web JS监听到用户按钮点击行为后,通过WebKit提供消息传递机制(PostMessage)点击事件发送给微信客户端当前页面的WKWebViewWKWebView...下面依旧以按钮为例,通过伪代码实现来理解上述过程: a、开发者界面wxml为button绑定监听函数: b、JSSDKonClick事件发送到service: c、service监听并执行绑定函数...开发者开发过程可以见到API只有开发API;对于组件API,前端SDK会封装成组件提供给开发者使用,所以当开发者页面中使用到了某个组件,并且这个组件使用到了客户端某些原生功能,那么这个组件初始化或运行过程中就会调用组件

2.7K10

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

一、前言 近日,有朋友问我关于WKWebView与JS交互问题,可我之前一直使用是UIWebView,也不曾做过WKWebView交互啊!...,但是并不会起到什么作用 //点击确认按钮相应事件,需要执行completionHandler,这样js才能继续执行 参数 message为 js 方法 alert() <message...接口实现,需要有提示信息以及两个相应事件, 确认及取消,并且completionHandler回传相应结果,确认返回YES, 取消返回NO //参数 message为 js 方法 confirm...let js = "document.getElementsByTagName('h2')[0].innerText = '这是一个iOS写入方法'"; //js注入到网页 6、js获取DOM节点几种方式...要在多个线程上同时(并发)运行 JavaScript 脚本,请为每个线程使用单独 JSVirtualMachine 实例。

5.5K00

iOSWebView——WKWebView

今天就在这里记录一下WKWebView基本使用。 Webview使用,通常包含以下几个部分:浏览器基本设置,浏览器各种回调,浏览器js如何调用原生方法。...在此列举几项及其作用,由于类目繁多,会有遗漏,真正需要使用时,可以xcodehelp寻找,查阅。...WKNavigationDelegate 如命名,这个是WKWebView导航代理。它控制了WKWebView加载一个页面流程各个关键时间节点。...,js会尝试加载某个URL,客户端加载前拦截这个URL,通过解析这个URL识别它内容,调用相应原生方法,并阻上浏览器加载这个URL。...:nil]; cookie同步 WKWebview,cookie默认不再自动处理,我们需要手动根据自己需要,cookie添加到请求

3.2K20

WKWebView详解

您可以使用WKWebView类来应用程序嵌入web内容,通过创建一个WKWebView对象,将其设置为视图,并发送一个请求来加载web内容。...从iOS 8.0和OS X 10.10开始,建议使WKWebView应用程序展示web内容,建议不要使用UIWebView或WebView。...: 方法来加载web内容; 使用 stopLoading 方法来停止加载; 使用 loading 属性来判断网页是否正在加载使用 WKUIDelegate 协议来跟踪网页内容加载过程; ---...选择此值将自动包含添加到这个常量任何新检测类型 WKURLSchemeHandler 用来处理WebKit无法处理URL Scheme类型资源 开始加载特定资源时调用 - (void)webView...系统标题作为一个快速选择表单选项,当用户在上面滑动时可以看到。

20.1K193

小程序iOS客户端框架——控件事件逻辑框架与控件原生化(下)

负责绘制网页全部HTML元素,视频控件插入后覆盖网页所有HTML元素: ?...原生控件插入到WKWebView覆盖控件树HTML节点) 如上图,插入原生控件必然总是盖住网页(节点树中越靠下节点,显示层级越高),这样就会导致: 1 如果开发者期望原生控件上覆盖一些自定义...插入DOM节点后原生控件事件处理。由于WKWebView会接管用户所有操作事件,因此按照上述方案插入后,原生控件是无法响应用户事件。...因此需要对事件做特殊处理:通过重载WKWebViewhitTest方法,该方法处理逻辑优先处理网页事件,如果网页未处理,再传递给原生控件。 8....总结 微信客户端为小程序提供了整套运行环境:包括js脚本运行时支持、小程序任务管理、servicejs脚本与webview之间通信桥接机制,以及对复杂控件进行了原生化。

2.8K40

iOS iOS与html进行交互

然后点击下一页按钮 通过js响应显示另一个网页          最后通过下一页按钮可以返回到首页。     本文仅仅是h5跟ios 交互入门 所以没有做细致描述。...首先先说一下思路:项目中是那样:首先h5从后台拿到数据,然后请求h5界面,然后通过h5按钮进行选择,通过ios控制按钮到那个界面。 这个小demo不涉及数据传输,只是界面的交互。...这边采用方式是:通知传值方式 思路: webviewVC界面初始化时候就要把通知加上 然后 登录成功之后  发送通知 值传给h5 //添加一个通知 等着需要传值给html时候就用这个通知...2.允许jsNitro库加载并使用(uivieqview限制) 3.支持更多html5特性 4.高达60fps滚动刷新频率以及内置手势 5.uiviewviewdelegate与uiwenview...JS代码才会执行,因为这个时候html页面已经注入到webView并且可以响应到对应方法 //oc调用h5,通过按钮点击事件进行响应 - (IBAction)btnClick:(UIButton *

2.3K100

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

WKWebView 几个不常用特性 WKWebview 加载过程性能指标图解 WKWebview 秒开实践及踩坑之路 今天分享这篇文章全面的介绍了 WKWebView,作者根据开发和使用经验从属性...网页导航代理,可以理解为网页生命周期事件循环。...WKWebView 属性 webView 属性 title: 网页标题,一般为 html 内容 URL: 网页URL地址,为最终加载地址 loading:...移除所有用户脚本 removeAllUserScripts 如果注入时机为在网页渲染前,那么网页加载完毕后执行移除脚本操作,则脚本运算结果并不会受影响,但是在网页加载完毕前移除脚本后,脚本将不会执行...无法执行导致崩溃,最好建议弹窗应该使用 UIView 设计。

4.6K30

UI篇- UIWebView使用大全

,这个协议包含一个必须实现方法,这个方法是提高App与web端交互关键,它可以直接接收到JS脚本转为OC或Swift对象--网上大神说没用过。)...自动检测网页电话号码,单击可以拨打 self.mywebView.detectsPhoneNumbers = YES; 5....OC给JS传参数,如何在OC获取到JS传递过来参数 如果要实现这样JS和OC数据交互,需要使用到一个第三方文件:WebViewJavascriptBridge 给web发消息 @property...如何消除Web Alert弹框中出现网址 ? 这里解决方法是通过使用 WKWebView 方法。...UIWebView iOS11使用。 ? UIWebView iOS 11上 当顶部 y值设为 0 时,是依然无法盖住UIStatusBar区域,但是滚动时就会出现问题了。

1.9K10

iOS监听H5页面goBack返回事件 & 网页监听APP返回键 (NavigationBackItemInjection)

1.1 UIWebView 监听H5页面goBack返回事件 1.2 WKWebView监听H5页面goBack返回事件 2.1 原理 2.2 例子 什么时候会触发这个返回事件?...截取当前显示屏幕WKWebView UINavigationBarDelegate NavigationType Disable all the '_blank' target in page's...target WKWebViewWKNavigationDelegate代理方法处理应用跳转 简单处理WKWebView加载新页面 WKWebView显示JS弹框 WKWebView调用js方法...监听 estimatedProgress 引言 需求:原生app使用WebView 控制器加载H5页面进行信用卡申请 问题:用户点击残忍放弃之后,没有关闭当前控制器 重现场景:用户点击返回按钮,暂时提示框...back-forward列表内容,相当于回到关闭之前看过详情界面。

5.6K21
领券