第一種方式
JS傳值給OC
- 1猬膨、技術方案：使用自定義url方法角撞，每次點擊網(wǎng)頁
- 2呛伴、使用場景：比如點擊事件方法，點擊網(wǎng)頁的某個方法谒所，將該方法的參數(shù)傳值給OC热康，供OC使用。
- 3劣领、代碼實現(xiàn)如下：
一姐军、js要實現(xiàn)的
- 1 、 創(chuàng)建一個.js文件：
;(function() {
var messagingIframe,
bridge = 'external',
// wmcall是自定義的協(xié)議頭
CUSTOM_PROTOCOL_SCHEME = 'wmcall';
if (window[bridge]) { return }
function _createQueueReadyIframe(doc) {
messagingIframe = doc.createElement('iframe');
messagingIframe.style.display = 'none';
doc.documentElement.appendChild(messagingIframe);
}
window[bridge] = {};
var methods = [%@];
for (var i=0;i<methods.length;i++){
var method = methods[i];
var code = "(window[bridge])[method] = function " + method + "() {messagingIframe.src = CUSTOM_PROTOCOL_SCHEME + ':' + arguments.callee.name + ':' + encodeURIComponent(JSON.stringify(arguments));}";
eval(code);
}
//創(chuàng)建iframe尖淘，必須在創(chuàng)建external之后奕锌，否則會出現(xiàn)死循環(huán)
_createQueueReadyIframe(document);
//通知js開始初始化
//initReady();
})();
二、oc要實現(xiàn)的代碼
- 2村生、 創(chuàng)建文件WebViewJsBridge.h惊暴， 繼承UIWebViewDelegate
#import <Foundation/Foundation.h>
#define kCustomProtocolScheme @"wmcall"
#define kBridgeName @"external"
@interface WebViewJsBridge : NSObject<UIWebViewDelegate>
@property (nonatomic, weak) UIWebView *webView;
+ (instancetype)bridgeForWebView:(UIWebView*)webView webViewDelegate:(NSObject<UIWebViewDelegate>*)webViewDelegate;
+ (instancetype)bridgeForWebView:(UIWebView*)webView webViewDelegate:(NSObject<UIWebViewDelegate>*)webViewDelegate resourceBundle:(NSBundle*)bundle;
- (void)excuteJSWithObj:(NSString *)obj function:(NSString *)function;
@end
- WebViewJsBridge.m
#import "WebViewJsBridge.h"
#import <objc/runtime.h>
@interface WebViewJsBridge ()
@property (nonatomic, weak) id webViewDelegate;
@property (nonatomic, weak) NSBundle *resourceBundle;
@end
@implementation WebViewJsBridge
+ (instancetype)bridgeForWebView:(UIWebView*)webView webViewDelegate:(NSObject<UIWebViewDelegate>*)webViewDelegate {
return [self bridgeForWebView:webView webViewDelegate:webViewDelegate resourceBundle:nil];
}
+ (instancetype)bridgeForWebView:(UIWebView*)webView webViewDelegate:(NSObject<UIWebViewDelegate>*)webViewDelegate resourceBundle:(NSBundle*)bundle
{
WebViewJsBridge* bridge = [[[self class] alloc] init];
[bridge _platformSpecificSetup:webView webViewDelegate:webViewDelegate resourceBundle:bundle];
return bridge;
}
#pragma mark - init & dealloc
- (void) _platformSpecificSetup:(UIWebView*)webView webViewDelegate:(id<UIWebViewDelegate>)webViewDelegate resourceBundle:(NSBundle*)bundle{
_webView = webView;
_webViewDelegate = webViewDelegate;
_webView.delegate = self;
_resourceBundle = bundle;
}
- (void)dealloc {
_webView.delegate = nil;
_webView = nil;
_webViewDelegate = nil;
}
#pragma mark - UIWebView Delegate
- (void)webViewDidFinishLoad:(UIWebView *)webView {
if (webView != _webView) { return; }
//is js insert
if (![[webView stringByEvaluatingJavaScriptFromString:[NSString stringWithFormat:@"typeof window.%@ == 'object'", kBridgeName]] isEqualToString:@"true"]) {
//get class method dynamically
unsigned int methodCount = 0;
Method *methods = class_copyMethodList([self class], &methodCount);
NSMutableString *methodList = [NSMutableString string];
for (int i=0; i<methodCount; i++) {
NSString *methodName = [NSString stringWithCString:sel_getName(method_getName(methods[i])) encoding:NSUTF8StringEncoding];
//防止隱藏的系統(tǒng)方法名包含“.”導致js報錯
if ([methodName rangeOfString:@"."].location!=NSNotFound) {
continue;
}
[methodList appendString:@"\""];
[methodList appendString:[methodName stringByReplacingOccurrencesOfString:@":" withString:@""]];
[methodList appendString:@"\","];
}
if (methodList.length>0) {
[methodList deleteCharactersInRange:NSMakeRange(methodList.length-1, 1)];
}
free(methods);
NSBundle *bundle = _resourceBundle ? _resourceBundle : [NSBundle mainBundle];
NSString *filePath = [bundle pathForResource:@"WebViewJsBridge" ofType:@"js"];
NSString *js = [NSString stringWithContentsOfFile:filePath encoding:NSUTF8StringEncoding error:nil];
[webView stringByEvaluatingJavaScriptFromString:[NSString stringWithFormat:js, methodList]];
}
__strong typeof(_webViewDelegate) strongDelegate = _webViewDelegate;
if (strongDelegate && [strongDelegate respondsToSelector:@selector(webViewDidFinishLoad:)]) {
[strongDelegate webViewDidFinishLoad:webView];
}
}
- (void)webView:(UIWebView *)webView didFailLoadWithError:(NSError *)error {
if (webView != _webView) { return; }
__strong typeof(_webViewDelegate) strongDelegate = _webViewDelegate;
if (strongDelegate && [strongDelegate respondsToSelector:@selector(webView:didFailLoadWithError:)]) {
[strongDelegate webView:webView didFailLoadWithError:error];
}
}
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {
if (webView != _webView) { return YES; }
NSURL *url = [request URL];
__strong typeof(_webViewDelegate) strongDelegate = _webViewDelegate;
// 拿到網(wǎng)頁的實時url
NSString *requestString = [[request URL] absoluteString];
//在url中尋找自定義協(xié)議頭"wmcall"
if ([requestString hasPrefix:kCustomProtocolScheme]) {
// 以":"為中心將url分割成兩部分，放進數(shù)組arr趁桃。辽话。是否取“:”或者“://”需要跟寫交互的確定下
NSArray *components = [[url absoluteString] componentsSeparatedByString:@":"];
// 取其后半段
NSString *function = (NSString*)[components objectAtIndex:1];
NSString *argsAsString = [(NSString*)[components objectAtIndex:2]
stringByReplacingPercentEscapesUsingEncoding:NSUTF8StringEncoding];
NSData *argsData = [argsAsString dataUsingEncoding:NSUTF8StringEncoding];
NSDictionary *argsDic = (NSDictionary *)[NSJSONSerialization JSONObjectWithData:argsData options:kNilOptions error:NULL];
//以":"為標識將后半段url分割成若干部分，放進數(shù)組arr2卫病，此時arr2[0]為空油啤，arr2[1]為第一個傳參值，arr2[2]為第二個傳參值蟀苛，以此類推
//convert js array to objc array
NSMutableArray *args = [NSMutableArray array];
//取出參數(shù)益咬，進行使用
for (int i=0; i<[argsDic count]; i++) {
[args addObject:[argsDic objectForKey:[NSString stringWithFormat:@"%d", i]]];
}
//ignore warning
#pragma clang diagnostic ignored "-Warc-performSelector-leaks"
SEL selector = NSSelectorFromString([args count]>0?[function stringByAppendingString:@":"]:function);
if ([self respondsToSelector:selector]) {
[self performSelector:selector withObject:args];
}
return NO;
} else if (strongDelegate && [strongDelegate respondsToSelector:@selector(webView:shouldStartLoadWithRequest:navigationType:)]) {
return [strongDelegate webView:webView shouldStartLoadWithRequest:request navigationType:navigationType];
} else {
return YES;
}
}
- (void)webViewDidStartLoad:(UIWebView *)webView {
if (webView != _webView) { return; }
__strong typeof(_webViewDelegate) strongDelegate = _webViewDelegate;
if (strongDelegate && [strongDelegate respondsToSelector:@selector(webViewDidStartLoad:)]) {
[strongDelegate webViewDidStartLoad:webView];
}
}
#pragma mark - call js
//執(zhí)行js方法
- (void)excuteJSWithObj:(NSString *)obj function:(NSString *)function {
NSString *js = function;
if (obj) {
js = [NSString stringWithFormat:@"%@.%@", obj, function];
}
[self.webView stringByEvaluatingJavaScriptFromString:js];
}
@end
三、使用案例
- 1帜平、創(chuàng)建橋接文件WebViewJsBridge.h
- .h
#import "WebViewJsBridge.h"
typedef void(^bridge_callback)(NSString* method, NSArray* params);
@interface BeeWebViewBridge : WebViewJsBridge
@property (nonatomic, strong) bridge_callback block_bridge_callback;
- (void)setBlock_bridge_callback:(bridge_callback)block_bridge_callback;
- (void)check_exist;
@end
- .m
#import "BeeWebViewBridge.h"
@implementation BeeWebViewBridge
//圖片展示
- (void)show_image:(NSArray *)params
{
if(_block_bridge_callback)
{
_block_bridge_callback(@"show_image", params);
}
}
@end
oc傳值給js
- 在webviewcontroller里面實現(xiàn)如下代碼：
//通過paramsName础废，匹配需要傳什么值
- (void)callByValueWithParamsName:(NSString *)paramsName
{
//要傳出去的值
NSString *value = @"";
if ([paramsName isEqualToString:@"access_token"]) {
value = [CMCore get_access_token]?:@"";
}
//方法1
NSString *jsMethode = [NSString stringWithFormat:@"set_params('%@')",value];
[_web_view stringByEvaluatingJavaScriptFromString:jsMethode];
//方法2
// NSString *jsMethode = [NSString stringWithFormat:@"set_params('%@')",value];
// JSContext *context = [_web_view valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
// [context evaluateScript:jsMethode];
//方法3
// [_bridge excuteJSWithObj:value function:paramsName];
}
分割線
第二種：利用第三方庫實現(xiàn)JS與OC的相互傳值。
- 1罕模、 技術方案：使用
WebViewJavascriptBridge三方庫 - 2、 使用場景： 網(wǎng)頁中代碼中的某個方法帘瞭，比如點擊事件方法淑掌，將該方法的參數(shù)傳值給OC，供OC使用蝶念。
- 3抛腕、
代碼實現(xiàn)如下：
oc給js傳值
一、 JS里需要實現(xiàn)的代碼(創(chuàng)建.js文件)：
function setupWebViewJavascriptBridge(callback) {
if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); }
if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }
window.WVJBCallbacks = [callback];
var WVJBIframe = document.createElement('iframe');
WVJBIframe.style.display = 'none';
WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__';
document.documentElement.appendChild(WVJBIframe);
setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
}
//調(diào)用上面定義的函數(shù)
setupWebViewJavascriptBridge(function (bridge){
//OC傳值給JS 'testJavascriptHandler'為雙方自定義好的統(tǒng)一方法名媒殉；'data'是OC傳過來的值担敌；'responseCallback'是JS接收到之后給OC的回調(diào)
bridge.registerHandler('testJavascriptHandler', function(data, responseCallback) {
//打印OC傳過來的值
log('ObjC called testJavascriptHandler with', data)
var responseData = { 'Javascript Says':'Right back atcha!' }
log('JS responding with', responseData)
//給OC的回調(diào)
responseCallback(responseData)
})
二、OC里需要實現(xiàn)的代碼：
- 1廷蓉、導入第三方庫
WebViewJavascriptBridge全封；遵守UIWebViewDelegate協(xié)議；
//設置第三方Bridge是否可用
[WebViewJavascriptBridge enableLogging];
//關聯(lián)webView和bridge
_bridge = [WebViewJavascriptBridge bridgeForWebView:web];
[_bridge setWebViewDelegate:self];
//OC給JS傳值，雙方自定義一個統(tǒng)一的方法名'testJavascriptHandler'刹悴；data里即為要傳過去的值
[_bridge callHandler:@"testJavascriptHandler" data:@{@"年齡":@"20"}];
js給oc傳值
一行楞、創(chuàng)建js文件，js代碼如下:
//點擊網(wǎng)頁上一個按鈕時
callbackBt.onclick = function()
{
var str1=document.getElementById("text1").value;
var str2=document.getElementById("text2").value;
//JS給OC傳值土匀。'passValue'為雙方自定義的統(tǒng)一方法名子房；'str1'&'str2'為要傳的值； response為OC收到后給JS的回調(diào)
bridge.callHandler('passValue', {str1,str2}, function(response) {
})
}
二就轧、oc要實現(xiàn)的代碼
- 導入第三方庫 WebViewJavascriptBridge证杭；遵守UIWebViewDelegate協(xié)議；
//設置第三方Bridge是否可用
[WebViewJavascriptBridge enableLogging];
//關聯(lián)webView和bridge
_bridge = [WebViewJavascriptBridge bridgeForWebView:web];
[_bridge setWebViewDelegate:self];
//js給oc傳值.'passValue'為雙方自定義的統(tǒng)一方法名妒御；'data'為JS傳過來的值解愤；'responseCallback'為OC收到值后給JS返回的回調(diào)
[_bridge registerHandler:@"passValue" handler:^(id data, WVJBResponseCallback responseCallback) {
//打印js傳過來的值
NSLog(@"%@", data);
//返回給js的值
responseCallback(@"收到了");
}];
