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

ios开发调用js

在iOS开发中,调用JavaScript通常是通过WKWebViewSFSafariViewController来实现的,这是iOS提供的用于展示网页内容的组件,它们都支持与JavaScript的交互。

基础概念

  1. WKWebView:是iOS 8引入的一个用于在iOS应用中显示网页内容的控件,它比旧的UIWebView性能更好,内存占用更低。
  2. JavaScriptCore:是iOS上的一个JavaScript引擎,它允许你在Objective-C或Swift代码中执行JavaScript代码,并提供了与JavaScript对象交互的能力。

相关优势

  • 用户体验:可以在应用内直接展示网页内容,提供无缝的用户体验。
  • 灵活性:可以动态地加载和执行网页内容,包括调用网页中的JavaScript函数。
  • 功能扩展:通过调用JavaScript,可以扩展应用的功能,比如集成第三方网页服务。

应用场景

  • 在应用内嵌入网页内容,如新闻、帮助文档等。
  • 与网页中的JavaScript代码进行交互,实现复杂的功能。
  • 使用网页技术(HTML5、CSS3、JavaScript)来快速开发应用的部分界面。

调用方法

使用WKWebView时,可以通过WKScriptMessageHandler协议来接收JavaScript发送的消息,也可以通过evaluateJavaScript(_:completionHandler:)方法来执行JavaScript代码。

示例代码(Swift):

代码语言:txt
复制
import WebKit

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

    override func viewDidLoad() {
        super.viewDidLoad()

        let contentController = WKUserContentController()
        contentController.add(self, name: "nativeApp")

        let config = WKWebViewConfiguration()
        config.userContentController = contentController

        webView = WKWebView(frame: .zero, configuration: config)
        view.addSubview(webView)

        if let url = URL(string: "https://yourwebsite.com") {
            webView.load(URLRequest(url: url))
        }
    }

    // 接收JavaScript发送的消息
    func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
        if message.name == "nativeApp", let messageBody = message.body as? String {
            print("Received message from JavaScript: \(messageBody)")
        }
    }

    // 调用JavaScript代码
    func callJavaScript() {
        let jsCode = "alert('Hello from Swift!');"
        webView.evaluateJavaScript(jsCode) { (result, error) in
            if let error = error {
                print("Error calling JavaScript: \(error)")
            } else {
                print("JavaScript executed successfully")
            }
        }
    }
}

在网页端,你可以通过window.webkit.messageHandlers.nativeApp.postMessage来发送消息给Swift代码:

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

常见问题及解决方法

  • 消息不接收:确保WKWebView配置了正确的WKUserContentController,并且JavaScript代码中的消息处理器名称与Swift代码中注册的名称一致。
  • JavaScript执行错误:检查JavaScript代码是否有语法错误,或者是否在页面加载完成之前调用了JavaScript代码。
  • 性能问题:避免在主线程中执行复杂的JavaScript代码,可以使用evaluateJavaScript(_:completionHandler:)的异步特性来避免阻塞UI。

确保你的WKWebView已经正确加载了网页内容,并且JavaScript代码是在页面加载完成后执行的,这样可以避免很多常见的问题。

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

相关·内容

iOS开发--performSelector调用和直接调用区别

下面两段代码都在主线程中运行,我们在看别人代码时会发现有时会直接调用,有时会利用performSelector调用,今天看到有人在问这个问题,我便做一下总结, [delegate imageDownloader...didFinishWithImage:)withObject:self withObject:image]; 1、performSelector是运行时系统负责去找方法的,在编译时候不做任何校验;如果直接调用编译是会自动校验...如果imageDownloader:didFinishWithImage:image:不存在,那么直接调用 在编译时候就能够发现(借助Xcode可以写完就发现),但是使用performSelector的话一定是在运行时候才能发现...(此时程序崩溃);Cocoa支持在运行时向某个类添加方法,即方法编译时不存在,但是运行时候存在,这时候必然需要使用performSelector去调用。...而使用performSelector时候,可以不用import头文件包含方法的对象,直接用performSelector调用即可。 代码如下: ? ? ? 打印结果: ?

