【iOS】WebView的使用、Javascript和Objective-C的互動

阿新 • • 發佈：2019-01-14

現在的App越來越有直接在一個View中擺個WebView，然後裡面鑲嵌個HTML5網頁，再加些和手機系統聯絡的方法的趨勢了。這樣做，以免IOS Apps一套，安卓那邊一套，HTML5的手機網頁版又一套。我都懶得煩了，一套HTML5程式碼吃遍天下，反正現在的HTML5網頁已經做得以假亂真的底部，使用者根本感覺不到，這是用IOS寫的，還是HTML5寫的。因此，有必要研究iOS中的WebView使用，與鑲嵌在iOS工程中的HTML5利用JS和Objective-C的互動。這東西就像，更應該說，“就是”安卓中的《【Android】檢測是否處於Wifi環境，利用WebView實現瀏覽器app》（點選開啟連結

）。

下面舉一個例子來說明這個問題，如圖：

如下圖所示，我在MainStoryboard.storyboard佈置了一個TextField，一個Button，一個Label，這些都是iOS的原生元件，然後拖了一個Web View，Web View中放一個網頁。網頁佈置了段落文字<p>輸入框<input type="text" id="text"/>和一個按鈕，永遠說明WebView中的網頁顯示與iOS的互動問題。如上圖所示，大家可以看到，網頁中的內容可以修改iOS的元件的內容，iOS可以控制網頁的內容。如同《【ActionScript】Flash與網頁的互動，ActionScript與JavaScript的互動》（

點選開啟連結）一樣，兩種語言相映成趣。

具體制作如下：

1、如同上圖所示一樣拖完各個元件之後。對於WebView勾上Scales Page To Fit，避免鑲嵌在裡面的網頁出現水平滾動條，避免出現垂直滾動條，需要未來在程式碼中實現。

2、然後如同在《【iOS】點選按鈕Button，更變標籤文字Label的顏色》（點選開啟連結）一樣，對MainStoryboard.storyboard中各個元件進行註冊，註冊之後，ViewController.h如下所示，一個Button按鈕點選函式，與三個元件的在ViewController.m操縱的id。同時這裡，注意在介面中@interface ViewController : UIViewController<UIWebViewDelegate>，新增<UIWebViewDelegate>的委託，以便能夠操控WebView。

//
//  ViewController.h
//  WebView
//
//  Created by pc on 17-7-11.
//  Copyright (c) 2017年 pc. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController<UIWebViewDelegate>
@property (weak, nonatomic) IBOutlet UIWebView *webview1;
@property (weak, nonatomic) IBOutlet UITextField *textfield1;
@property (weak, nonatomic) IBOutlet UILabel *label1;
- (IBAction)onclick:(id)sender;

@end

3、開啟專案的資料夾，在裡面新建一個www資料夾，當然你叫別的名字也可以啊，在下面的程式碼注意修改就行。

新建之後，以如下圖的方式，將這個新建的www資料夾，附著到工程：

在www資料夾中新建一個index.html。

4、在index.html設定如下的程式碼，當然這段的程式碼未來將和ViewController.m的程式碼交相輝映的，可以對照著看。

<!doctype html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=0.8, maximum-scale=0.8, user-scalable=no">
    </head>
    <body>
        <p id="text1">中文是沒有問題的！</p>
        <input type="text" id="text"/><br>
        <button onclick="hello_ios()">傳送</button>
    </body>
    <script>
        function hello_js(msg){//接受objective-C傳遞過來的msg
            document.getElementById("text1").innerHTML=msg;//將上面<p>標籤的文字修改了
        }
        function hello_ios(){//傳遞資訊給objective-C
            var text=document.getElementById("text").value;
            window.location="toios://A?content="+text;//將<input type="text" id="text"/>的內容傳遞過去
            //toios和A是自己定義的“協議”，也就是傳遞的url，可以自己定義為其它。
        }
    </script>
</html>

5、之後是ViewController.m的程式碼：

#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController

/*輸入鍵盤的處理*/
//允許使用者點選空白區域關閉鍵盤
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
    [super touchesBegan:touches withEvent:event];
    [self.view endEditing:YES];
}
//允許使用者通過點選return鍵關閉鍵盤
-(BOOL)textFieldShouldReturn:(UITextField *) textField{
    [textField resignFirstResponder];
    return YES;
}

