js與native交互

UIWebView

Native調(diào)用JS,使用stringByEvaluatingJavaScriptFromString來解釋執(zhí)行js腳本织中。

//script即為要執(zhí)行的js方法名稱
- (NSString *)stringByEvaluatingJavaScriptFromString:(NSString *)script;

PS:蘋果推薦iOS8之后的app使用WKWebView來代替UIWebView,同時(shí)也使用方法evaluateJavaScript:completionHandler:來替代stringByEvaluatingJavaScriptFromString斩启,因?yàn)闀?huì)一直等待stringByEvaluatingJavaScriptFromString方法執(zhí)行完畢

JS調(diào)用Native米死,需要通過UIWebView攔截跳轉(zhuǎn)請求并判斷請求頭是否是協(xié)商好的協(xié)議頭來判斷是否是JS發(fā)起調(diào)用Native的請求倦蚪。

- webView:shouldStartLoadWithRequest:navigationType:

function callNative{
    var url = ”callNative://nslogHelloWord“
     window.location.href = url;
}
- (BOOL)webView:(UIWebView*)webView shouldStartLoadWithRequest:(NSURLRequest*)request navigationType:(UIWebViewNavigationType)navigationType{
    //callNative 為約定好的協(xié)議頭隘擎,如果是,則頁面不進(jìn)行跳轉(zhuǎn)
    if ([request.URL.scheme isEqualToString:@"callNative"]) {
        NSlog(@"Hello World");
        return NO;
    }
    //不是自定義協(xié)議頭探孝,跳轉(zhuǎn)頁面
    return YES;
}

WKWebView

蘋果自iOS8笋婿、OS X 10.10推薦使用WKWebView來代替原先的UIWebViewWKWebView擁有更快的加載速度和性能顿颅,更低的內(nèi)存占用缸濒,同時(shí)更細(xì)致的代理分類來滿足不同需要的調(diào)用。

Native調(diào)用JS,使用方法evaluateJavaScript:completionHandler:來解釋執(zhí)行腳本。

//javaScriptString要執(zhí)行的js方法
//completionHandler執(zhí)行結(jié)束回調(diào)或者發(fā)生錯(cuò)誤時(shí)回調(diào)
- (void)evaluateJavaScript:(NSString *)javaScriptString completionHandler:(void (^)(id, NSError *error))completionHandler;

JS調(diào)用Native庇配,通過代理WKScriptMessageHandler來實(shí)現(xiàn)調(diào)用斩跌。

#import "WKWVController.h"
#import <WebKit/WebKit.h>
@interface WKWVController ()<WKUIDelegate,WKScriptMessageHandler>

@property (strong, nonatomic) WKWebView *webView;

@end

@implementation WKWVController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    
    // js配置
    WKUserContentController *userContentController = [[WKUserContentController alloc] init];
    //監(jiān)聽方法名
    [userContentController addScriptMessageHandler:self name:@"jsCallOC"];
    
    // WKWebView的配置
    WKWebViewConfiguration *configuration = [[WKWebViewConfiguration alloc] init];
    configuration.userContentController = userContentController;

    
    // 顯示W(wǎng)KWebView
    _webView = [[WKWebView alloc] initWithFrame:[UIScreen mainScreen].bounds configuration:configuration];
    _webView.UIDelegate = self; // 設(shè)置WKUIDelegate代理
    [self.view addSubview:_webView];
    

    
    NSURL *url = [[NSBundle mainBundle] URLForResource:@"index" withExtension:@"html"];
    NSURLRequest *urlRequest = [NSURLRequest requestWithURL:url];
    
    [_webView loadRequest:urlRequest];
    
    
}


// WKScriptMessageHandler protocol?

- (void)userContentController:(WKUserContentController *)userContentController
      didReceiveScriptMessage:(WKScriptMessage *)message
{
    NSLog(@"方法名:%@", message.name);
    NSLog(@"參數(shù):%@", message.body);
    // 方法名
    NSString *methods = [NSString stringWithFormat:@"%@", message.name];
    SEL selector = NSSelectorFromString(methods);
    // 調(diào)用方法
    if ([self respondsToSelector:selector]) {
        [self performSelector:selector withObject:message.body];
    } else {
        NSLog(@"未實(shí)行方法:%@", methods);
    }
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];

}

