OC與H5交互
一、 方案
I. iOS6的方案
ios6 主要是通過UIWebView來實現交互，可以通過一個第三方庫來實現（EasyJSWebView的方法來注入JS代碼實現交互）
-
JS 調用 OC
- JS端： 通過iframe來實現
document.documentElement.appendChild(iframe); - APP端：主要是通過UIWebView,實現UIWebView的代理方法，截取Request,來實現JS調用OC的代碼，
- JS端： 通過iframe來實現
OC調用JS
- (nullable NSString *)stringByEvaluatingJavaScriptFromString:(NSString *)script;
II. iOS7的方案
ios7 主要是通過UIWebView來加載h5的頁面，但是IOS7增加了JavaScriptCore來實現原生和H5的交互
-
JS 調用OC
- JS端： 由于OC可以通過JavaScriptCore JSExport向JS端注入OC的對象，所以JS端可以直接調用OC的方法。OCObject.test("parmes")
- APP端：由于可以通過JSContxt直接注入對象，所以可以直接訪問對象的方法
OC 調用JS
- (nullable NSString *)stringByEvaluatingJavaScriptFromString:(NSString *)script;
III. iOS8之后的方案
iOS8之后推薦使用WKWebView,WKWebView 不支持JavaScriptCore, 但是提供了 userContentController WKUserContentController 來實現JS的注入, 主要的方式可以叫做messageHandler
-
JS 調用 OC
JS 端：postMessage window.webkit.messageHandlers.Tips.postMessage('xiao黃');
APP端：主要是通過WKWebView的代理，來截取方法和參數,
WKScriptMessageHandler
-
OC調用JS
- (void)evaluateJavaScript:(NSString *)javaScriptString completionHandler:(void (^ _Nullable)(_Nullable id, NSError * _Nullable error))completionHandler;
二、UIWebView原生方法
I. 設置UIWebView的代理，截取request
- JS調用OC的方法
JS代碼
//這個方法刷新的時候不會導致頁面消失
function loadURL(url) {
var iFrame;
iFrame = document.createElement("iframe");
iFrame.setAttribute("src",url);
iFrame.setAttribute("style","display:none");
iFrame.setAttribute("height","0px");
iFrame.setAttribute("weight","0px");
iFrame.setAttribute("frameborder","0");
document.body.appendChild(iFrame);
iFrame.parentNode.removeChild(iFrame);
iFrame = null;
}
// JQuery 的寫法，$() 就是JS的document.getElementById()
$(document).ready(function () {
console.log("xxxxxxxxx");
$("#login_btn").click(function () {
// loadURL 來調用OC的方法
loadURL("yyHetRequest://scan");
});
});
OC代碼
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType
{
NSLog(@"%@ type ", request.URL.absoluteString);
NSURL *url = [request URL];
NSString *scheme = [url scheme];
if ([scheme isEqualToString:@"yyhetrequest"]) {
[self handleJSRequest:url];
}
return true;
}
- (void)handleJSRequest:(NSURL *)url
{
NSString *host = [url host];
if ([host isEqualToString:@"scan"]) {
[self scanAction];
}
}
- OC 調用JS的代碼
NSString *jsCode =
@"var demoP = document.getElementById('demo');"
@"demoP.innerHTML = 'ios write'";
[_webView stringByEvaluatingJavaScriptFromString:jsCode];
三、EasyJSWebView的使用和原理
I. EasyJsWebView的庫，使用方法
1、APP端
// 創建接口對象
@interface MyJSInterface : NSObject
- (void) test;
- (void) config: (NSString*) param;
- (void) testWithTwoParam: (NSString*) param AndParam2: (NSString*) param2;
- (NSString*) testWithRet;
@end
// 在OC中向JS 注入OC對象
MyJSInterface* interface = [MyJSInterface new];
[self.myWebView addJavascriptInterfaces:interface WithName:@"bindJavaScript"];
[interface release];
2、H5端
//js中調用OC的方法
var appInterfaceNS = 'bindJavaScript'; // app注入接口的命名空間
var __AppInterface = window[appInterfaceNS] || {}; // 接入APP接口
/**
* 通知app開始初始化
* @param {json} options 配置信息及提交給app的初始化信息
* @return {Function} 返回值由app決定，該值為非必須值
*/
$this.config = function(options){
var data = {};
data = JSON.stringify(options);
return typeof __AppInterface.config === 'function' && __AppInterface.config(data);
};
II. EasyJsWebView的原理
EasyJS的執行過程主要是兩個階段：
- 注入階段
- 代碼執行解析階段
1、注入階段
注入的代碼分為兩個部分：
注入一段JS代碼，創建EasyJs對象。
將OC方法，在JS里面再創建一次，并且保存到JS的一個數組。
注入OC對象的方法
[self.myWebView addJavascriptInterfaces:interface WithName:@"MyJSTest"];
注入源碼解析：
EasyJSWebView 包含的函數：
- EasyJSWebView
- EasyJSDataFunction
- EasyJSWebViewProxyDelegate
a、 EasyJSWebView的頭文件，包含了注入JS的過程和加入OC對象的過程
@interface EasyJSWebView : UIWebView
// All the events will pass through this proxy delegate first
@property (nonatomic, retain) EasyJSWebViewProxyDelegate* proxyDelegate;
- (void) initEasyJS;
- (void) addJavascriptInterfaces:(NSObject*) interface WithName:(NSString*) name;
@end
b、 EasyJSWebViewProxyDelegate 主要來實現UIWebView的代理方法,
EasyJSWebViewProxyDelegate的JS代碼， 這段JS代碼主要是向H5的JS環境中創建一個叫EasyJS的對象，總共包含4個對象：
- __callbacks : 存儲回調的數組。
- invokeCallback: 執行callback的函數。
- call: JS調用OC的方法的函數，本質上是組裝UIWebView的request，格式：
easy-js:MyJSTest:s%12%cd%12s__cd1234562,iOS會在代理里面去解析這個字符串。 - inject: OC想JS注入接口，方便H5端來調用OC的接口。
window.EasyJS =
{
__callbacks: {},
//回調數組
invokeCallback:
function (cbID, removeAfterExecute)
{
var args = Array.prototype.slice.call(arguments);
args.shift();
args.shift();
for (var i = 0, l = args.length; i < l; i++)
{
args[i] = decodeURIComponent(args[i]);
}
var cb = EasyJS.__callbacks[cbID];
if (removeAfterExecute)
{
EasyJS.__callbacks[cbID] = undefined;
}
return cb.apply(null, args);
},
//根據OC的函數名來創建JS函數，通過iframe調用OC的UIWevView的delegate
//"- (BOOL)webView: shouldStartLoadWithRequest: navigationType:"
// 規則：ios端拿到字符串后`easy-js:MyJSTest:s%12%cd%12f__cd1234562`
// easy-js 表示js調用OC方法的開頭
// MyJSTest 表示OC想JS暴露的對象
// s 表示數組下一位為參數
// f 表示數組下一位為函數，主要f后面跟著的內容是一個key，這個key表示OC對JS的回調，JS會將這項回調保存到
call:
function (obj, functionName, args){
var formattedArgs = [];
for (var i = 0, l = args.length; i < l; i++)
{
if (typeof args[i] == "function")
{
formattedArgs.push("f");
var cbID = "__cb" + (+new Date);
EasyJS.__callbacks[cbID] = args[i];formattedArgs.push(cbID);
}else{
formattedArgs.push("s");
formattedArgs.push(encodeURIComponent(args[i]));
}
}
var argStr = (formattedArgs.length > 0 ? ":" + encodeURIComponent(formattedArgs.join(":")) : "");
var iframe = document.createElement("IFRAME");
iframe.setAttribute("src", "easy-js:" + obj + ":" + encodeURIComponent(functionName) + argStr);
document.documentElement.appendChild(iframe);
iframe.parentNode.removeChild(iframe);
iframe = null;
var ret = EasyJS.retValue;EasyJS.retValue = undefined;
if (ret){
return decodeURIComponent(ret);
}
},
//講OC的方法，注入到JS代碼中，實現JS回調OC的方法
inject:
function (obj, methods){
window[obj] = {};
var jsObj = window[obj];
for (var i = 0, l = methods.length; i < l; i++)
{
(
function (){
var method = methods[i];
var jsMethod = method.replace(new RegExp(":", "g"), "");
jsObj[jsMethod] = function ()
{
return EasyJS.call(obj, method, Array.prototype.slice.call(arguments));
};
}
)();
}
}
};
EasyJSWebViewProxyDelegate實現UIWebView的代理方法
下面有一段通過函數名來調用一個對象的函數的涉及到兩個類：NSMethodSignature `` NSInvocation
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType{
NSString *requestString = [[request URL] absoluteString];
if ([requestString hasPrefix:@"easy-js:"]) {
/*
A sample URL structure:
easy-js:MyJSTest:test
easy-js:MyJSTest:testWithParam%3A:haha
*/
NSArray *components = [requestString componentsSeparatedByString:@":"];
//NSLog(@"req: %@", requestString);
NSString* obj = (NSString*)[components objectAtIndex:1];
NSString* method = [(NSString*)[components objectAtIndex:2]
stringByReplacingPercentEscapesUsingEncoding:NSUTF8StringEncoding];
NSObject* interface = [javascriptInterfaces objectForKey:obj];
// execute the interfacing method
SEL selector = NSSelectorFromString(method);
// 獲取方法簽名
NSMethodSignature* sig = [[interface class] instanceMethodSignatureForSelector:selector];
// 獲取invoker對象
NSInvocation* invoker = [NSInvocation invocationWithMethodSignature:sig];
invoker.selector = selector;
invoker.target = interface;
NSMutableArray* args = [[NSMutableArray alloc] init];
// 獲取參數
if ([components count] > 3){
NSString *argsAsString = [(NSString*)[components objectAtIndex:3]
stringByReplacingPercentEscapesUsingEncoding:NSUTF8StringEncoding];
NSArray* formattedArgs = [argsAsString componentsSeparatedByString:@":"];
for (int i = 0, j = 0, l = [formattedArgs count]; i < l; i+=2, j++){
NSString* type = ((NSString*) [formattedArgs objectAtIndex:i]);
NSString* argStr = ((NSString*) [formattedArgs objectAtIndex:i + 1]);
if ([@"f" isEqualToString:type]){
EasyJSDataFunction* func = [[EasyJSDataFunction alloc] initWithWebView:(EasyJSWebView *)webView];
func.funcID = argStr;
[args addObject:func];
[invoker setArgument:&func atIndex:(j + 2)];
}else if ([@"s" isEqualToString:type]){
//invoker 傳入參數
NSString* arg = [argStr stringByReplacingPercentEscapesUsingEncoding:NSUTF8StringEncoding];
[args addObject:arg];
[invoker setArgument:&arg atIndex:(j + 2)];
}
}
}
//調用函數
[invoker invoke];
//return the value by using javascript
if ([sig methodReturnLength] > 0){
NSString* retValue;
[invoker getReturnValue:&retValue];
if (retValue == NULL || retValue == nil){
[webView stringByEvaluatingJavaScriptFromString:@"EasyJS.retValue=null;"];
}else{
retValue = (NSString *)CFBridgingRelease(CFURLCreateStringByAddingPercentEscapes(NULL,(CFStringRef) retValue, NULL, (CFStringRef)@"!*'();:@&=+$,/?%#[]", kCFStringEncodingUTF8));
[webView stringByEvaluatingJavaScriptFromString:[@"" stringByAppendingFormat:@"EasyJS.retValue=\"%@\";", retValue]];
}
}
return NO;
}
if (! self.realDelegate){
return YES;
}
return [self.realDelegate webView:webView shouldStartLoadWithRequest:request navigationType:navigationType];
}
一、OC 調用 JS
NSString *jsCode =
@"var demoP = document.getElementById('demo');"
@"demoP.innerHTML = 'ios write'";
[_webView stringByEvaluatingJavaScriptFromString:jsCode];
二、JS 調用 OC
- 兩個方案:
- 截取request
- 用JavaScriptCore
2.使用JavascriptCore
OC代碼
JSTextObjext
//JSTestObjext.h
@protocol JSTextObjectProtocol <JSExport>
- (void)callOCFunction;
- (void)callOCFunctionWithFirstParments:(NSString *)parmentOne;
- (void)callOCFunctionWithFirstParments:(NSString *)parmentone SecondParments:(NSString *)parmentsTwo;
@end
@interface JSTestObjext : NSObject <JSTextObjectProtocol>
@end
//JSTestObjext.m
@implementation JSTestObjext
- (void)callOCFunction
{
NSLog(@"callOCFunction");
}
- (void)callOCFunctionWithFirstParments:(NSString *)parmentOne
{
NSLog(@"callOCFunctionWithFirstParments %@",parmentOne);
}
- (void)callOCFunctionWithFirstParments:(NSString *)parmentone SecondParments:(NSString *)parmentsTwo
{
NSLog(@"callOCFunctionWithFirstParments one %@ two %@",parmentone, parmentsTwo );
}
@end
在webview 加載完后創建想context 注冊
#pragma UIWebViewDelegate
-(void)webViewDidFinishLoad:(UIWebView *)webView
{
JSContext *context = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
JSTestObjext *obj = [JSTestObjext new];
// JS調用OC的對象方法
context[@"testObj"] = obj;
//JS調用OC的Block方法
context[@"log"] = ^(){
NSLog(@"log log log");
NSArray *argument = [JSContext currentArguments];
if (argument.count < 3) {
return ;
}
NSString *onePar = [argument[0] toString];
NSString *twoPar = [argument[1] toString];
NSString *thrPar = [argument[2] toString];
NSLog(@" %@ %@ %@", onePar, twoPar, thrPar);
NSString *shareSuccess = [NSString stringWithFormat:@"showAlert(%@)",onePar];
[[JSContext currentContext]evaluateScript:shareSuccess];
};
}
JS調用
// JQuery 的寫法，$() 就是JS的document.getElementById()
$(document).ready(function () {
console.log("xxxxxxxxx");
$("#get_cookie").click(function () {
// 調用想context注冊的方法
testObj.callOCFunction();
});
});
