UDN-企业互联网技术人气社区

板块导航

浏览  : 727
回复  : 7

[原生js] 使用WebKit进行js与native交互

[复制链接]
芭芭拉的头像 楼主
发表于 2017-2-8 14:55:09 | 显示全部楼层 |阅读模式
  iOS8.0以后苹果推出了新框架WebKit,用于在app内加载网页时取代UIWebView。WebKit与UIWebView相比,占用内存更少,加载更快,支持更多html5的特性,并且有60fps的滚动刷新率和内置手势。本文用简单的例子介绍使用WebKit本地调用js代码及js调用本地方法。

  文中例子说明

  一个简单的网页
2.png

  在文本输入框中输入内容,点击网页中的按键,将信息传到本地并调用本地方法,弹出警告框
1.png

  点击OK后调用js代码将警告框中的内容显示到网页中
1.png

  例子中用到的js代码在 这里

  go on

  初始化WKWebView
  1. let wkConfig = WKWebViewConfiguration()
  2. //注意这里的`model`
  3. wkConfig.userContentController.add(self, name: "model")
  4. wkView = WKWebView(frame: CGRect(x: 0, y: 0, width: self.view.frame.width, height: self.view.frame.height), configuration: wkConfig)
  5. let htmlStr = try?String(contentsOfFile: Bundle.main.path(forResource: "demo", ofType: "html")!)
  6. wkView.loadHTMLString(htmlStr!, baseURL: nil)
  7. let request = URLRequest(url: URL.init(string: "http://7xlyw8.com1.z0.glb.clouddn.com/demo.html")!)
  8.     wkView.load(request)
  9. self.view.addSubview(wkView)
复制代码

  注意代码里的 model ,这里是向WebKit注册js调用的方法

  js向本地发送消息
  1. window.webkit.messageHandlers.model.postMessage(massage);
复制代码

  代码中的 model 是在app中使用 WKWebViewConfiguration 类中的方法注册

  实现WKScriptMessageHandler代理方法
  1. func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
  2.     let dic = message.body as! NSDictionary
  3.     showAlert(message: dic["yousay"] as! String)
  4. }

  5. func showAlert(message: String) {
  6.     let alert = UIAlertController(title: nil, message: message, preferredStyle: UIAlertControllerStyle.alert)
  7.     alert.addTextField { (textField) in
  8.         textField.placeholder = "回答"
  9.     }
  10.     alert.addAction(UIAlertAction.init(title: "OK", style: UIAlertActionStyle.default, handler: {[weak self](alertAction) in
  11.         let answer = alert.textFields?.first?.text
  12.         let js = "answer(\"\(answer!)\")"
  13.         self?.wkView.evaluateJavaScript(js, completionHandler: { (info, error) in
  14.             print(info)
  15.             print(error)
  16.         })
  17.     }))
  18.     self.present(alert, animated: true, completion: nil)
  19. }
复制代码

  • userContentController 方法中的参数 message 是js中 postMessage 传递的消息
  • wkView.evaluateJavaScrept 方法用来执行js代码

相关帖子

发表于 2017-2-8 14:55:40 | 显示全部楼层
纯粹路过,没任何兴趣,仅仅是看在老会员的份上回复一下
使用道具 举报

回复

发表于 2017-2-10 10:21:52 | 显示全部楼层
回帖支持下楼主,请眼熟我,我叫“狂妄称帝“
使用道具 举报

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部