iOS JS和OC的交互及UIWebView使用總結(jié)

前言:

因?yàn)楣緲I(yè)務(wù)需要,所以在iOS與H5方面的交互進(jìn)行較為復(fù)雜的的處理上就要有更深的了解。查閱了網(wǎng)絡(luò)上的各大神寫的博客。特在這里做一個總結(jié)。寫的好的只貼鏈接地址,畢竟再來造輪子沒這個必要。下面我所選擇的,也是經(jīng)過我的篩選,排除了網(wǎng)絡(luò)上面大量的重復(fù)文章和糟糕的排版。這里我選擇的也是可上手實(shí)踐的,至于更多的原理和理論,請大家自行搜索。因?yàn)榭傆X得原理和理論的更應(yīng)該系統(tǒng)去學(xué)習(xí),所以,在這里不提供。

JS和OC交互

關(guān)于JS和OC的交互,總結(jié)起來大致有以下幾種方式
1.URL地址在OC中攔截跳轉(zhuǎn)
2.利用系統(tǒng)庫JavaScriptCore,來做相互調(diào)用
3.利用第三方庫WebViewJavascriptBridge
4.利用第三方cordova庫,以前叫PhoneGap
5.React Native
關(guān)于4和5,其實(shí)可以歸為一類,非原生開發(fā)。對于cordova因?yàn)橹霸谝粋€家公司app外包給別人開發(fā),我接手的時候做過這方面的插件開發(fā),算是有所了解,不過,因?yàn)閏ordova開發(fā)的app實(shí)在是太慢了,頁面的流暢度跟原生完全不是一個級別的,雖說隨著cpu的發(fā)展,兩者不會相差太大,但是還是能夠感覺出來的。故我始終嫌棄cordova的開發(fā)。而React Native據(jù)說是未來的開發(fā)趨勢,因?yàn)槲覜]有深入研究,在此也不做評價。
下面著重來說下前面的三種方式。
這里首先引入推薦的第一個人的博文系列:
iOS下JS與原生OC互相調(diào)用(總結(jié))
iOS下JS與OC互相調(diào)用(一)--UIWebView 攔截URL
iOS下JS與OC互相調(diào)用(二)--WKWebView 攔截URL
iOS下JS與OC互相調(diào)用(三)--MessageHandler
iOS下JS與OC互相調(diào)用(四)--JavaScriptCore
iOS下JS與OC互相調(diào)用(五)--UIWebView + WebViewJavascriptBridge
iOS下JS與OC互相調(diào)用(六)--WKWebView + WebViewJavascriptBridge
iOS下JS與OC互相調(diào)用(七)--Cordova 基礎(chǔ)
iOS下JS與OC互相調(diào)用(八)--Cordova詳解+實(shí)戰(zhàn)
這里的已經(jīng)完全涵蓋了前面幾種方法的實(shí)現(xiàn)。所以看完這個總結(jié),基本對JS交互有了了解。
接下來一篇博文,是著重對前三種的講解。
JS和OC的交互(基于UIWebView)

推薦

在這里我想推薦的是第三種利用第三方庫WebViewJavascriptBridge。這是原生里我篩選出來的覺得使用簡單功能強(qiáng)大齊全的一個方式。也是我同事(曾在釘釘?shù)那岸耍?,一直使用的交互方式。所以還是值得認(rèn)可的。
至于使用,下面推薦第三篇博文
[iOS] 使用WebViewJavascriptBridge實(shí)現(xiàn)OC與JS交互

基本上,以上這些推薦就完全滿足js與oc的交互。

WebView的使用總結(jié)
UIWebView的基礎(chǔ)使用
- (void)viewDidLoad {
    [super viewDidLoad];
    //    1、創(chuàng)建UIWebView:

    CGRect bouds = [UIScreen mainScreen].bounds;
    UIWebView* webView = [[UIWebView alloc]initWithFrame:bouds];

    //    2、加載在線資源http內(nèi)容

    NSURL* url = [NSURL URLWithString:@"http://www.baidu.com"];//創(chuàng)建URL
    NSURLRequest* request = [NSURLRequest requestWithURL:url];//創(chuàng)建
    [webView loadRequest:request];//加載

    //    2、 加載本地文件的方法:

    /**
     *
     //第一種方法:

     NSString* path = [[NSBundle mainBundle] pathForResource:@"index" ofType:@"html"];//mobile是根目錄,name是文件名稱,html是文件類型
     [webView loadRequest:[NSURLRequest requestWithURL:[NSURL fileURLWithPath:path]]]; //加載本地文件


     //第二種方法:

     NSString *resourcePath = [[NSBundle mainBundle] resourcePath];

     NSString *filePath = [resourcePath stringByAppendingPathComponent:@"mobile.html"];

     NSString *htmlstring=[[NSString alloc] initWithContentsOfFile:filePath encoding:NSUTF8StringEncoding error:nil];

     [webView loadHTMLString:htmlstring baseURL:[NSURL fileURLWithPath:[[NSBundle mainBundle] bundlePath]]];

     */

    //    3、導(dǎo)航

    //    UIWebView類內(nèi)部會管理瀏覽器的導(dǎo)航動作,通過goForward和goBack方法你可以控制前進(jìn)與后退動作:

    [webView goBack];
    [webView goForward];

    //    4、UIWebViewDelegate委托代理

    webView.delegate = self;

    //    5、顯示網(wǎng)頁視圖UIWebView:

    [self.view addSubview:webView];
}

