首页
学习
活动
专区
工具
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...iPhone的UIWebView(iOS2.0-12.0 ),WKWebView(iOS8.0+,macOS10.10+),Android的WebView 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.2K00
  • 【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.7K20

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

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

    5.7K00

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

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

    2.8K10

    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.7K193

    iOS的WebView——WKWebView

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

    3.6K20

    iOS iOS与html进行交互

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

    2.4K100

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

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

    2.9K40

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

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

    4.9K30

    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区域的,但是滚动时就会出现问题了。

    2K10

    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 在WKWebView的WKNavigationDelegate代理方法中处理应用跳转 简单的处理WKWebView加载新页面 WKWebView显示JS弹框 WKWebView调用js方法...监听 estimatedProgress 引言 需求:原生app使用WebView 控制器加载H5页面进行信用卡申请 问题:用户点击残忍放弃之后,没有关闭当前控制器 重现场景:用户点击返回按钮,暂时提示框...back-forward列表中的内容,相当于回到关闭的之前看过的详情界面。

    6.1K21
    领券