2K60
  • iOS下JS与原生OC互相调用(总结)

    iOS开发免不了要与UIWebView打交道,然后就要涉及到JS与原生OC交互,今天总结一下JS与原生OC交互的两种方式。...关于这种方式调用OC方法,唐巧早期有篇文章有过介绍: 关于UIWebView和PhoneGap的总结 方式二 在iOS 7之后,apple添加了一个新的库JavaScriptCore,用来做JS交互,...iOS下JS与OC互相调用(一)--UIWebView 拦截URL iOS下JS与OC互相调用(二)--WKWebView 拦截URL iOS下JS与OC互相调用(三)--MessageHandler...iOS下JS与OC互相调用(四)--JavaScriptCore iOS下JS与OC互相调用(五)--UIWebView + WebViewJavascriptBridge iOS下JS与OC互相调用...(六)--WKWebView + WebViewJavascriptBridge iOS下JS与OC互相调用(七)--Cordova 基础 iOS下JS与OC互相调用(八)--Cordova详解+实战

    5K30

    iOS下JS与OC互相调用(一)--UIWebView 拦截URL

    3.利用系统库JavaScriptCore,来做相互调用。(iOS 7推出的) 4.利用第三方库WebViewJavascriptBridge。...我去年也写过一个相互调用的总结:iOS下JS与原生OC互相调用(总结)。 写的比较粗糙,因此准备新开一个目录专题来记录JS 与原生交互的处理方式。...原因是因为要兼容iOS 6。 1.创建UIWebView,并加载本地HTML。 加载本地HTML的目的是便于自己写JS调用做测试,最终肯定还是加载网络HTML。...答:因为有的JS调用是需要OC 返回结果到JS的。...OC调用JS方法 关于将OC 执行结果返回给JS 需要注意的是: 如果回调执行的JS 方法带参数,而参数不是字符串时,不要加单引号,否则可能导致调用JS 方法失败。

    3.6K40

    Phonegap 之 iOS银联在线支付(js调用ios端银联支付控件)

    Phonegap项目,做支付的时候,当把网站打包到ios或android端成app后,在app上通过wap调用银联在线存在一个问题: 就是当从银联支付成功后,再从服务器返回到app客户端就很难实现。...所以这里就必须借助Phonegap的插件js脚本,通过js调用ios端或android端原生代码,然后再通过原生代码调用银联支付专门为移动客户端准备的sdk,去进行支付。...端代码,js脚本调用OC代码需要Phonegap提供的一个脚本插件支持: cordova.js (下载链接)   创建一个类Plugin, 继承Phonegap插件类:CDVPlugin,    还需要在配置文件...config.xml中配置一下,才能使用js调用Plugin类里面的方法 ?...@end 4、支付成功后,ios 控制器收到银联的支付结果,调用js脚本方法,处理后面逻辑:  // ios支付成功后,收到银联通知跳转到其他页面去, info参数有三种状态:success, fail

    3.1K20

    iOS开发中OC与JS交互(UIWebView)

    https://blog.csdn.net/u010105969/article/details/53189934 之前虽然做过OC与JS交互,但都是比较简单的效果:点击网页中的图片,然后进行图片浏览...现在对OC与JS交互这块也不是很清楚,今天只是把之前的代码贴过来以便今后更好地理解OC与JS的交互。 首先需要往网页中注入JS。注入JS的工作是后台做的。...可好像安卓和iOS还是有区别的,因为之前安卓那边可以实现与JS的交互,而我这边却不能。后台后台修改了代码,我这边也就可以进行交互了。...和JavaScript交互的那些事 点击调用原生代码并传递参数...附上利用WKWebView加载网页OC与JS的交互的地址: http://mp.blog.csdn.net/postedit/53541088

    3.9K30
    领券