//初始化的時候所執行的內容
- (void)viewDidLoad
{
    [super viewDidLoad];
    //載入專案工程下www中的index.html
    self.webview1.delegate=self;
    NSString *path=[[NSBundle mainBundle]pathForResource:@"www/index" ofType:@"html"];
    [self.webview1 loadRequest:[NSURLRequest requestWithURL:[NSURL fileURLWithPath:path]]];
}
//保證WebView不出現垂直滾動條
- (void)webViewDidFinishLoad:(UIWebView *)webView//在網頁最終完成載入之後再執行
{
    //獲取網頁內容的總高度之後，再設定縮放比例
    CGRect frame = webView.frame;
    CGSize fittingSize = [webView sizeThatFits:CGSizeZero];
    frame.size = fittingSize;
    webView.frame = frame;
}
//按鈕點選事件，objective-C發信息給javascript
- (IBAction)onclick:(id)sender {
    [self.webview1 stringByEvaluatingJavaScriptFromString:[[NSString alloc]initWithFormat:@"hello_js('%@')",self.textfield1.text]];//實質就是要求WebView中鑲嵌的網頁執行：@"hello_js(文字框Textfield輸入內容)"的這個javascript函式
}
//對javascript傳遞過來的資訊進行響應
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType
{
    NSURL * url = [request URL];
    if ([[url scheme] isEqualToString:@"toios"]) {//這裡的url[scheme]實質就是javascript定義的toios
        if([[url host] isEqualToString:@"A"]){//這裡的[url host]實質就是javascript定義的A
            NSArray *params =[url.query componentsSeparatedByString:@"&"];//對?也就是協議所代的引數進行拆分
            NSMutableDictionary *dictionary = [NSMutableDictionary dictionary];//用一個數據字典存引數
            for (NSString *paramStr in params){
                NSArray *dicArray = [paramStr componentsSeparatedByString:@"="];
                if (dicArray.count>1){//=的前項是引數名，作為字典的key，後項是引數值，作為這個key對應的值
                    NSString *decodeValue=[dicArray[1] stringByReplacingPercentEscapesUsingEncoding:NSUTF8StringEncoding];
                    [dictionary setObject:decodeValue forKey:dicArray[0]];
                }
            }
            self.label1.text=[[NSString alloc]initWithFormat:@"js傳遞過來的內容是：%@",[dictionary objectForKey:@"content"]];//將label1的文字換成content這個引數
        }
        return NO;
    }
    return YES;
}


@end

首先，對於輸入鍵盤的2個處理函式，有textfield就一定要有，不然不符合使用者的輸入習慣了，這裡不再贅述了，具體可以參考《【iOS】基本控制元件：文字輸入框、開關、分段控制元件、滑塊與輸入鍵盤隱藏的問題》（點選開啟連結）。

後半部分的重頭戲分為兩部分，第一部分是WebView的內容顯示和內容調整問題，內容顯示設定好需要顯示的專案網頁即可，之後在網頁內容載入完畢，再求出其高度，從而計算縮放比例，以便WebView沒有垂直和水平滾動條。還和iOS本身的Apps背景色一樣，這樣就能瞞天過海，試想，如果在直接在Apps就一個這樣的WebView，你完全可以用HTML5來開發iOS，然後當作Apps釋出。

之後的Javascript和Objective-C的互動，Objective-C傳東西給Javascript就好辦，直接利用已經封裝好的函式就好了，而Javascript傳東西Objective-C，雖然在iOS7之後有新的函式，但為了全iOS通用，還是走Javascript肯定能識別的uri通道。這玩意就是相當於Ajax，也可以理解為Javascript帶著一些引數，以get的方式跳轉到某個網頁。之後Objective-C處理對特定uri通道進行處理，如果你多個動作，還可以在自己用if-else if或者switch定義多個協議的Objective-C動作。可以看到Objective-C處理對特定uri通道進行處理，就是在拆解字串而已，雖然上面的程式碼很長，但其實就是不停拆建傳過來的字串，拆到最後我們需要的東西，更新一下label1的內容而已。邏輯很簡單，以後使用直接改上面的@文字就好了！

建議index.html的javascirpt程式碼和ViewController.m最後兩個函式對照著看，這樣更容易理解！

【iOS】WebView的使用、Javascript和Objective-C的互動

【iOS】WebView的使用、Javascript和Objective-C的互動

【iOS】MVC、MVP和MVVM

【轉】WebView的JavaScript與本地代碼三種交互方式

【java】J2EE、J2SE和J2ME的區別

【springboot】2、Controller和引數

【mpeg2】mpeg1、mpeg2和mpeg4標準對比分析和總結

【JAVA】J2ME、J2SE和J2EE的區別

【python】map、reduce和filter

iOS webView js和Objective c互動

【iOS】webview頭部自定義view要跟webview一起滾動

iOS原生WebView中JavaScript和OC互動

【Spring】@Resource、@Autowired和@Qualifer三者的區別

【WebService】——SOAP、WSDL和UDDI

【Android】 Canvas、Path 和 Paint 例項 (遊戲開發必備)

【Hadoop】HBase、HDFS和MapReduce架構異同簡解

【總結】Cookie、session和localStorage、以及sessionStorage之間的區別

【SSL】OV、DV和EV證書的區別

【Android】53、碎片和活動之間進行通訊

iOS入門如何選擇Swift和objective-c

iOS入門怎樣選擇Swift和objective-c

【iOS】WebView的使用、Javascript和Objective-C的互動

相關推薦