iOS解析---WebView和js交互原理

本文介绍了iOS中WebView与JavaScript交互的基本原理及实现方法。通过分析开源项目WebViewJavascriptBridge,展示了如何利用实例方法与回调代理实现双向通信。同时,提供了具体的代码示例。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

       

原文地址:点击打开链接



目前在网上看到很多介绍IOS里面WebView和JavaScript交互的文章。如果你想用网页去写一个app,那么我推荐 你去用PhoneGap (它是一个用基于HTML,CSS和JavaScript的,创建移动跨平台移动应用程序的快速开发平台)。如果你网页只是你app的一部分那么还是要去了解一下它们之间交互的原理。


       目前github上已经有相对成熟的开源项目,例如 WebViewJavascriptBridge ,你可以直接利用现成的框架快速实现js交互。介绍bridge的文章挺多,这里分析一个介绍的比较全面的博客My_Lord 。有兴趣的同学可以去转转~


       现在,我来为大家分析一下其中的原理。其实很简单,在IOS中,WebView和JavaScript直接的调用就是一个实例方法、一个回调代理:

       首先来看WebView调用js的方法:

    //调用特定的js方法
    [_myWebView stringByEvaluatingJavaScriptFromString:@"myFunction('Hello,js!');"];

       其中myFunction()为你的html页面里边早已写好的js函数。至于穿不穿参数,看你的选择。


      接下来是js调用WebView的方法,原理就是利用WebView的代理方法:

- (BOOL)<span id="8_nwp" style="list-style: none; width: auto; height: auto; float: none;"><a target=_blank id="8_nwl" href="http://cpro.baidu.com/cpro/ui/uijs.php?rs=1&u=http%3A%2F%2Fwww%2E350351%2Ecom%2Fbianchengyuyan%2FObjective%5Fc%2F318278%2Ehtml&p=baidu&c=news&n=10&t=tpclicked3_hc&q=83045059_cpr&k=web&k0=web&k1=%BF%AA%D4%B4&k2=javascript&k3=%BF%AA%B7%A2%C6%BD%CC%A8&k4=%B4%FA%C0%ED&k5=app&sid=c1d1272fce2e94d1&ch=0&tu=u1807396&jk=f961445607926bba&cf=29&fv=15&stid=9&urlid=0&luki=2&seller_id=1&di=128" target="_blank" mpid="8" style="list-style: none; padding: 0px 10px; margin: 0px; color: rgb(0, 182, 137); text-decoration: none;"><span style="list-style: none; color: rgb(0, 0, 255); width: auto; height: auto;">web</span></a></span>View:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType
{

}

       这个代理将会在js调用document.location的时候相应。接下来我们要定义好它们之间的暗号。

        function sendCommand(cmd,param){
            var url="testapp:"+cmd+":"+param;
            document.location = url;
        }

       我们定义以testapp:开头的url为我们的暗号。接下来是在代理里边识别该暗号:

#pragma <span id="4_nwp" style="list-style: none; width: auto; height: auto; float: none;"><a target=_blank id="4_nwl" href="http://cpro.baidu.com/cpro/ui/uijs.php?rs=1&u=http%3A%2F%2Fwww%2E350351%2Ecom%2Fbianchengyuyan%2FObjective%5Fc%2F318278%2Ehtml&p=baidu&c=news&n=10&t=tpclicked3_hc&q=83045059_cpr&k=mark&k0=mark&k1=ios&k2=web&k3=%BF%AA%D4%B4&k4=javascript&k5=%BF%AA%B7%A2%C6%BD%CC%A8&sid=c1d1272fce2e94d1&ch=0&tu=u1807396&jk=f961445607926bba&cf=29&fv=15&stid=9&urlid=0&luki=10&seller_id=1&di=128" target="_blank" mpid="4" style="list-style: none; padding: 0px 10px; margin: 0px; color: rgb(0, 182, 137); text-decoration: none;"><span style="list-style: none; color: rgb(0, 0, 255); width: auto; height: auto;">mark</span></a></span> - UIWebViewDelegate

- (BOOL)<span id="5_nwp" style="list-style: none; width: auto; height: auto; float: none;"><a target=_blank id="5_nwl" href="http://cpro.baidu.com/cpro/ui/uijs.php?rs=1&u=http%3A%2F%2Fwww%2E350351%2Ecom%2Fbianchengyuyan%2FObjective%5Fc%2F318278%2Ehtml&p=baidu&c=news&n=10&t=tpclicked3_hc&q=83045059_cpr&k=web&k0=web&k1=%BF%AA%D4%B4&k2=javascript&k3=%BF%AA%B7%A2%C6%BD%CC%A8&k4=%B4%FA%C0%ED&k5=app&sid=c1d1272fce2e94d1&ch=0&tu=u1807396&jk=f961445607926bba&cf=29&fv=15&stid=9&urlid=0&luki=2&seller_id=1&di=128" target="_blank" mpid="5" style="list-style: none; padding: 0px 10px; margin: 0px; color: rgb(0, 182, 137); text-decoration: none;"><span style="list-style: none; color: rgb(0, 0, 255); width: auto; height: auto;">web</span></a></span>View:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType
{
    static int count = 1;
    
    NSString *requestString = [[request.URL absoluteString]stringByReplacingPercentEscapesUsingEncoding:NSUTF8StringEncoding];;
    
    NSArray *components = [requestString componentsSeparatedByString:@":"];
    
    if ([components count] > 1 && [(NSString *)[components objectAtIndex:0] isEqualToString:@"test<span id="6_nwp" style="list-style: none; width: auto; height: auto; float: none;"><a target=_blank id="6_nwl" href="http://cpro.baidu.com/cpro/ui/uijs.php?rs=1&u=http%3A%2F%2Fwww%2E350351%2Ecom%2Fbianchengyuyan%2FObjective%5Fc%2F318278%2Ehtml&p=baidu&c=news&n=10&t=tpclicked3_hc&q=83045059_cpr&k=app&k0=app&k1=%B2%A9%BF%CD&k2=%CD%A8%D0%C5&k3=mark&k4=ios&k5=web&sid=c1d1272fce2e94d1&ch=0&tu=u1807396&jk=f961445607926bba&cf=29&fv=15&stid=9&urlid=0&luki=7&seller_id=1&di=128" target="_blank" mpid="6" style="list-style: none; padding: 0px 10px; margin: 0px; color: rgb(0, 182, 137); text-decoration: none;"><span style="list-style: none; color: rgb(0, 0, 255); width: auto; height: auto;">app</span></a></span>"]) {
        
        //解析约定的指令
        if([(NSString *)[components objectAtIndex:1] isEqualToString:@"alert"])
        {
            UIAlertView *alert = [[UIAlertView alloc]
                                  initWithTitle:[NSString stringWithFormat:@"消息%d",count++] message:[components objectAtIndex:2]
                                  delegate:self cancelButtonTitle:nil
                                  otherButtonTitles:@"OK", nil];
            [alert show];
        }
        return NO;
    }
    return YES;
}

         大功告成!是不是很简单~   只要我们定义好了传递的暗号,我们就可以让双方相互“通信”了!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值