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

wkwebview 监听js

WKWebView 是苹果提供的用于在 iOS 应用中嵌入网页内容的组件,它是 WebKit 框架的一部分。通过 WKWebView,开发者可以在应用中展示网页内容,并且可以与网页中的 JavaScript 进行交互。

基础概念

WKWebView 提供了与 JavaScript 交互的能力,允许 iOS 应用执行 JavaScript 代码,并且可以接收 JavaScript 发送的消息。这种交互是通过 WKScriptMessageHandler 接口实现的,它允许应用注册一个或多个消息处理程序来接收来自网页的消息。

相关优势

  1. 性能优化:WKWebView 相比于 UIWebView 在性能上有显著提升,特别是在内存管理和页面加载速度方面。
  2. 稳定性增强:WKWebView 的架构更加模块化,使得应用的稳定性得到提高。
  3. 安全性:WKWebView 提供了更好的沙盒环境,有助于防止跨站脚本攻击(XSS)和其他安全威胁。

类型

  • WKScriptMessageHandler:用于处理来自网页的 JavaScript 消息。
  • WKNavigationDelegate:用于处理网页导航相关的事件。
  • WKUIDelegate:用于处理网页中的用户界面元素,如弹窗等。

应用场景

  • 混合应用开发:在原生应用中嵌入网页内容,实现部分网页功能。
  • 单页应用(SPA):加载并运行复杂的单页应用程序。
  • 动态内容加载:根据用户交互动态加载不同的网页内容。

示例代码

以下是一个简单的示例,展示如何在 Swift 中设置 WKWebView 并监听来自 JavaScript 的消息:

代码语言:txt
复制
import UIKit
import WebKit

class ViewController: UIViewController, WKScriptMessageHandler {
    var webView: WKWebView!

    override func viewDidLoad() {
        super.viewDidLoad()
        
        let config = WKWebViewConfiguration()
        config.userContentController.add(self, name: "callbackHandler")
        
        webView = WKWebView(frame: self.view.frame, configuration: config)
        self.view.addSubview(webView)
        
        if let url = URL(string: "https://example.com") {
            let request = URLRequest(url: url)
            webView.load(request)
        }
    }

    func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
        if message.name == "callbackHandler", let messageBody = message.body as? String {
            print("Received message from JS: \(messageBody)")
        }
    }
}

在网页端,你可以使用以下 JavaScript 代码发送消息到 iOS 应用:

代码语言:txt
复制
window.webkit.messageHandlers.callbackHandler.postMessage("Hello from JavaScript!");

遇到的问题及解决方法

问题:WKWebView 中的 JavaScript 消息没有被正确接收。

原因

  • 消息处理程序可能没有正确注册。
  • JavaScript 调用 postMessage 的方式可能有误。
  • 网页加载完成之前尝试发送消息。

解决方法

  1. 确保在 WKWebViewConfiguration 中正确添加了消息处理程序。
  2. 检查 JavaScript 中 postMessage 的调用是否正确。
  3. 确保在网页完全加载后再尝试发送消息,可以通过 WKNavigationDelegate 的方法来确认加载状态。
代码语言:txt
复制
func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
    // 网页加载完成后的处理
}

通过以上步骤,你应该能够解决 WKWebView 监听 JavaScript 消息的问题。

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

相关·内容

  • WKWebView的使用与JS交互详细解读

    看网上关于它的博客也是有许多的了,从各个方面总结一下这个WKWebView看网上说它主要是为了和JS做好交互产生的,我们也会相应的尝试一下。就先从它基本的说起!...一:和UIWebView相比它的不同处 1:和JS更好的做交互,也支持H5的一些新特性 2:加载进度条(下面会演示) 3:性能高,加载变得更快更可靠 二:从加载一张网页开始 1:使用这个WKWebView...有一个  estimatedProgress 属性,利用它来监听加载的进度,下面的进度打印出来了,但具体的进度条就没有写出来,你们可以自己写一个 UIProgressView 放在导航栏的下面。...2.JS端调用alert时所传的数据可以通过message,打印message信息读取出JS端给你的信息。...// 在原生得到结果后,需要回调给JS,通过completionHandler 回调给JS // completionHandler 回调的参数和返回值都是空 -(void)webView:(WKWebView

    3.1K70

    JS监听中文输入

    在做第六个项目(根据输入框实时调用AJAX古诗匹配)时,当我们输入中文拼音,还在拼音字符状态未选择成中文时,一直在执行我编写的事件监听处理函数(当输入框里的值有变化时执行此函数, 调用AJAX在页面显示数据里包含这些字的古诗...而我想要的是在我们输入拼音未完成中文选择时,不让其执行我们的监听处理函数, 只有选择完中文后才去执行调用AJAX判断有没有包含输入的这些字的古诗。...="this_input" placeholder="中文输入未完成时不执行事件" /> js...false); console.log('完成中文输入'); }); 当我们开始进行input的输入改变了input框里的值时,js...会监听到input propertychange事件, 执行判断(一开始时$(this).prop('cnStart')的值我们没有定义,为undefined, 在监听了compositionstart

    9.5K20

    WKWebView

    2,WKWebView拥有与Safari中相同的Nitro JavaScript引擎,大大提高了页面JS执行速度;但是UIWebView不支持Nitro JavaScript引擎,所以加载较慢。...5,WKWebView可以和JS直接互调函数,交互更方便;而UIWebView则需要依靠WebViewJavaScriptBridge第三方库来协助处理与JS的交互,实现起来较繁琐。...显示加载进度条 我们可以通过监听WKWebView的estimatedProgress属性值来实现一个加载进度条,而UIWebView只能是通过timer事件做一个假的加载进度条。..., 6,上面讲到,我们可以使用KVO来监听WKWebView的estimatedProgress属性值的变化来实现加载进度条,那么WKWebView中还有那些属性值的变化也是可以被KVO监听到的呢?...我们可以通过JSCore或者JSBridge来在native中执行JS代码,并且在JS中去回调Native的相关函数。 现在很火热的跨平台以及热修复技术,都是基于JS与Native通信来实现的。

    6K20

    iOS开发中的WKWebView与JS的交互

    /u010105969/article/details/53189934),可当时用来展示网页的控件是UIWebView,而在iOS8之后苹果推出了WKWebView,此控件也能用来显示网页,可与JS的交互却与...在点击前三个按钮的时候会调用方法: // 警告框 - (void)webView:(WKWebView *)webView runJavaScriptAlertPanelWithMessage:(NSString...如果点击第四个conform按钮会调用方法: // 确认框 - (void)webView:(WKWebView *)webView runJavaScriptConfirmPanelWithMessage...如果点击最后一个input按钮会调用方法: // 输入框 - (void)webView:(WKWebView *)webView runJavaScriptTextInputPanelWithPrompt...注意:在利用UIWebView展示网页的时候我们如果要想与JS进行交互那么我们就得获取JS代码中的方法名,而我们在使用WKWebView的时候就不用了。

    2.3K20
    领券