Android WebView使用

最新推荐文章于 2024-08-10 12:02:04 发布

a13069730106

最新推荐文章于 2024-08-10 12:02:04 发布

阅读量2.2w

点赞数

分类专栏： android java 文章标签： android html webview javascript

本文链接：https://blog.csdn.net/a13069730106/article/details/54290334

版权

android 同时被 2 个专栏收录

17 篇文章 0 订阅

订阅专栏

java

8 篇文章 0 订阅

订阅专栏

Android WebView使用

今天介绍一个android WebView的使用。这里只介绍一些基础的使用，比如载入本地html，与java层做交互等。

基本使用

在使用webview时，基本上都是从两个地方加载html，一个是assets文件夹下，另外就是从网络获取的html，其实从本地的SD卡里也是可以的，不过我并不推荐这么做，这里也就不介绍了。

载入html

由于出于安全性的考虑，android的webview默认是不支持js的，同时如果有内部跳转的话，也会跳转到手机默认的浏览器上。这里都有做一些相应的处理。详情见以下代码。

 webView.getSettings().setJavaScriptEnabled(true);
 webView.setWebViewClient(new WebViewClient() {
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
                return false;
            }
        });
  //加载assets文件夹下的html
  webView.loadUrl("file:///android_asset/html/index.html");
  //加载网络请求的html
  //webview.loadUrl("http://www.test.com/html/index.html");

使用以上代码，基本上就满足大部分需求了，但是有的时候会发现如果需要载入本地数据的话，比如使用Ajax加载一下本地的json，就会报一个

 jquery-1.9.1.min.js:548 XMLHttpRequest cannot load  aaa.json.
 Cross origin requests are only supported for protocol schemes:
 http, data, chrome, chrome-extension, https, chrome-extension-resource.

基实这也是google在出于安全性考虑，禁止了webview的夸域访问，只是要加上一句话就可以解决。

webView.getSettings().setAllowUniversalAccessFromFileURLs(true);

整个放问的代码就变成了这样

webView = (WebView) findViewById(R.id.webview);
webView.getSettings().setJavaScriptEnabled(true);
webView.getSettings().setAllowUniversalAccessFromFileURLs(true);
webView.loadUrl("file:///android_asset/html/index.html");
 //加载网络请求的html
  //webview.loadUrl("http://www.test.com/html/index.html");
webView.setWebViewClient(new WebViewClient() {
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
                return false;
            }

        });

注意：如果html内部有网络请求，需要加网络请求权限

webview js与本地程序互动

一般如时使用html的话，都或多或少的需要与本地应用互动，就里就简单介绍一下。

android java层代码调用WebViewjs

其实android调用WebVeiw的JS代码是比较简单的，也是使用loadUrl方法，只是参数有变化，这里就直接上源码了。



public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    private WebView webView;

    @RequiresApi(api = Build.VERSION_CODES.JELLY_BEAN)
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        findViewById(R.id.run_js).setOnClickListener(this);
        webView = (WebView) findViewById(R.id.webview);\
        //启用webveiw对js的支持
        webView.getSettings().setJavaScriptEnabled(true);
        //为了展示对话框，不写也可以调用js方法
        webView.setWebChromeClient(new WebChromeClient());
        //控制webview跳转时不调用浏览器
        webView.setWebViewClient(new WebViewClient() {
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
                return false;
            }
        });
        //载入测试hnml
        webView.loadUrl("file:///android_asset/html/index.html");
    }

    @Override
    public void onClick(View view) {
        if (view.getId() == R.id.run_js) {
            //调用js中的doJsFun方法，'sss'为参数
            webView.loadUrl("javascript:doJsFun('sss')");
        }
    }
}

再来看一下html的代码，这里为了方便大家理解，把其它代码都删除了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function doJsFun(a) {
            alert(a);
        }

    </script>
</head>
<body>

</body>
</html>

webview中js回调java方法

如果js需要回调java方法，只需要几上面代码进行几处修改，详见以下代码。

  //需要放在上文中的oncreate方法中
  webView.addJavascriptInterface(this, "javaNative");
  //js回调的方法，@JavascriptInterface这个注解一定要加，不然js无法找到此方法
  //此方法不能为静态或私有方法
  @JavascriptInterface
  public void doJavaFun(String str) {
      Toast.makeText(this, str, Toast.LENGTH_LONG).show();
  }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function doJsFun(a) {
         self.location='www.baidu.com';

        }
        //回调java层方法
        function doJavaFun() {
            //javaNative为通过  webView.addJavascriptInterface(this, "javaNative");注入
            //doJavaFun为java层方法，sss为参数，
            javaNative.doJavaFun("ssss");
        }


    </script>
</head>
<body>
<input type="button" value="调用java方法" onclick="doJavaFun()">
</body>
</html>