iOS與HTML5交互方法總結(jié)

Han_Count 2016-09-06

展開全文

摘要

看了不少別人寫的博客或者論壇,關(guān)于iOS與HTML5交互方法大概主要有5種方式:

1. 利用WKWebView進(jìn)行交互(系統(tǒng)API)
2. 利用UIWebView進(jìn)行交互(系統(tǒng)API)
3. 蘋果的javascriptcore.framework框架; 
4. 跨平臺cordova框架;
5. oc第三方WebViewJavascriptBridge

關(guān)于WKWebView的介紹在前篇文章已經(jīng)有了比較詳細(xì)的介紹了
前篇文章地址:http://blog.csdn.net/baihuaxiu123/article/details/51286109
今天主要介紹前兩種,后三種大家有興趣的自己查看資料.

下面我們來介紹第一種方式:

1. 利用WKWebView進(jìn)行交互

效果圖

這里寫圖片描述
通過本篇文章，至少可以學(xué)習(xí)到：

1. OC如何給JS注入對象及JS如何給iOS發(fā)送數(shù)據(jù)
2. JS調(diào)用alert、confirm、prompt時，不采用JS原生提示，而是使用iOS原生來實現(xiàn)
3. 如何監(jiān)聽web內(nèi)容加載進(jìn)度、是否加載完成
4. 如何通過js來跳轉(zhuǎn)到iOS指定的頁面上

如何處理去跨域問題

創(chuàng)建配置類

在創(chuàng)建WKWebView之前，需要先創(chuàng)建配置對象，用于做一些配置：
這里寫圖片描述

配置偏好設(shè)置

偏好設(shè)置也沒有必須去修改它，都使用默認(rèn)的就可以了，除非你真的需要修改它：
這里寫圖片描述

配置web內(nèi)容處理池

其實我們沒有必要去創(chuàng)建它，因為它根本沒有屬性和方法：

web內(nèi)容處理池，由于沒有屬性可以設(shè)置，也沒有方法可以調(diào)用，不用手動創(chuàng)建.

這里寫圖片描述

配置Js與Web內(nèi)容交互

WKUserContentController是用于給JS注入對象的，注入對象后，JS端就可以使用：

window.webkit.messageHandlers.<name>.postMessage(<messageBody>)1
1

來調(diào)用發(fā)送數(shù)據(jù)給iOS端，比如：
這里寫圖片描述

AppModel就是我們要注入的名稱，注入以后，就可以在JS端調(diào)用了，傳數(shù)據(jù)統(tǒng)一通過body傳，可以是多種類型，只支持NSNumber, NSString, NSDate, NSArray,NSDictionary, and NSNull類型。
下面我們配置給JS的main frame注入AppModel名稱，對于JS端可就是對象了：
這里寫圖片描述

當(dāng)JS通過AppModel發(fā)送數(shù)據(jù)到iOS端時，會在代理中收到：
這里寫圖片描述

所有JS調(diào)用iOS的部分，都只可以在此處使用哦。當(dāng)然我們也可以注入多個名稱（JS對象），用于區(qū)分功能。

創(chuàng)建WKWebView

這里寫圖片描述

加載H5頁面

這里寫圖片描述

配置代理

如果需要處理web導(dǎo)航條上的代理處理，比如鏈接是否可以跳轉(zhuǎn)或者如何跳轉(zhuǎn)，需要設(shè)置代理；而如果需要與在JS調(diào)用alert、confirm、prompt函數(shù)時，通過JS原生來處理，而不是調(diào)用JS的alert、confirm、prompt函數(shù)，那么需要設(shè)置UIDelegate，在得到響應(yīng)后可以將結(jié)果反饋到JS端：
這里寫圖片描述

添加對WKWebView屬性的監(jiān)聽

這里寫圖片描述

然后我們就可以實現(xiàn)KVO處理方法，在loading完成時，可以注入一些JS到web中。這里只是簡單地執(zhí)行一段web中的JS函數(shù)：
這里寫圖片描述

WKUIDelegate

與JS原生的alert、confirm、prompt交互，將彈出來的實際上是我們原生的窗口，而不是JS的。在得到數(shù)據(jù)后，由原生傳回到JS：
這里寫圖片描述

WKNavigationDelegate

如果需要處理web導(dǎo)航操作，比如鏈接跳轉(zhuǎn)、接收響應(yīng)、在導(dǎo)航開始、成功、失敗等時要做些處理，就可以通過實現(xiàn)相關(guān)的代理方法：
這里寫圖片描述

JS端代碼

這里寫圖片描述

2. 利用UIWebView進(jìn)行交互

大家都知道UIWebView是最常見的SDK,平時項目中我們用的也比較多,它有一個stringByEvaluatingJavaScriptFromString方法可以將javascript嵌入頁面中，通過這個方法我們可以在iOS中與UIWebView中的網(wǎng)頁元素交互.下面就來詳細(xì)介紹一下它的具體操作步驟.首先我們來加載一個網(wǎng)頁,看看他的源碼:
這里寫圖片描述