ios UIWebView与js的简单交互swift3版

简介: 在开发过程中,我们可能遇到ios代码与js交互的情况,本人第一次使用遇到了很多坑,这里纪录一下,方便自己,也方便需要的人。1.第一步先建一个接口(协议)并继承JSExport这里实现两个方法提供给js调用的方法importJavaScriptCo...

在开发过程中,我们可能遇到ios代码与js交互的情况,本人第一次使用遇到了很多坑,这里纪录一下,方便自己,也方便需要的人。

1.第一步先建一个接口(协议)并继承JSExport

这里实现两个方法提供给js调用的方法

importJavaScriptCore

@objcprotocolSwiftJavaScriptDelegate:JSExport{

funcshow()

funcshowAlert(_str:String,_msg:String)

}

2.第二步需要写一个类去实现上一步的接口(协议)(注意:1.这里必须要继承nsobject否则会报错,2.如果要传参数的话一定要写成

类似与 funcshowAlert(_str:String,_msg:String),_ str:String 这个“_”一定要加不然无法调用(调用无效果),在swift3.0中就这样,其他版本没有测试就不清楚了。

@objcclassSwiftJavaScriptModel:NSObject,SwiftJavaScriptDelegate{

funcshow() {

print("js调用我了")

}

funcshowAlert(_str:String,_msg:String){

print("js调用我了:",str,msg)

}

}

3.开始在控制器中测试

//

//ViewController.swift

//WEBJSTest

//

//Created by admin on 17/8/5.

//Copyright © 2017年tdin360. All rights reserved.

//

importUIKit

importWebKit

importJavaScriptCore

classViewController:UIViewController,UIWebViewDelegate{

varcontext:JSContext!

overridefuncviewDidLoad() {

super.viewDidLoad()

self.setupUI()

}

funcsetupUI( ) {

self.view.addSubview(webView)

leturl =Bundle.main.path(forResource:"index", ofType:"html")

self.webView.loadRequest(URLRequest(url:URL(string:url!)!))

self.webView.delegate=self

self.view.addSubview(btn)

}

lazyvarwebView:UIWebView={

letwebView =UIWebView(frame:self.view.bounds)

returnwebView

}()

//用于点击调用js的按钮

lazyvarbtn:UIButton={

letbtn =UIButton(frame:CGRect(x:0,y:300,width:100,height:40))

btn.backgroundColor=UIColor.blue

btn.setTitle("调用js", for: .normal)

btn.addTarget(self, action:#selector(onClick), for: .touchUpInside)

returnbtn

}()

//swift调用js

funconClick(){

letf =context?.objectForKeyedSubscript("swift")

_=f?.call(withArguments: [["name":"admin","pass":"fdsfds"]])

}

funcwebViewDidFinishLoad(_webView:UIWebView) {

letmodel =SwiftJavaScriptModel()

//获取context

context=self.webView.value(forKeyPath:"documentView.webView.mainFrame.javaScriptContext")as!JSContext

//这里注册一个标示给js访问

context.setObject(model, forKeyedSubscript:"model"as(NSCopying&NSObjectProtocol)!)

leturl =Bundle.main.url(forResource:"index", withExtension:"html")

context.evaluateScript(try?String(contentsOf: url!, encoding:String.Encoding.utf8))

context.exceptionHandler= {

(context, exception)in

print("exception错误@", exception ??"")

}

}

overridefuncdidReceiveMemoryWarning() {

super.didReceiveMemoryWarning()

}

}


4.html代码

<html>

<meta charset="utf-8">

<title>ios js交互测试</title>

<head>

<script>

//这个提交给swift调用并传参数

 function swift(obj){

alert("swift调用我了"+obj["name"]+"--"+obj["pass"]);

            }

</script>

</head>

<body>

<button onclick="model.showAlert('参数1','参数2')">js调用swift有参的方法</button>

<button onclick="model.show()" >js调用swift无参数方法</button>

</body>

</html> 

整个过程就是这样的,这里贴了源码,如果遇到问题欢迎留言,有什么更好的方法欢迎一起交流。

目录
相关文章
|
12天前
|
数据采集 人工智能 自然语言处理
Midscene.js:AI 驱动的 UI 自动化测试框架,支持自然语言交互,生成可视化报告
Midscene.js 是一款基于 AI 技术的 UI 自动化测试框架,通过自然语言交互简化测试流程,支持动作执行、数据查询和页面断言,提供可视化报告,适用于多种应用场景。
123 1
Midscene.js:AI 驱动的 UI 自动化测试框架,支持自然语言交互,生成可视化报告
|
2月前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
61 5
|
2月前
|
JSON 前端开发 JavaScript
聊聊 Go 语言中的 JSON 序列化与 js 前端交互类型失真问题
在Web开发中,后端与前端的数据交换常使用JSON格式,但JavaScript的数字类型仅能安全处理-2^53到2^53间的整数,超出此范围会导致精度丢失。本文通过Go语言的`encoding/json`包,介绍如何通过将大整数以字符串形式序列化和反序列化,有效解决这一问题,确保前后端数据交换的准确性。
58 4
|
2月前
|
安全 数据处理 Swift
深入探索iOS开发中的Swift语言特性
本文旨在为开发者提供对Swift语言在iOS平台开发的深度理解,涵盖从基础语法到高级特性的全面分析。通过具体案例和代码示例,揭示Swift如何简化编程过程、提高代码效率,并促进iOS应用的创新。文章不仅适合初学者作为入门指南,也适合有经验的开发者深化对Swift语言的认识。
60 9
|
2月前
|
设计模式 前端开发 JavaScript
揭秘!前端大牛们如何巧妙利用JavaScript,打造智能交互体验!
【10月更文挑战第30天】前端开发领域充满了无限可能与创意,JavaScript作为核心语言,凭借强大的功能和灵活性,成为打造智能交互体验的重要工具。本文介绍前端大牛如何利用JavaScript实现平滑滚动、复杂动画、实时数据更新和智能表单验证等效果,展示了JavaScript的多样性和强大能力。
65 4
|
3月前
|
存储 JavaScript 前端开发
【JavaScript】网页交互的灵魂舞者
本文介绍了 JavaScript 的三种引入方式(行内、内部、外部)和基础语法,包括变量、数据类型、运算符、数组、函数和对象等内容。同时,文章还详细讲解了 jQuery 的基本语法和常用方法,如 `text()`、`html()`、`val()`、`attr()` 和 `css()` 等,以及如何插入和删除元素。通过示例代码和图解,帮助读者更好地理解和应用这些知识。
42 1
【JavaScript】网页交互的灵魂舞者
|
2月前
|
安全 API Swift
探索iOS开发中的Swift语言之美
【10月更文挑战第23天】在数字时代的浪潮中,iOS开发如同一艘航船,而Swift语言则是推动这艘船前进的风帆。本文将带你领略Swift的独特魅力,从语法到设计哲学,再到实际应用案例,我们将一步步深入这个现代编程语言的世界。你将发现,Swift不仅仅是一种编程语言,它是苹果生态系统中的一个创新工具,它让iOS开发变得更加高效、安全和有趣。让我们一起启航,探索Swift的奥秘,感受编程的乐趣。
|
3月前
|
安全 Swift iOS开发
探索iOS开发中的Swift语言之美
在数字时代的浪潮中,移动应用已成为日常生活的延伸。本文将深入探讨iOS平台上的Swift编程语言,揭示其背后的设计哲学、语法特性以及如何利用Swift进行高效开发。我们将通过实际代码示例,展示Swift语言的强大功能和优雅简洁的编程风格,引导读者理解并运用Swift解决实际问题。
|
4月前
|
安全 Swift iOS开发
探索iOS开发之旅:Swift语言的魅力与挑战
【9月更文挑战第21天】在这篇文章中,我们将一起潜入iOS开发的海洋,探索Swift这门现代编程语言的独特之处。从简洁的语法到强大的功能,Swift旨在让开发者能够以更高效、更安全的方式构建应用程序。通过实际代码示例,我们会深入了解Swift如何简化复杂任务,并讨论它面临的挑战和未来的发展方向。无论你是初学者还是有经验的开发者,这篇文章都将为你提供新的视角和知识。
53 4
|
4月前
|
安全 编译器 Swift
探索iOS开发之旅:Swift编程语言的魅力与挑战
【9月更文挑战第5天】在iOS应用开发的广阔天地中,Swift作为苹果官方推荐的编程语言,以其简洁、高效和安全的特点,成为了开发者的新宠。本文将带领你领略Swift语言的独特魅力,同时探讨在实际开发过程中可能遇到的挑战,以及如何克服这些挑战,成为一名优秀的iOS开发者。