android IOS在WebView 和 JS 交互对比

本文对比了Android和iOS在WebView中与JavaScript交互的过程。在Android中,交互准备涉及复写webViewClient的shouldOverrideUrlLoading方法,而iOS则需要实现UIWebViewDelegate的shouldStartLoadWithRequest方法。JS调用项目方法时,Android通过window.location.href触发,iOS同样利用此方式,但两者协议不同。总体而言,iOS的交互体验显得更为简便。

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

android iOS WebView 和 JS 交互对比

  • 交互前的准备工作
  • 交互的入口
  • 项目方法调用JS
  • JS调用项目方法

交互前的准备工作

  • android :
    1:在webview添加对js的支持
     WebSettings setting = webView.getSettings();
        setting.setJavaScriptEnabled(true);
 `2:设置setWebViewClient和setWebChromeClient` 
      webView.setWebViewClient(new WebViewClient(){

        });
        webView.setWebChromeClient(new WebChromeClient(){

        });
  • IOS : 基本上不需要做什么操作

交互的入口

androidios
webView.loadUrl("file///:xxxx.html")[self.webView loadRequest:request];

项目方法调用JS

androidios
webView.addJavascriptInterface(new AndroidToastForJs(mContext), "JavaScriptInterface");[self.webView stringByEvaluatingJavaScriptFromString:@"document.getElementsByTagName('header')[0].remove();"]

JS调用项目方法

JS调用项目方法 需要在Js和项目代码里面定义好协议,然后通过项目代码拦截JS来执行相应的操作

在android 里需要在复写webViewClient里shouldOverrideUrlLoading 方法

  @Override
  public boolean shouldOverrideUrlLoading(WebView view, String url) {
       String  requestUrl = url;
       //TODO 拦截请求做相应的操作
       return super.shouldOverrideUrlLoading(view, url);
    }

在IOS 里需要实现UIWebViewDelegate 里shouldStartLoadWithRequest 方法


-(BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType
{

    NSString *requesrUrl = request.URL.absoluteString;
    //TODO 拦截请求做相应的操作
    return YES;

}
调用项目中对于的方法:

android : 在Html 中执行window.location.href = “android//openTestJS”调用对应的方法:

    //在HTML中执行的JS代码:window.location.href = "android://openTestJS"
    class  MyWebViewViewClient extends  WebViewClient{
        @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url) {
           if(url.length() !=0 && url.startsWith("android://"))
               int index = url.indexOf("android://");
                //获得方法名
               String methodName = url.substring(index);
               // 通过方法名反射获得方法
               Method  method = this.getClass().getDeclaredMethod(methodName);
               //执行该方法
               method.invoke(this);
           }
            return super.shouldOverrideUrlLoading(view, url);
        }
    }

    /**Android自己项目里面的代码*/
    public  void  openTestJS(){
        LogUtils.e("我被调用了...");
    }

IOS :在Html 中执行window.location.href = “ios//openTestJS”调用对应的方法:


//在HTML中执行的JS代码:window.location.href = "ios//openTestJS"
-(BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType
{
    NSString *requesrUrl = request.URL.absoluteString;
    NSRange range = [requesrUrl rangeOfString:@"ios://"];
    if (range.length != 0) {
        //1.截取方法名
        NSString *method = [requesrUrl substringFromIndex:range.location + range.length];
        //2.将字符串的方法名转为Selector类型
        SEL  selector = NSSelectorFromString(method);
        //3.执行项目里对于的方法
        [self performSelector:selector withObject:nil];

    }

    return YES;

}


//自己项目里面的代码
-(void) openTestJS
{

    NSLog(@"我被调用了....");

}

PS:明显感觉到 IOS在webView和JS交互中更容易操作!

本demo是WKWebView的基本使用交互 ,实现了原生调用js的方法、js调用原生的方法、通过拦截进行交互的方法;修改内容 加入沙盒 / /加载沙盒 不带参数 // NSArray * paths = NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES); // NSString * path = [paths objectAtIndex:0]; // path = [path stringByAppendingString:[NSString stringWithFormat:@"/app/html/index.html"]]; // NSURL *url = [NSURL URLWithString:[[NSString stringWithFormat:@"file://%@",path] stringByAddingPercentEncodingWithAllowedCharacters:[NSCharacterSet URLFragmentAllowedCharacterSet]] relativeToURL:[NSURL fileURLWithPath:NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES).firstObject]]; // [self.wkView loadFileURL:url allowingReadAccessToURL:[NSURL fileURLWithPath: [paths objectAtIndex:0]]]; // 带参数 /* NSArray * paths = NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES); NSString * path = [paths objectAtIndex:0]; path = [path stringByAppendingString:[NSString stringWithFormat:@"/app/html/index.html"]]; NSURL * url = [NSURL fileURLWithPath:path isDirectory:NO]; NSURLComponents *urlComponents = [NSURLComponents componentsWithURL:url resolvingAgainstBaseURL:NO]; [queryItemArray addObject:[NSURLQueryItem queryItemWithName:@"version" value:[[[NSBundle mainBundle] infoDictionary] objectForKey:@"CFBundleShortVersionString"]]]; [urlComponents setQueryItems:queryItemArray]; [self.wkView loadFileURL:urlComponents.URL allowingReadAccessToURL:[NSURL fileURLWithPath: [paths objectAtIndex:0]]]; */
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值