# pragma mark - UIWebView 的代理方法
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType;//當(dāng)網(wǎng)頁視圖被指示載入內(nèi)容而得到通知。應(yīng)當(dāng)返回YES,這樣會進(jìn)行加載
- (void)webViewDidStartLoad:(UIWebView *)webView { //當(dāng)網(wǎng)頁視圖已經(jīng)開始加載一個請求后,得到通知。
    //    [webView stopLoading];//取消載入內(nèi)容
}
- (void)webViewDidFinishLoad:(UIWebView *)webView;//當(dāng)網(wǎng)頁視圖結(jié)束加載一個請求之后,得到通知。
- (void)webView:(UIWebView *)webView didFailLoadWithError:(nullable NSError *)error {
    //    [webView reload];//重載
}//當(dāng)在請求加載中發(fā)生錯誤時,得到通知。會提供一個NSSError對象,以標(biāo)識所發(fā)生錯誤類型。
IOS中UIWebView常用注意點(diǎn):

1.與UIWebView進(jìn)行交互,調(diào)用web頁面中的需要傳參的函數(shù)時,參數(shù)需要帶單引號,或者雙引號(雙引號要進(jìn)行轉(zhuǎn)義在轉(zhuǎn)義字符前加\),傳遞json字符串時不需要加單引號或雙引號:

-(void)webViewDidFinishLoad:(UIWebView *)webView

{
    NSString *sendJsStr=[NSString stringWithFormat:@"openFile(\"%@\")", jsDocPathStr];
    [webView stringByEvaluatingJavaScriptFromString:sendJsStr];

}

2.在該代理方法中判斷與webView的交互,可通過html里定義的協(xié)議實(shí)現(xiàn)

 - (BOOL)webView:(UIWebView*)webView shouldStartLoadWithRequest:(NSURLRequest*)request navigationType:(UIWebViewNavigationType)navigationType;

3.為webView添加背景圖片

webView.backgroundColor=[UIColor clearColor];
//這句話很重要,webView是否是不透明的,no為透明 在webView下添加個imageView展示圖片就可以了
webView.opaque=NO;

4.獲取webView頁面內(nèi)容信息

NSString *docStr=[webView stringByEvaluatingJavaScriptFromString:@"document.documentElement.textContent"];
//獲取web頁面內(nèi)容信息,此處獲取的是個son字符串

SBJsonParser *parserJson=[[[SBJsonParser alloc]init]autorelease];

NSDictionary *contentDic=[parserJson objectWithString:docStr];
//將json字符串轉(zhuǎn)化為字典

5.將文件下載到本地址然后再用webView打開

NSString *path = [[[[NSBundle mainBundle] resourcePath] stringByDeletingLastPathComponent] stringByAppendingPathComponent:@"Documents"];
NSString *resourceDocPath = [[NSString alloc] initWithString:path];

self.filePath = [resourceDocPath stringByAppendingPathComponent:[NSString stringWithFormat:@"maydoc%@",docType]];

NSData *attachmentData = [[NSData alloc] initWithContentsOfURL:[NSURL URLWithString:theUrl]];
[attachmentData writeToFile:filePath atomically:YES];

NSURL *url = [NSURL fileURLWithPath:filePath];
NSURLRequest *requestObj = [NSURLRequest requestWithURL:url];

[attachmentWebView loadRequest:requestObj];
//刪除指定目錄下的文件

NSFileManager *magngerDoc=[NSFileManager defaultManager];

[magngerDoc removeItemAtPath:filePath error:nil];

6.處理webView展示txt文檔亂碼問題

if ([theType isEqualToString:@".txt"]) {

    //txt分帶編碼和不帶編碼兩種,帶編碼的如UTF-8格式txt,不帶編碼的如ANSI格式txt

    //不帶的,可以依次嘗試GBK和GB18030編碼

    NSString* aStr = [[NSString alloc] initWithData:attachmentData encoding:NSUTF8StringEncoding];
    if (!aStr)
    {

        //用GBK進(jìn)行編碼
        aStr=[[NSString alloc] initWithData:attachmentData encoding:0x80000632];

    }

    if (!aStr)
    {

        //用GBK編碼不行,再用GB18030編碼
        aStr=[[NSString alloc] initWithData:attachmentData encoding:0x80000631];

    }

    //通過html語言進(jìn)行排版

    NSString* responseStr = [NSString stringWithFormat:
                             @"%@",aStr];
    [attachmentWebView loadHTMLString:responseStr baseURL:[NSURL fileURLWithPath:[[NSBundle mainBundle] bundlePath]]];

    return;
}

更多總結(jié)見這篇博文(IOS開發(fā) - UIWebView(用法全面介紹,含最全的JS交互))上面的一些是列舉我認(rèn)為常用的,這個博文會持續(xù)更新,把我后期增加的路由跳轉(zhuǎn)來分享下。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容