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 : 基本上不需要做什么操作

交互的入口

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

项目方法调用JS

android	ios
`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交互中更容易操作！

android IOS在WebView 和 JS 交互对比