iOS与HTML5交互方法总结(修正)

落日映苍穹つ 2022-04-06 02:48 193阅读 0赞

**摘要**

**看了不少别人写的博客或者论坛,关于****iOS****与HTML5交互方法大概主要有5种方式:**

**1. 利用WKWebView进行交互(系统API)**

**2. 利用UIWebView进行交互(系统API)**

**3. 苹果的javascriptcore.framework框架; **

**4. 跨平台cordova框架;**

**5. oc第三方WebViewJavascriptBridge**

**关于WKWebView的介绍在前篇文章已经有了比较详细的介绍了。**

**前篇文章地址:****http://blog.csdn.net/baihuaxiu123/article/details/51286109**** **

**今天主要介绍前两种,后三种大家有兴趣的自己查看资料.**

**下面我们来介绍第一种方式:**

# **1. 利用WKWebView进行交互** #

### **效果图** ###

**![300][] **

** **

**通过本篇文章，至少可以学习到：**

**1. OC如何给JS注入对象及JS如何给iOS发送数据**

**2. JS调用alert、confirm、prompt时，不采用JS原生提示，而是使用iOS原生来实现**

**3. 如何监听web内容加载进度、是否加载完成**

**4. 如何通过js来跳转到iOS指定的页面上**

**如何处理去跨域问题**

### **创建配置类** ###

**在创建WKWebView之前，需要先创建配置对象，用于做一些配置： **  
![20160518150345893][]

### ** ** ###

### **配置偏好设置** ###

**偏好设置也没有必须去修改它，都使用默认的就可以了，除非你真的需要修改它： **  
![20160518144447339][]

### ** ** ###

### **配置web内容处理池** ###

**其实我们没有必要去创建它，因为它根本没有属性和方法：**

**eb内容处理池，由于没有属性可以设置，也没有方法可以调用，不用手动创建.**

![20160518144638789][]

### ** ** ###

### **配置Js与Web内容交互** ###

**WKUserContentController是用于给JS注入对象的，注入对象后，JS端就可以使用：**

**来调用发送数据给iOS端，比如： **  
![20160518150239689][]

**AppModel就是我们要注入的名称，注入以后，就可以在JS端调用了，传数据统一通过body传，可以是多种类型，只支持NSNumber, NSString, NSDate, NSArray,NSDictionary, and NSNull类型。 **

**下面我们配置给JS的main frame注入AppModel名称，对于JS端可就是对象了： **  
![20160518144806385][]

** **

**当JS通过AppModel发送数据到iOS端时，会在代理中收到： **  
![20160518144938981][]

**所有JS调用iOS的部分，都只可以在此处使用哦。当然我们也可以注入多个名称（JS对象），用于区分功能。**

** **

### **创建WKWebView** ###

![20160518145102843][]

### ** ** ###

### **加载H5页面** ###

![20160518145203092][]

### ** ** ###

### **配置代理** ###

**如果需要处理web导航条上的代理处理，比如链接是否可以跳转或者如何跳转，需要设置代理；**

** **

**而如果需要与在JS调用alert、confirm、prompt函数时，通过JS原生来处理，而不是调用JS的alert、confirm、prompt函数，那么需要设置UIDelegate，在得到响应后可以将结果反馈到JS端： **  
![20160518145250110][]

### ** ** ###

### **添加对WKWebView属性的监听** ###

![20160518145351862][]

**然后我们就可以实现KVO处理方法，在loading完成时，可以注入一些JS到web中。**

** **

**这里只是简单地执行一段web中的JS函数： **  
![20160518145534848][]

### ** ** ###

### **WKUIDelegate** ###

**与JS原生的alert、confirm、prompt交互，将弹出来的实际上是我们原生的窗口，而不是JS的。**

** **

**在得到数据后，由原生传回到JS： **  
**![20160518151600563][]  
![20160518151909024][]  
![20160518152131930][]**

### **WKNavigationDelegate** ###

**如果需要处理web导航操作，比如链接跳转、接收响应、在导航开始、成功、失败等时要做些处理，就可以通过实现相关的代理方法： **  
**![20160518165950794][]  
![20160518170148125][]  
![20160518170359912][]  
![20160518171934289][]**** **

### **JS端代码** ###

**![20160518172200683][]  
![20160518172227372][]**

# ** ** #

# **2. 利用UIWebView进行交互** #

