IOS WebView中JS和OC相互呼叫

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

現在有很多專案中都涉及到HTML5，在一個普通的APP裡面嵌入HTML5網頁，嵌入的這些網頁在伺服器把頁面修改之後同樣也能跟著修改，這樣就能很方便的修改程式的展示內容。如果使用tabelView或者其他的控制元件展示內容的話，當展示的內容的樣式需要發生改變的時候必須修改程式本身才能夠達到修改的效果。所以，在APP裡面HTML5的嵌入可以更加方便的維護程式的內容，但是由於現在受網速啊，手機效能等因素的影響導致HTML5的使用者體驗沒有系統原生程式碼修改的APP好，所以針對這個JS和OC的專案呼叫，這裡只是簡單的講講，方便大家以後的學習和使用。

1.JS調OC

在JS呼叫OC的時候，其實我使用的是取巧的辦法，當我們使用webView載入網頁的時候，每一次請求都會被webView的

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

代理方法捕捉到，然後我們就可以在該代理方法裡面進行相應的操作，這裡我們先看看我寫的一個簡單測試程式碼，首先看測試網頁的原始碼:

<html>
    <head lang="en">
        <meta charset="UTF-8">
        <title 
></title>
    </head>
    <body>
    <br/><br/>
    <button onclick="fn_call();">打電話</button>
    <br/><br/>
    <button onclick="fn_getmethon();">獲取引數</button>
    <script type="text/javascript">
    function fn_call(){
        window.location.href='sn://call' 
;
    }
    function fn_getmethon(){
        window.location.href='sn://getValue';
    }
    function fn_alertMsg(msg){
        alert(msg);
    }
    </script>
    </body>
</html>

在這個頁面裡面，有兩個按鈕，按鈕點選之後分別呼叫兩個方法，在方法裡面使用window.location.href='sn://getValue'傳送一個請求，但是這個請求的協議不是http所以頁面不會進行跳轉；接著我們在webView的代理方法裡面捕捉事件。

- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {
    NSString *url = request.URL.absoluteString;
    NSLog(@"列印請求的URL-->%@", url);
    NSRange range = [url rangeOfString:@"sn://"];
    NSUInteger location = range.location;
    if (location != NSNotFound) {
        NSString *methon = [url substringFromIndex:location + range.length];
        SEL fn = NSSelectorFromString(methon);
        [self performSelector:fn withObject:nil];
    }

    return YES;
}

- (void)call {
    NSLog(@"呼叫打電話");
}

當我們按了”打電話”這個按鈕之後，控制檯就會出現
這裡寫圖片描述
這裡我們就可以對得到的URL進行簡單的擷取啊，判斷等操作，然後再執行需要執行的OC程式碼,我這裡是呼叫了call()這個方法，這樣就完成了JS對OC的呼叫。

2.OC調JS

前面講了JS對OC的呼叫，在這裡OC呼叫JS的原理其實差不多，在最開始的html頁面裡面有一個”獲取值”的按鈕點選之後就會呼叫js方法，然後在OC裡面捕捉到對應的方法

- (void)getValue {
    NSLog(@"呼叫獲取值");
    NSMutableString *js = [NSMutableString string];
    [js appendString:[NSString stringWithFormat:@"fn_alertMsg('%@');", @"這是測試傳值"]];
    [self.webView stringByEvaluatingJavaScriptFromString:js];
}

這這個方面裡面我們主要記住要在webView執行js程式碼就要呼叫- (NSString *)stringByEvaluatingJavaScriptFromString:(NSString *)script;這個方法，我們只需要傳入需要執行的JS程式碼然後就可以在webView裡面執行。先看看執行的效果:
執行結果通過上面提到的的程式碼就完成了OC對JS的呼叫，在用OC對JS呼叫的時候我們要先測試JS程式碼的正確性，這樣能提高我們的開發效率。

好了，webView中JS和OC呼叫，以及OC和JS的呼叫就寫到這裡了，有不足的地方希望大家多提提，最後附上完整的程式碼,webView控制元件使用故事版拖的

@interface ViewController () <UIWebViewDelegate>
@property (strong, nonatomic) IBOutlet UIWebView *webView;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    NSURL *url = [NSURL fileURLWithPath:[[NSBundle mainBundle].resourcePath stringByAppendingPathComponent:@"test.html"]];
    NSURLRequest *request = [NSURLRequest requestWithURL:url];
    self.webView.delegate = self;
    [self.webView loadRequest:request];
}

- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {
    NSString *url = request.URL.absoluteString;
    NSLog(@"列印請求的URL-->%@", url);
    NSRange range = [url rangeOfString:@"sn://"];
    NSUInteger location = range.location;
    if (location != NSNotFound) {
        NSString *methon = [url substringFromIndex:location + range.length];
        SEL fn = NSSelectorFromString(methon);
        [self performSelector:fn withObject:nil];
    }

    return YES;
}

- (void)getValue {
    NSLog(@"呼叫獲取值");
    NSMutableString *js = [NSMutableString string];
    [js appendString:[NSString stringWithFormat:@"fn_alertMsg('%@');", @"這是測試傳值"]];
    [self.webView stringByEvaluatingJavaScriptFromString:js];
}

- (void)call {
    NSLog(@"呼叫打電話");
}

@end

IOS WebView中JS和OC相互呼叫

1.JS調OC

2.OC調JS

IOS WebView中JS和OC相互呼叫

iOS UIWebView中JS和OC互相呼叫

iOS原生WebView中JavaScript和OC互動

介紹了webkit到webengine的和webengine中js和C++互相呼叫的方法

C# 用XiliumCefGlue做瀏覽器，JS和C#相互呼叫

WebView中js和android互動遇到的坑

iOS js oc相互呼叫（JavaScriptCore）

fragment和activity中的控制元件相互呼叫

22.WebBrowser中JS和C++程式碼互相呼叫

iOS中NSDate和NSString相互轉換

iOS下JS與OC互相呼叫（三）--MessageHandler

iOS WebView中的JS互動

JS與OC互相呼叫的一百種方法(包括WKWebView和UIWebView)

iOS下JS與OC互相呼叫（八）--Cordova詳解+實戰

iOS下JS與OC互相呼叫（四）--JavaScriptCore

iOS下JS與OC互相呼叫（六）-->WKWebView + WebViewJavascriptBridge

Android呼叫WebView的JS和JS呼叫Android的方法

JS與OC互調，JS開啟系統相機，JS獲取iOS系統圖片，iOS中JS調OC

iOS下JS與OC互相呼叫（七）--Cordova 基礎

Android中 Bitmap和Drawable相互轉換的方法

IOS WebView中JS和OC相互呼叫

1.JS調OC

2.OC調JS

相關推薦