android webview js

转载 2016年08月29日 16:15:29

在当前的Android开发中,会使用大量的H5(html5+css3+js),和Native一起的混合开发模式(Hybrid),在Hybrid开发的过程中,H5部分开发效率高和移植便利性为主,但是在一些地方使用h5的确不容易实现,这个时候就需要调用Java方法来完成某些功能,就会遇到Javascript和Java相互调用,用Java的方法实现那些Javascript代码不容易,不好完成的任务,比如,异步线程,调用数据库等.....

在Android 4.2之前可以使用addjavascriptinterface的方式注入原生的Java中,给JavaScript调用,但是这种方案却会有一定的安全风险,在页面中执行一些不可信的Javascript代码即可能控制用户的手机,详情见:WebView中接口隐患与手机挂马利用
在4.2之后Android提供了@JavascriptInterface对象注解的方式建立Javascript对象和android原生对象的绑定,提供给javascript调用的函数必须带有@JavascriptInterface

因为目前4.0系统的手机市场占有量已经很低了,因此我们使用minSdkVersion为17,只需要支持4.2版本以上的手机,看下Java和Javascript怎么通信的。

加载本地html文件

有的时候我们在使用webview开发的时候会使用本地的html文件,在这里为了方便我们把html文件都放在assets文件夹中,使用本地加载的方式,不需要server支持。
先定义一个html文件:

<!DOCTYPE html>
<html>
    <body>
        <h1>this is html</h1>
    </body>
</html>

使用file:///android_asset/index.html加载到webview中:

    private void initView() {
        webView = (WebView) findViewById(R.id.webView);
        webView.loadUrl("file:///android_asset/index.html");
    }

Javascript调用Java方法

以Android的Toast的为例,从Javascript代码中调用系统的Toast。
我们定义一个AndroidToast的Java类,它有一个show的方法用来显示Toast:

public class AndroidToast {
        @JavascriptInterface
        public void show(String str) {
            Toast.makeText(MainActivity.this, str, Toast.LENGTH_SHORT).show();
        }
    }

需要对WebView设置一些参数,开启JavaScipt,注册JavascriptInterface:

private void initView() {
        webView = (WebView) findViewById(R.id.webView);

        WebSettings webSettings = webView.getSettings();
        webSettings.setJavaScriptEnabled(true);
        webSettings.setDefaultTextEncodingName("UTF-8");
        webView.addJavascriptInterface(new AndroidToast(), "AndroidToast");
        webView.loadUrl("file:///android_asset/index.html");
 }

addJavascriptInterface的作用是把AndroidToast类映射为Javascript中的AndroidToast对象。

在Javascript中调用Java代码:

function toastClick(){
        window.AndroidToast.show('from js');
}

通过window的属性可以找到Java映射的对象AndroidToast,调用它的show方法。
注意这里传输的数据只能是基本数据类型和string,可以传输string意味着我们可以使用json传输结构化数据。

Javascript调用Java有返回值

如果想从Javascript调的方法里面获取到返回值,只需要定义一个带返回值的@JavascriptInterface方法:


    public class AndroidMessage {
        @JavascriptInterface
        public String getMsg() {
            return "form java";
        }
    }

添加Javascript的映射Webview:

webView.addJavascriptInterface(new AndroidMessage(), "AndroidMessage");

Javascript直接调用Java方法:

function showAlert(){
        var str=window.AndroidMessage.getMsg();
        console.log(str);
 }

Java调用Javascript方法

Java在调用js的时候,使用的是WebView.loadUrl()方法,可以直接在HTML页面里面执行JavaScript方法,首先定义一个Javascript方法给Java调用:

function callFromJava(str){
        console.log(str);
    }

Java端调用Javascript方法:

public void  javaCallJS(){
        webView.loadUrl("javascript:callFromJava('call from java')");
    }

可以在loadUrl中直接给Javascript方法直接传值,如果Javascript方法有返回值,而WebView.loadUrl()是无法获取到返回值的,如果需要Javascript返回值给Java,可以定义一个Java方法给JavaScript调用把返回值传递给Java。
注意WebView.loadUrl()必须在Ui线程中运行,不然会会报错。

android webview与js交互(动态添加js)

1)、webView可以利用html做界面布局,虽然目前还比较少人这么使用,不过我相信当一些客户端需要复杂的图文(图文都是动态生成)混排的时候它肯定是个不错的选择。 2)、直接显示网页,这功能当然也是...
  • u012885461
  • u012885461
  • 2016年05月11日 09:45
  • 4331

android webview加载URL&&允许JS

//允许jS helpCenterWv.getSettings().setJavaScriptEnabled(true); helpCenterWv.loadUrl(url);
  • u012885461
  • u012885461
  • 2015年12月04日 10:23
  • 1614

android webview无法响应网页js问题

添加  webview.setWebViewClient(new HelloWebViewClient());                  webview.setWebChromeClient(...
  • hey_gril
  • hey_gril
  • 2016年12月07日 14:39
  • 648

Android端使用WebView注入一段js代码实现js调用android

需求:为网页上个链接增加点击事件,但是这个链接无法增加js代码 url:http://public.rongcloud.cn/view/D4F444BE2D94D760329F3CF38B4AE35C...
  • u011404611
  • u011404611
  • 2017年01月09日 15:23
  • 4709

Android之WebView和js交互-调用失败的看这里

前段时间项目需求在web页面中点击某个按钮,调用app中的某个功能,于是就想到了Webview和Js的交互,可是实现的时候遇到了各种问题:...
  • pxr1989104
  • pxr1989104
  • 2015年08月21日 12:28
  • 3490

Android开发之webview和 js 互调

一、前言 在Android开发中,越来越多的商业项目使用了Android原生控件与WebView进行混合开发,当然不仅仅就是显示一个WebView那么简单,有时候还需要本地Java代码与HTML中的...
  • sky_pjf
  • sky_pjf
  • 2016年08月30日 11:14
  • 699

Android中webview与JS交互、互调方法

对于试水的功能,一般公司都会采用H5的方式来开发,可以用很少的资源与很短的项目工期来完成。 但许多情况下,H5页面会需要一些原生持有的一些如用户信息之类的数据,一些交互也需要调用原生的,如toast...
  • gengqiquan
  • gengqiquan
  • 2016年11月22日 17:05
  • 8982

android webview js不执行原因解析

前言 在开发混合app的时候经常会使用webview来加载html,并且还要与js 交互。 下面会介绍一些导致js 不执行的原因 原因 浏览器未开启javascript 使用的js代码有问题,webv...
  • hu285279904
  • hu285279904
  • 2017年02月20日 14:30
  • 6997

Android WebView使用详解包括js互调(by 星空武哥)

目前很多android app都内置了可以显示web页面的界面,会发现这个界面一般都是由一个叫做WebView的组件渲染出来的,学习该组件可以为你的app开发提升扩展性。 先说下WebView的一些...
  • lsyz0021
  • lsyz0021
  • 2016年05月22日 00:35
  • 8140

Android与WebView的同步和异步访问机制

WebChromeClient和WebViewClient是WebView应用中的两个最重要的类。 通过这两个类,WebView能够捕获到Html页面中url的加载,javascript的执行等的所有...
  • foolsheep
  • foolsheep
  • 2014年08月04日 13:25
  • 6782
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:android webview js
举报原因:
原因补充:

(最多只允许输入30个字)