**大家都知道UIWebView是最常见的SDK,平时项目中我们用的也比较多,它有一个stringByEvaluatingJavaScriptFromString方法可以将****JavaScript****嵌入页面中。**

** **

**通过这个方法我们可以在iOS中与UIWebView中的网页元素交互.下面就来详细介绍一下它的具体操作步骤.首先我们来加载一个网页,看看他的源码: **  
![20160614224104446][]

### ** ** ###

### **创建UIWebView** ###

![20160614221800202][]

### ** ** ###

### **加载URL** ###

**![20160614221901246][]**

**效果图   
![300 1][]**

### ** ** ###

### **获取当前页面的URL** ###

![20160614222018700][]

### ** ** ###

### **获取页面的title** ###

![20160614223220777][]

### ** ** ###

### **修改HTML元素标签的值** ###

![20160614230440253][]

### ** ** ###

### **插入js代码** ###

![20160614230745598][]

### ** ** ###

### **提交表单** ###

![20160614230957109][]

** **

**下载源代码：**** **

**http://download.csdn.net/detail/baihuaxiu123/9524216**

** **

**原文链接：http://blog.csdn.net/baihuaxiu123/article/details/51674726**

**链接：**[http://www.cnblogs.com/tig666666/p/5709320.html][http_www.cnblogs.com_tig666666_p_5709320.html]

[300]: /images/20220406/6a35bf22bb7643db8f270b24ccdcec96.png
[20160518150345893]: /images/20220406/502753d01ceb47d798a3a0c050897ea3.png
[20160518144447339]: /images/20220406/dfce2a86880d4e5295343102230dd43e.png
[20160518144638789]: /images/20220406/bb1177f14b3b42cca25c260ffb871ce9.png
[20160518150239689]: /images/20220406/b540998368ea4d5d8f55eb4b0c285684.png
[20160518144806385]: /images/20220406/6bf5ae15118f4b929f2ad5318cb8f713.png
[20160518144938981]: /images/20220406/0df3a6ec11ab449bace03d6ca0fb1081.png
[20160518145102843]: /images/20220406/b26f0f3711794298aed27ceada81c706.png
[20160518145203092]: /images/20220406/a04a4b3bdc084b8fa32c46eaefe6ad6c.png
[20160518145250110]: /images/20220406/74c274dafa0b48d486500509dea08c9c.png
[20160518145351862]: /images/20220406/2f9fd2c5bfcf48409714fed5931a0630.png
[20160518145534848]: /images/20220406/86df9270cc37497899533595ddec6148.png
[20160518151600563]: /images/20220406/81bfec8ac7434a0ab999c4a03c073a83.png
[20160518151909024]: /images/20220406/72b48302a78148fcb16fa17c9667f214.png
[20160518152131930]: /images/20220406/d5f4d917d4d645f890de52c20e923b36.png
[20160518165950794]: /images/20220406/1832320399fb417694b2f71790fa4cb9.png
[20160518170148125]: /images/20220406/bb3d626ce0c949a08226f8059ee3e551.png
[20160518170359912]: /images/20220406/974206b29291485b89241ec6cbecd7a6.png
[20160518171934289]: /images/20220406/da896126423e40f4b20306063045fe88.png
[20160518172200683]: /images/20220406/31876ad37ca04411992f9ad7a679dfd0.png
[20160518172227372]: /images/20220406/78d57f5bda804d6585e262d3b14a8813.png
[20160614224104446]: /images/20220406/c1ab0f8b08e1411481d9e1d75ebad00d.png
[20160614221800202]: /images/20220406/d0e3688f2cc84d07a9b54c331f0e88d9.png
[20160614221901246]: /images/20220406/68753fa45b994e6fb7a78999376d2fd0.png
[300 1]: /images/20220406/630db91f30bb4058904c6fd87d01672e.png
[20160614222018700]: /images/20220406/2fa795004fa34580b960c57a2a0f8e2d.png
[20160614223220777]: /images/20220406/b07223b004594877adeaa2f5551e0e84.png
[20160614230440253]: /images/20220406/9f95b6379e8640caa9d65e6cd426e3f5.png
[20160614230745598]: /images/20220406/8580cfe73aa747afadcbff474c7a1966.png
[20160614230957109]: /images/20220406/2f59b097ca744f65a086c32414a7f79b.png
[http_www.cnblogs.com_tig666666_p_5709320.html]: http://www.cnblogs.com/tig666666/p/5709320.html