WebView与js交互

原创

cMusketeer

发布于 2018-05-05 20:09:21

14K3

发布于 2018-05-05 20:09:21

文章被收录于专栏：Android机器圈

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

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

步骤：

创建布局文件
实现webview一些自身配置
html创建，
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代码量少，就上传项目了。

完。

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

html

android

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

html

android

登录后参与评论

0 条评论

热度