OC与JS交互

来源：互联网发布：linux 查看启动的服务编辑：程序博客网时间：2024/05/21 08:41

oc与js交互

在开发当中我们也许会经常遇到这样的问题：当我们用webview加载一个网页时，需要动态修改网页的内容或者在点击网页上一个按钮或标签时需要执行oc代码。这时由于h5页面在服务器端，而我们的oc代码在我们客户端，并且是用不同的语言编写的，代码不能直接交互。这时我们该如何解决的呢？

一：js调用oc代码
如何你还没有h5和js基础，下面的代码你不需要明白是什么东西。我们用webView加载下面的本地网页：

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>oc与js交互</title></head><body><br><br><br><div id="content">    <button  onclick="address()" >        地址簿    </button>    <button id="telephone" onclick="telephone()">        打电话    </button></div><script>    //当点击地址簿时就会调用    function address(){    //加载一个网页，网页请求地址为sb://address       window.location.href="sb://address";    }    //当点击电话按钮时就会调用    function telephone(){   //加载一个网页，网页请求地址为sb://telephone        window.location.href ="sb://telephone"    }</script></body></html>

加载完毕后页面效果如下：

这里写图片描述

你只需要知道当点击地址簿时就会调用一下函数：

   //当点击地址簿时就会调用    function address(){    //加载一个网页，网页请求地址为sb://address       window.location.href="sb://address";    }

这时就会加载一个请求，并且调用webView的代理方法- (BOOL)webView:(UIWebView )webView shouldStartLoadWithRequest:(NSURLRequest )request navigationType:(UIWebViewNavigationType)navigationType，这时就会把url地址也就是sb://address传递过来，我们可以对传递过来的地址进行截取然后对截取的字符串包装成oc的方法进行调用。

- (void)viewDidLoad {    [super viewDidLoad];    self.webView =[[UIWebView alloc]initWithFrame:self.view.bounds];    self.webView.delegate = self;    [self.view addSubview:self.webView];    NSURL *url = [[NSBundle mainBundle] URLForResource:@"index" withExtension:@"html"];    NSURLRequest *request = [NSURLRequest requestWithURL:url];    [self.webView loadRequest:request];}//当用webview加载一个网页时（请求），都会提前调用该方法，是否允许加载该请求-(BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType{    NSString *url = request.URL.absoluteString;    NSRange range = [url rangeOfString:@"sb://"];    NSUInteger loc = range.location;    if (loc != NSNotFound) { // url的协议头是sb        // 方法名        NSString *method = [url substringFromIndex:loc + range.length];        // 转成SEL        SEL sel = NSSelectorFromString(method);        //nil没有参数，如果有参数可以把截取的一些东西作为参数传递过来。        [self performSelector:sel withObject:nil];    }    return YES;}//调用地址簿-(void)address{    NSLog(@"%s",__func__);}//调用打电话-(void)telephone{     NSLog(@"%s",__func__);}

如果有参数可以在h5页面里面的URL路径加一些东西然后截取，把截取的东西包装成参数即可。

二：oc调用js

h5的页面是以标签的形式存在的，如果想要改变网页的内容，需要你有一定的h5和js基础。
这时我们需要用到webview的下面一个方法：

- (nullable NSString *)stringByEvaluatingJavaScriptFromString:(NSString *)script;

上面的(NSString *)script参数就是我们要下刀的地方，我们需要在这里面写一些js语言，我们演示一下比较简单的操作，比如我们把”打电话“的文字改成”相册“。

- (void)webViewDidFinishLoad:(UIWebView *)webView{     // 执行JS代码//        document.getElementById('telephone') 表示拿到id为telephone的标签;//    innerHTML属性表示内容。此例把电话改成相册。    [webView stringByEvaluatingJavaScriptFromString:@"  document.getElementById('telephone').innerHTML='相册';"];}

如果你并不了解h5和js你就要和写这些界面的人员进行沟通，让他们把这些语句写好，你在复制这些标签到script参数里面，不过这样并不是好的方式，作为一名开发者，无论何时都要力争学到这部分知识，即使你不是web开发者。这将对你大有益处！

0 0