美文网首页
JS与OC交互,JS中调用OC方法

JS与OC交互,JS中调用OC方法

作者: karthus | 来源:发表于2018-05-10 09:25 被阅读278次

最近用到JS和OC原生方法调用的问题,查了许多资料都语焉不详,自己记录一下吧,如果有误欢迎联系我指出。

JS中调用OC方法有三种方式:

1.通过获取JSContext的方式直接调用OC方法
2.通过继承自JSExport的方式调用delegate中的方法
3.截取URL的方式(此种方式资料很多,就不写了)

先上OC代码

-(void)webViewDidFinishLoad:(UIWebView *)webView
{
    self.jsContext =  [self.webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];

    // 方法一
    __weak typeof(self) weakSelf = self;
    self.jsContext[@"getMessage"] = ^(){
        return [weakSelf blockCallMessage];
    };

    // 方法二
    self.jsContext[@"JavaScriptInterface"] = self;
}

- (NSString *)blockCallMessage
{
    return @"call via block";
}

#pragma mark - JSCallDelegate
  // 提供给JS调用的方法
- (NSString *)tipMessage
{
    return @"call via delegate";
}

HTML代码

<html>
<head>
</head>
<body>
    <script>
        function buttonClick1()
        {
            // 方法一
             var token = getMessage();

            alert(token)
        }
        function buttonClick2()
        {
            // 方法二
            var token = JavaScriptInterface.tipMessage();
        
            alert(token)
        }
        </script>
    <button id="abc" onclick="buttonClick1()">function 1</button>
    <button id="abcd" onclick="buttonClick2()">function 2</button>
</body>
</html>

方法一中的jsContext[@"getMessage"]需要和JS中调用的方法名一致,既JS中需要直接调用getMessage(),而jsContext[@"getMessage"]则赋值为一个block,这个block中调用的方法就是JS中调用getMessage()就是执行这个block;

方法二中的jsContext[@"JavaScriptInterface"] = self其中的JavaScriptInterface可以随便命名,保持JS中和该命名保持一致即可,JS中通过JavaScriptInterface来调用继承自JSExport的delegate中的方法,即JavaScriptInterface.tipMessage()

demo下载

相关文章

  • JS与OC交互大总结之二--OC调用JS

    我们接着来聊一聊JS与OC交互的那些事儿。上一篇只介绍的了JS调用OC的方法:JS与OC交互大总结之一 JS调用O...

  • 无标题文章

    OC与JS的交互 这个demo主要做了以下几个功能: js调用oc,并传值 oc调用js 并传值 js调用oc,...

  • OC/SWIFT 与JS 交互

    开发中移动端经常涉及到与js交互的功能,例如:js需要调用oc的方法,或者oc需要调用js的方法。 一、js调用o...

  • iOS原生&JS交互

    OC 获取js中的key OC调用js方法 JS调用OC中不带参数的block JS调用OC中带参数的block ...

  • js iOS原生交互

    一、交互(UIWebView) 1、OC调用JS (1)OC调用代码 (2)JS代码 2、JS调用OC (1)OC...

  • WebViewJavascriptBridge 使用

    目的 掌握 OC 调用 JS方法 JS 调用 OC方法 OC——>sender JS——> sender OC 调...

  • iOS UIWebView 之JS交互

    通过JavaScriptCore实现OC与JS的交互1 OC调用JS 在JS中JavaScript代码如下 2 J...

  • OC和JS的交互那点事

    1、OC调用JS代码 在代理方法webViewDidFinishLoad:方法中调用JS代码 2、JS调用OC代码...

  • WKWebView与JS交互

    //WKWebView 中。JS调用OC方法重写WKScriptMessageHandler避免与JS交互时内存泄...

  • OC与JS交互

    OC与JS交互前言 OC与JS交互之UIWebView OC与JS交互之WebViewJavascriptBrid...

网友评论

      本文标题:JS与OC交互,JS中调用OC方法

      本文链接:https://www.haomeiwen.com/subject/hhxnrftx.html