`
ch_kexin
  • 浏览: 897451 次
  • 性别: Icon_minigender_2
  • 来自: 青岛
社区版块
存档分类
最新评论

Android Webview 和Javascript交互,实现Android和JavaScript相互调用

 
阅读更多

在Android的开发过程中、遇到一个新需求、那就是让Java代码和Javascript代码进行交互、在IOS中实现起来很麻烦、而在Android中相对来说容易多了、Android对这种交互进行了很好的封装、我们可以很简单的用Java代码调用WebView中的js函数、也可以用WebView中的js来调用Android应用中的Java代码。

案例主要包含了:

  1.  Html中调用Android方法
  2. Android调用JS方法无参数
  3. Android调用JS方法有参数
  4. Android调用JS方法有参数且有返回值处理方式1
  5. Android调用JS方法有参数且有返回值处理方式2(Android4.4以上)

1:创建JS对象

webView.addJavascriptInterface(new JsInterface(), "obj");
public class JsInterface {
    //JS中调用Android中的方法 和返回值处理的一种方法
        
    /****
          * Html中的点击事件 onclick
      *  <input type="button" value="结算" onclick="showToast('12')">
      * @param toast
      */
    @JavascriptInterface
    public void showToast(String toast) {
      Toast.makeText(MainActivity.this, "你的商品价格是:¥"+toast, Toast.LENGTH_SHORT).show();
    }
}

function showToast(toast) { 
    var money=toast*3;
    javascript:obj.showToast(money);
}

 2:

webView.loadUrl("javascript:funFromjs()");
function funFromjs(){
    document.getElementById("helloweb").innerHTML="div显示数据,无参数";
}

 3:

webView.loadUrl("javascript:funJs('Android端传入的信息,div标签中显示,含参数')");
function funJs(msg){
   document.getElementById("hello2").innerHTML=msg;
}

 4:

webView.loadUrl("javascript:sum(6,6)");
/***
 * Android代码调用获取J是中的返回值
 * 
 * @param result
*/
   @JavascriptInterface
   public void onSum(int result) { 
    Toast.makeText(MainActivity.this, "Android调用JS方法且有返回值+计算结果=="+result, Toast.LENGTH_SHORT).show();
   }
function sum(i,m){ 
    var result = i*m; 
    document.getElementById("h").innerHTML= "Android调用JS方法且有返回值--计算结果="+result; 
    javascript:obj.onSum(result) 
} 

 5:

webView.evaluateJavascript("sumn(6,11)", new ValueCallback<String>() {
         @Override
     public void onReceiveValue(String value) {
         Toast.makeText(MainActivity.this, "返回值"+value, Toast.LENGTH_SHORT).show();
           }
});
function sumn(i,m){ 
     var result = i*m; 
     document.getElementById("hh").innerHTML= "Android调用JS方法且有返回值--计算结果="+result; 
     return result;
} 

 注意:

1、Java 调用 js 里面的函数、效率并不是很高、估计要200ms左右吧、做交互性很强的事情、这种速度很难让人接受、而js去调Java的方法、速度很快、50ms左右、所以尽量用js调用Java方法

2、Java 调用 js 的函数、没有返回值、调用了就控制不到了

3、Js 调用 Java 的方法、返回值如果是字符串、你会发现这个字符串是 native 的、转成 locale 的才能正常使用、使用 toLocaleString() 函数就可以了、不过这个函数的速度并不快、转化的字符串如果很多、将会很耗费时间

4、网页中尽量不要使用jQuery、执行起来需要5-6秒、最好使用原生的js写业务脚本、以提升加载速度、改善用户体验。

 

注:使用的是本地的Html文件,不过在网络链接的Html文件也是可以实现的。   

源码点击下载

 

 

分享到:
评论

相关推荐

    Android WebView与JavaScript交互实现Web App

    接下来,我们讨论如何实现WebView与JavaScript的交互。Android提供了两种主要的方法:`addJavascriptInterface()`和`evaluateJavascript()`。 1. **addJavascriptInterface()**: 这个方法可以将Android对象暴露给...

    IOS WebView与JavaScript交互实现Web App

    接下来,我们要讨论的是如何实现WebView与JavaScript的交互。在iOS中,`UIWebView`提供了两个主要的方法来实现这一功能:`stringByEvaluatingJavaScriptFromString:`和`addScriptMessageHandler:name:`。 1. `...

    android中Webview与javascript的交互(互相调用)

    3. **异步调用**:如果JavaScript调用Android方法需要较长的时间,可以考虑使用异步处理,以免阻塞UI线程。 总之,Android中的WebView与JavaScript的交互是通过暴露Java对象和调用JavaScript函数实现的,这种方式极...

    Android WebView与JavaScript交互

    总之,Android WebView与JavaScript的交互为开发者提供了丰富的可能性,既可利用Web技术快速构建界面,又能通过Java接口实现原生功能,提高应用的可扩展性和灵活性。正确理解和运用这一特性,可以使我们的Android...

    android webview与js交互简单demo

    - JavaScript调用Android:在JavaScript中调用注册接口的方法,例如`window.androidFunction()`,这将在Android端执行对应的javaFunction()方法。 4. 安全性考虑: - @JavascriptInterface注解:自API 17起,为...

    Android WebView与JavaScript交互(续)

    三、JavaScript调用Android方法 在JavaScript中,可以通过window对象访问到Android提供的接口。比如上面的例子,我们可以在JavaScript中这样调用: ```javascript window.android.showToast('Hello from JavaScript...

    Android高级应用源码-Android webView和js交互的Demo.rar

    这份"Android高级应用源码-Android webView和js交互的Demo"就为我们展示了如何实现这种交互。 首先,我们需要了解`WebView`的基本用法。在Android中,我们通过`WebView`类来创建一个可以浏览网页的视图。例如,我们...

    Android webview调用相机和相册

    这里需要用到WebView的`addJavascriptInterface`方法,创建一个Java对象并暴露给JavaScript调用。例如,我们可以创建一个名为`WebAppInterface`的类: ```java public class WebAppInterface { private Context ...

    android WebView和javascript相互调用

    接下来,我们将讨论如何从JavaScript调用Android Java代码。这通常通过`addJavascriptInterface()`方法实现,该方法接受一个Java对象和一个字符串参数,这个字符串将在JavaScript中作为接口名使用: ```java ...

    android WebView结合javascript相互调用

    若想从JavaScript调用Android方法,我们可以使用`addJavascriptInterface()`方法,将Java对象暴露给JavaScript环境: ```java webView.addJavascriptInterface(new Object() { @JavascriptInterface @Override ...

    Android WebView与JavaScript交互操作(Demo)

    为了使Android移动项目能够在较短的时间内完成开发,同时降低技术人员开发的成本投入,往往会采用Hybrid APP的开发模式。...势必需要了解与掌握Android[java]与JavaScript之间的交互、相互调用操作的方法与技术。

    Android 和 javascript 交互 Android混合开发之WebView与Javascript交互

    Android和javascript的交互是混合开发的核心,通过WebView和JavaScriptInterface,我们可以轻松地在两者之间传递数据和执行复杂操作。理解并熟练掌握这些技术,能够帮助我们构建更加健壮、功能丰富的Android混合应用...

    Webview与Javascript相互调用 (Android studio )demo

    本示例项目"Webview与Javascript相互调用 (Android Studio)"就是专门针对这一功能的演示,它提供了直接在Android Studio中运行的代码,帮助开发者理解和实践WebView与JavaScript之间的通信。 首先,我们来深入理解...

    Android WebView H5调用拍照

    为了使H5页面能够调用Android原生的拍照功能,我们需要在Java代码中实现一个JavaScript接口。这可以通过WebView的addJavascriptInterface方法实现。下面是一个简单的示例: ```java private class ...

    Android webView和js交互的Demo

    JavaScript交互是通过`WebView`的`addJavascriptInterface()`方法实现的。此方法允许我们将Java对象暴露给网页中的JavaScript代码,以便它们可以调用Java方法。例如,我们可能创建一个名为`Bridge`的Java对象,并...

    android使用webView实现java程序与js脚本的相互调用

    同时,WebView还提供了Java代码与JavaScript交互的能力,使得我们可以利用JavaScript的灵活性和Android原生功能的强大结合,创建出丰富的混合应用。本文将详细介绍如何在Android中使用WebView实现Java程序与JS脚本的...

    Android webview与js交互

    三、JavaScript调用Android方法:WebViewClient和WebChromeClient 1. 使用`WebViewClient`: 我们可以通过重写`shouldOverrideUrlLoading`方法,使得JavaScript的URL请求被Java代码捕获并处理。 ```java webView....

    Android高级应用源码-Android webView和js交互的Demo.zip

    这个Demo项目是学习和实践Android WebView与JavaScript交互的一个好资源,可以帮助开发者掌握如何在Android应用中嵌入网页并实现双向通信,提升用户体验。通过分析和运行此源码,开发者可以深入理解Android WebView...

Global site tag (gtag.js) - Google Analytics