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

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

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

import JavaScriptCore

@objc protocol  SwiftJavaScriptDelegate:JSExport{

func show()

func showAlert(_ str:String,_ msg:String)

}

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

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

@objc class SwiftJavaScriptModel:NSObject,SwiftJavaScriptDelegate{

func show() {

print("js调用我了")

}

func showAlert(_ 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.

//

import UIKit

import WebKit

import JavaScriptCore

class ViewController: UIViewController,UIWebViewDelegate{

var  context:JSContext!

override func viewDidLoad() {

super.viewDidLoad()

self.setupUI()

}

func setupUI( ) {

self.view.addSubview(webView)

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

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

self.webView.delegate=self

self.view.addSubview(btn)

}

lazy var webView:UIWebView={

let webView = UIWebView(frame:self.view.bounds)

return webView

}()

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

lazy var btn:UIButton={

let btn = 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)

return btn

}()

//swift调用js

func onClick()  {

let f = context?.objectForKeyedSubscript("swift")

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

}

func webViewDidFinishLoad(_ webView: UIWebView) {

let model = SwiftJavaScriptModel()

//获取context

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

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

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

let url = 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 ?? "")

}

}

override func didReceiveMemoryWarning() {

super.didReceiveMemoryWarning()

}

}

4.html代码

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

<script>

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

function swift(obj){

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

}

</script>

</head>

<body>

<h1>html</h1>

<button onclick="model.showAlert('参数1','参数2')">调用swift(有参数)代码</button>

<button onclick="model.show()">调用swift(无参数)代码</button>

</body>

</html>

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

IOS UIWebView与js的简单交互swift3版的更多相关文章

  1. iOS web与js的简单交互

    我们在封装网页的时候经常会遇到需要往网页里面的控件添加数据,但是怎么添加又成了难点.本人最近在开发的时候就遇到这样的事,解决之后,来和大家分享一下. //以必应网站为例 [web loadReques ...

  2. UIWebView与JS的深度交互

    我要实现这样一个需求:按照本地的CSS文件展示一串网络获取的带HTML格式的只有body部分的文本,需要自己拼写完整的 HTML.除此之外,还需要禁用获取的HTML文本中自带的 < img &g ...

  3. UIWebView与JS的深度交互-b

    要实现这样一个需求:按照本地的CSS文件展示一串网络获取的带HTML格式的只有body部分的文本,需要自己拼写完整的 HTML.除此之外,还需要禁用获取的HTML文本中自带的 < img > ...

  4. 史上最全的 UIWebview 的 JS 与 OC 交互

    来源:伯乐在线 - 键盘风筝 链接:http://ios.jobbole.com/89330/ 点击 → 申请加入伯乐在线专栏作者 其实一直想给大家整理一下JS与OC的交互,但是没有合适的机会,今天借 ...

  5. iOS 使用node js 搭建简单的本地服务器

    一.前提:基于iOS 项目 调用,使用了第三方框架NodeMobile.技术说明关键是 应用生命整个周期只能在应用启动时候开辟的一个线程里申请 一个 node  js 资源.如果终止了运行,重启是不支 ...

  6. iOS UIWebView中javascript与Objective-C交互、获取摄像头

    UIWebView是iOS开发中常用的一个视图控件,多数情况下,它被用来显示HTML格式的内容. 支持的文档格式 除了HTML以外,UIWebView还支持iWork, Office等文档格式: Ex ...

  7. UIWebView中JS与OC交互 WebViewJavascriptBridge的使用

    一.综述 现在很多的应用都会在多种平台上发布,所以很多程序猿们都开始使用Hybrid App的设计模式.就是在app上嵌入网页,只要写一份网页代码,就可以跑在不同的系统上.在iOS中,app多是通过W ...

  8. iOS UIWebView 中 js调用OC 打开相册 获取图片, OC调用js 将图片加载到html上

    线上html <!DOCTYPE html> <html> <head> <title>HTML中用JS调用OC方法</title> < ...

  9. iOS UIWebView与JavaScript的交互 相关资料

    UIWebView自适应宽度 iOS UIWebView中javascript与Objective-C交互.获取摄像头 iOS中JavaScript和OC交互 iOS与js交互,获取webview完整 ...

随机推荐

  1. Python基础-os、sys模块

    一,os模块import os ,sysos.system('ipconfig')#执行操作系统命令,获取不到返回结果 os.popen()#也可以执行操作系统命令,可以返回命令执行结果,但需要rea ...

  2. java支付宝开发-异常-01-"sub_code":"isv.invalid-app-id","sub_msg":"无效的AppID参数"

    一.现象 无论请求哪个接口都报这个错误 二.异常原因 后来检查了一下,发现是因为 我支付宝网关写错了.沙箱环境和正式环境 的支付宝网关不同,如下 //支付宝网关名-正式环境 //public stat ...

  3. ashx页面缓存

    当用户访问页面时,整个页面将会被服务器保存在内存中,这样就对页面进行了缓存.当用户再次访问该页,页面不会再次执行数据操作,页面首先会检查服务器中是否存在缓存,如果缓存存在,则直接从缓存中获取页面信息, ...

  4. ATL和vc++中的智能指针(分别是CComPtr和_com_ptr_t)

    一.智能指针的概念 智能指针是一个类,不是指针,智能指针在所包含的指针不再被使用时候会自动释放该所包含指针所占用的系统资源,而不用手动释放. 原理:智能指针封装了包含指针的AddRef()函数和Rel ...

  5. Nginx+ffmpeg的HLS开源服务器搭建配置及开发详

    本文概述: 至目前为止,HLS 是移动平台上非常重要并十分流行的流媒体传输协议.做移动平台的流媒体开发,不知道它不掌握它 ,真是一大遗憾.而HLS的平台搭建有一定的难度,本文针对对该方向有一定了解的朋 ...

  6. 交互式 shell 玩转 Python

    Python 编程语言已经成为 IT 中使用的最流行的语言之一.成功的一个原因是它可以用来解决各种问题.从网站开发到数据科学.机器学习到任务自动化,Python 生态系统有丰富的框架和库.本文将介绍 ...

  7. flume 配置与使用

    1.下载flume,解压到自建文件夹 2.修改flume-env.sh文件 在文件中添加JAVA_HOME 3.修改flume.conf 文件(原名好像不叫这个,我自己把模板名改了) 里面我自己配的( ...

  8. puppet前端管理工具foreman-proxy bind 127.0.0.1:8443问题解决

    最近在玩foreman,发现部署foreman-proxy的时候,总是出现8443bind在127.0.0.1端口,导致无法访问的情况. 如下图: 经过strace -o log.txt bin/sm ...

  9. 【转】Pro Android学习笔记(十八):用户界面和控制(6):Adapter和AdapterView

    目录(?)[-] SimpleCursorAdapter 系统预置的layout ArrayAdapter 动态数据增插删排序 自定义TextView风格 其他Adapter AdapterView不 ...

  10. mongodb-help功能

    mongo-help功能 version:2.6.12下面是示例: > help db.help()                  help on db methods       db.m ...