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

ios前端和后台js交互

在iOS开发中,前端(通常是Swift或Objective-C编写的UIKit或SwiftUI视图)与后台JavaScript代码的交互可以通过多种方式实现,最常见的是使用WKWebViewSFSafariViewController中的JavaScript桥接。

基础概念

  1. WKWebView: 是iOS中用于展示网页内容的控件,它提供了与网页内容交互的能力。
  2. JavaScript桥接: 允许原生代码与网页中的JavaScript代码相互调用。

优势

  • 用户体验: 可以在应用中嵌入复杂的网页内容,同时保持原生应用的流畅性。
  • 开发效率: 可以复用现有的网页资源和代码。
  • 灵活性: 前后端可以独立开发和更新,通过桥接进行通信。

类型

  1. 原生调用JavaScript: 使用WKWebViewevaluateJavaScript(_:completionHandler:)方法。
  2. JavaScript调用原生: 通过WKScriptMessageHandler协议实现。

应用场景

  • 混合应用开发: 当应用需要展示网页内容,同时又需要与原生功能交互时。
  • 快速迭代: 对于需要频繁更新的UI部分,可以使用网页来实现,减少原生开发的成本。

示例代码

原生调用JavaScript

代码语言:txt
复制
import WebKit

class ViewController: UIViewController {
    var webView: WKWebView!

    override func viewDidLoad() {
        super.viewDidLoad()
        
        webView = WKWebView(frame: self.view.frame)
        self.view.addSubview(webView)
        
        if let url = URL(string: "https://example.com") {
            let request = URLRequest(url: url)
            webView.load(request)
        }
    }

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

JavaScript调用原生

首先,需要在创建WKWebView时设置WKScriptMessageHandler

代码语言: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: 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 == "nativeApp", let messageBody = message.body as? String {
            print("Received message from JavaScript: \(messageBody)")
        }
    }
}

然后,在网页的JavaScript代码中,可以通过window.webkit.messageHandlers.nativeApp.postMessage来发送消息:

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

解决问题的方法

如果在交互过程中遇到问题,可以采取以下步骤进行排查:

  1. 检查控制台日志: 使用Xcode的控制台查看是否有错误信息。
  2. 确认消息名称: 确保原生代码和JavaScript代码中使用的消息名称一致。
  3. 检查网页加载状态: 确保在网页完全加载后再尝试执行JavaScript代码。
  4. 调试JavaScript: 使用Safari的开发者工具来调试网页中的JavaScript代码。

通过以上方法,可以有效地实现iOS前端与后台JavaScript代码的交互,并解决可能出现的问题。

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

相关·内容

iOS与JS的交互

iOS和JS的交互看似两个问题,其实要解决的问题只有一个,那就是JS如何调用native方法。...= NSNotFound) { /* 1.检测到链接中包含有特殊字段,客户端要接受响应并做后续处理这就相当于js调起了iOS, 2.在真实的使用时,客户端需要和...h5协调,双方需要统一监听的字段 3.参数问题:如果此时的交互需要传递参数,参数也可以放在链接里,同样通过识别字符串的方法来获取 */ //第二步:拿到链接字符串的后续部分...,JS可以直接用oc方法名来调用oc方法,这样就类似于安卓的addJavaScriptInterface方法,在使用此方法时仍然要导入JavaScriptCore //第一步:创建一个用与JS交互的类JSHandler...参考链接: http://www.cocoachina.com/ios/20160127/15105.html http://www.jianshu.com/p/2c7a53713e13

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

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

    3.9K30

    iOS小技能:WKWebView与JS的交互

    前言 由于目前UIWebView 已经被抛弃了,因此推荐使用WKWebView的WKScriptMessageHandler实现iOS与JS交互 WKWebView是Apple在iOS8推出的Webkit...框架中的负责网页的渲染与展示的类,相比UIWebView速度更快,占用内存更少,支持更多的HTML特性 I JS调用iOS 使用例子:点击页面图片,调用iOS方法进行图片放大显示 1.1 JS代码: window.webkit.messageHandlers.openImage.postMessage...但只有在整个webView加载完成之后调用此方法才会有响应 2.1 执行JS iOS使用WKWebView的-evaluateJavaScript:completionHandler:方法执行拼接好的JS...see also iOS利用JSExport协议实现与JS的交互 & android 和js的交互 https://blog.csdn.net/z929118967/article/details/77963082...同层渲染不仅解决了原生组件的层级问题,同时也让原生组件有了更丰富的展示和交互的能力。

    7.3K30

    前端js,后台python实现RSA非对称加密

    js加密时自动是base64加密) text = cipher.decrypt(base64.b64decode(cipher_text), random_generator) print text 前后台共同完成...RSA非对称加密:大致思路为  first:后台生产公钥私钥,next:后台把公钥给前台,than:前台用公钥加密并传送给后台,finally:后台使用秘钥解密。...   --打开master-public.pem此文件,复制里面内容到前端(具体粘贴位置在下一步) than:前台用公钥加密并传送给后台 #导入js,如果需要base64文件,一定要在导入加密.../details/58595840解决方法 js/plugin/base64.js"> js/plugin/jsencrypt.min.js...本功能模块中前端RSA加密过程中没有使用OPEN_SSL生成models方式进行加密(运维部署时简洁方便,并且用那种方式,传输的为16进制数据);并且前端加密数据为base64位传输到后台;后台需要导入的包等在最上面

    4.1K70
    领券