android Webview基本配置以及android与js交互

最新推荐文章于 2024-10-25 15:04:44 发布

chuxuaner

最新推荐文章于 2024-10-25 15:04:44 发布

阅读量587

点赞数

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/chuxuaner/article/details/51075158

webview 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了WebView的基本配置方法、Android与JavaScript的交互原理及实现过程。包括WebView设置、JS调用Android本地方法的具体步骤及示例代码，同时给出了Android调用JS方法的两种方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近一直研究webview的使用，包含webview配置、android与js的交互。不多说了。

1、这部分代码写在Activity中就可以(下载是webview基本设置)：
WebSettings settings = webView.getSettings();
settings.setCacheMode(WebSettings.LOAD_DEFAULT);
settings.setDomStorageEnabled(true);
settings.setJavaScriptCanOpenWindowsAutomatically(true);
settings.setJavaScriptEnabled(true);
settings.setAllowFileAccess(true);//设置可以访问文件
settings.setSupportZoom(false);//不支持缩放
settings.setBuiltInZoomControls(false);//设置此属性，可任意比例缩放
//JsCallAndroidLocal该类是JS与android交互时，JS调用android本地方法的类
webView.addJavascriptInterface(new JsCallAndroidLocal(this,this),”Android”);
//MyWebClient继承WebViewClient: 是主要处理使用WebView进行网页的浏览，不调用本地的浏览器
webView.setWebViewClient(new MyWebClient());
//MyWebChormClient继承WebChromeClient:主要处理对网页中加载时,此时本地可对应显示加载框
webView.setWebChromeClient(new MyWebChormClient(mHandler));
//加载页面
webView.loadUrl(url);

注意：js文件放在你创建的android项目的assets文件下，创建一个js文件夹，然后可以把你的.js文件放到这个js文件夹中

2.JS 调用android本地方法
流程是这样，点击网页中的按钮调用到android本地的方法打印一串文本。
首先准备test.html 和webview_videoplayer.js文件，通过点击按钮,调到本地

webview_videoplayer.js：
/**
* 调用android本地方法
*/
function playVideo(videoUrl){

window.Android.gotoPlayVideo(videoUrl);

}
/**
*从网页中获取videoUrl
*/
function getVideoUrl(){

var videoUrl = document.getElementById("videoUrl");
playVideo(videoUrl.value);

}

在HTML中调用:
html中引用JS文件 “src=js/webview_videoplayer.js”
调用JS中的方法，通过JS调用android本地gotoPlayVideo()

test.html 
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/webview_videoplayer.js" ></script>
    </head>
    <body>
        <input type="button" name="playVideo" value="播放" onclick="getVideoUrl()"/> 

    </body>
</html>

整理一下顺序就是这样
JS调用android本地方法
//JsCallAndroidLocal该类是JS与android交互时，JS调用android本地方法的类
初始化webview的时候设置上js调用android本地方法的类

webView.addJavascriptInterface(new JsCallAndroidLocal(this,this),"Android");

public class JsCallAndroidLocal {

    private Context mContext = null;

    public JsCallAndroidLocal(Context context){
        this.mContext = context;
    }

    /**
     * @Description: JS调用安卓本地方法
     */
    public void gotoPlayVideo(String videoUrl)
        //TODO
        //打印
    }
}

先通过网页调用js文件中方法，js文件明确写好调用gotoPlayVideo()这个android本地的方法，参数必须对应上，否则不能正确调到android本地方法，这样js就可以调到android本地方法了。

3、android 调用JS(android调用本地js文件)
(1)调用无参数的JS方法
通过webView.loadUrl();这个方法调用你本地的JS方法
webView.loadUrl(“javascript:getBaseInfo()”);
(2)调用有参数的JS方法
webView.loadUrl(“javascript:getBaseInfo(‘”+uid+”’,’”+id+”’,’”+userName+”’)”);