- (void)jsCallOC{
    [self.webView evaluateJavaScript:@"wkNativeCallJS('嘿嘿')" completionHandler:^(id _Nullable data, NSError * _Nullable error) {
        NSLog(@"我執(zhí)行完畢");
    }];
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
            <title>網(wǎng)頁</title>
    </head>
    <body>

        <button onclick="wkWebViewTestClick()" style="height: 100px;width: 200px;">點(diǎn)我調(diào)用native方法</button>

        
    
        
        function wkNativeCallJS(info){
            //wkwebview 不直接使用js的alert 顯示不了
            //http://stackoverflow.com/questions/34185339/wkwebview-javascript-confirm-and-alert-not-working
            console.log(info);
        }
        
    
      function wkWebViewTestClick(){
            // 復(fù)雜數(shù)據(jù)
            var list = [1,2,3];
            var dict = {"name":"陽君", "qq":"937447974"};
            // JS通知WKWebView,jsCallOC即為在controller中注冊的方法名稱
            window.webkit.messageHandlers.jsCallOC.postMessage(dict);
        }
        
        

        </script>
    </body>
</html>

JavaScriptCore方式相互調(diào)用

在iOS7.0中蘋果公司增加了JS利器JavaScriptCore框架捞慌,JavaScriptCore提供了很多靈活的本地OC與JS的交互方式耀鸦,通過JSContextJSValue來完成的,JSContext是一個(gè)WebView中js代碼運(yùn)行環(huán)境啸澡,js可以通過JSContextblock和通過繼承JSExport代理袖订,自定義實(shí)現(xiàn)代理方法。

#import "WVController.h"
#import <JavaScriptCore/JavaScriptCore.h>

@protocol JSObjcDelegate <JSExport>

-(void)logInfo:(NSString*)info;

@end

@interface WVController ()<JSObjcDelegate>
@property (weak, nonatomic) IBOutlet UIWebView *wv;
@property (nonatomic, strong) JSContext *jsContext;
@end

@implementation WVController

- (void)viewDidLoad {
    [super viewDidLoad];
    NSString* path = [[NSBundle mainBundle]pathForResource:@"index" ofType:@"html"];
    NSURL* url = [NSURL URLWithString:path];
    NSURLRequest* request = [NSURLRequest requestWithURL:url];
    
    [self.wv loadRequest:request];
   
}


//oc調(diào)用js
- (IBAction)callJSMethod:(id)sender {
    [self.wv stringByEvaluatingJavaScriptFromString:@"wvNativeCallJS()"];
}

//使用url攔截
-(BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType{
    if ([request.URL.scheme isEqualToString:@"callnative"]) {
        NSLog(@"hello world");
        return false;
    }
    return true;
}
- (void)webViewDidFinishLoad:(UIWebView *)webView {
    //獲取上下文對象
    self.jsContext = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
    self.jsContext[@"Objc"] = self;
    self.jsContext.exceptionHandler = ^(JSContext *context, JSValue *exceptionValue) {
        context.exception = exceptionValue;
        NSLog(@"異常信息:%@", exceptionValue);
    };
    
    //直接使用block方式執(zhí)行oc方法
    self.jsContext[@"logHello"] = ^(){
        NSLog(@"hello");
    };
}
//使用代理接口方式執(zhí)行native方法
-(void)logInfo:(NSString *)info{
    NSLog(@"js傳來的參數(shù)%@",info);
    JSValue* callback = self.jsContext[@"wvNativeCallJS"];
    [callback callWithArguments:nil];
}
@end

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
            <title>網(wǎng)頁</title>
    </head>
    <body>
        
//1
      <button onclick="Objc.logInfo('哈哈')" style="height: 100px;width: 200px;">點(diǎn)我調(diào)用native方法</button>
//2
<!--        <button onclick="logHello()" style="height: 100px;width: 200px;">點(diǎn)我調(diào)用native方法</button>-->

    
        <script type="text/javascript">
            function wvNativeCallJS(){
                alert("wvController");
            }
    
        </script>
    </body>
</html>

DEMO:下載Demo

參考:

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末嗅虏,一起剝皮案震驚了整個(gè)濱河市洛姑,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌皮服,老刑警劉巖楞艾,帶你破解...
    沈念sama閱讀 212,383評(píng)論 6 493
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異龄广,居然都是意外死亡硫眯,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,522評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門择同,熙熙樓的掌柜王于貴愁眉苦臉地迎上來两入,“玉大人,你說我怎么就攤上這事敲才∽慌伲” “怎么了?”我有些...
    開封第一講書人閱讀 157,852評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵归斤,是天一觀的道長。 經(jīng)常有香客問我刁岸,道長脏里,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,621評(píng)論 1 284
  • 正文 為了忘掉前任虹曙,我火速辦了婚禮迫横,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘酝碳。我一直安慰自己矾踱,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,741評(píng)論 6 386
  • 文/花漫 我一把揭開白布疏哗。 她就那樣靜靜地躺著呛讲,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上贝搁,一...
    開封第一講書人閱讀 49,929評(píng)論 1 290
  • 那天吗氏,我揣著相機(jī)與錄音,去河邊找鬼雷逆。 笑死弦讽,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的膀哲。 我是一名探鬼主播往产,決...
    沈念sama閱讀 39,076評(píng)論 3 410
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼某宪!你這毒婦竟也來了仿村?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,803評(píng)論 0 268
  • 序言:老撾萬榮一對情侶失蹤缩抡,失蹤者是張志新(化名)和其女友劉穎奠宜,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體瞻想,經(jīng)...
    沈念sama閱讀 44,265評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡压真,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,582評(píng)論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了蘑险。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片滴肿。...
    茶點(diǎn)故事閱讀 38,716評(píng)論 1 341
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖佃迄,靈堂內(nèi)的尸體忽然破棺而出泼差,到底是詐尸還是另有隱情,我是刑警寧澤呵俏,帶...
    沈念sama閱讀 34,395評(píng)論 4 333
  • 正文 年R本政府宣布堆缘,位于F島的核電站,受9級(jí)特大地震影響普碎,放射性物質(zhì)發(fā)生泄漏吼肥。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 40,039評(píng)論 3 316
  • 文/蒙蒙 一麻车、第九天 我趴在偏房一處隱蔽的房頂上張望缀皱。 院中可真熱鬧,春花似錦动猬、人聲如沸啤斗。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,798評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽钮莲。三九已至免钻,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間臂痕,已是汗流浹背伯襟。 一陣腳步聲響...
    開封第一講書人閱讀 32,027評(píng)論 1 266
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留握童,地道東北人姆怪。 一個(gè)月前我還...
    沈念sama閱讀 46,488評(píng)論 2 361
  • 正文 我出身青樓,卻偏偏與公主長得像澡绩,于是被迫代替她去往敵國和親稽揭。 傳聞我的和親對象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,612評(píng)論 2 350

推薦閱讀更多精彩內(nèi)容