WebView与js交互


PS:大家都知道现在一个安卓项目里面有一些比较悬的画面,比如说一个炫酷的导航页,或者抽奖大转盘等,这些可以用安卓自身的知识来实现,也可以用JS来实现这些动画,然后安卓直接拿来用,这期间也是免不了有一些交互,今天这篇文章就是让大家知道,怎么使用安卓与html联动,并且实现交互,这就用到了webview,webview可以嵌入很多页面,比如说webview.loadUrl("http://www.baidu.com"),那么百度就被引进来了,而且你可以点击百度页面的任何按钮。而且webview还可以实现网页回退,但是问题来了,在引进来的网页我们怎么控制呢,你点击百度是百度页面所发生的变化,都是百度页面本身的功能,接下里,咱们就看看怎么在安卓Activity中写控制html变化的方法。这就是所谓的嵌套html。

下面写个简单的demo,引入html并点击切换图片。

步骤:

  1. 创建布局文件
  2. 实现webview一些自身配置
  3. html创建,
  4. webView加载html页面,添加点击事件

1:创建布局文件

  <WebView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/id_webview"></WebView>

2:实现webview一些自身配置

这里webview添加html文件时有三种方式,总有一个适合你,大家具体注释

webview = (WebView) findViewById(R.id.id_webview);
//方式1. 加载一个网页:
//        webView.loadUrl("http://www.google.com/");

        //方式2:加载apk包中的html页面
//        webview.loadUrl("file:///android_asset/test.html");

        //方式3:加载手机本地的html页面
//        webView.loadUrl("content://com.android.htmlfileprovider/sdcard/test.html");


//        webview.addJavascriptInterface(this,"android");//添加js监听 这样html就能调用客户端

        WebSettings webSettings=webview.getSettings();
        webSettings.setJavaScriptEnabled(true);
        webSettings.setCacheMode(WebSettings.LOAD_NO_CACHE);//不使用缓存,只从网络获取数据.

        //支持屏幕缩放
        webSettings.setSupportZoom(true);
        webSettings.setBuiltInZoomControls(true);


        webview.setWebViewClient(new WebViewClient(){
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                webview.loadUrl(url);
                return true;
            }
        });

到了这里webView的配置基本上就做好了,因为例子比较简单,就配置这么多够用了

3:html创建

在Project模式,main目录下,和java文件同级创建assets目录,assets目录下创建test.html,图片你随便找两张也放在asset是目录下即可。下面有两个方法名,可以随便起,但是要webview调用时一致。

<html>
<head>
    <title>这是测试版本js与android交互</title>
    <!--java通过调用a中onclick中方法,然后a中方法再调用script中方法-->
    <script language="javascript">
//myfun()为方法名
            function myfun(){
                document.getElementById("imgid").src="img2.png";
            }
    </script>

</head>
<body>
//clickOnAndroid()为方法名
<a onClick="window.test.clickOnAndroid()">
    <img src="img1.png" id="imgid" width="400" height="300">
</a>

</body>

</html>

4:webView加载html页面,添加点击事件。

addJavascriptInterface调用html里的方法,记住要在异步中操作。clickOnAndroid,test是和html文件中方法名一致。

handle = new Handler();
webview.addJavascriptInterface(new MyObject(),"test");
webview.loadUrl("file:///android_asset/test.html");
}
class MyObject extends Object{
        @JavascriptInterface

        public void clickOnAndroid(){
            handle.post(new Runnable() {
                @Override
                public void run() {
                    webview.loadUrl("javascript:myfun()");
                }
            });
        }

点击屏幕就可以切换了,切换方法在html中写好了。上面代码其实没多少行,主要是这个思想,由于这个demo代码量少,就上传项目了。

完。

你可能感兴趣的:(Android)