WebView的简单使用，附加一点JS交互操作

最新推荐文章于 2025-05-15 13:38:42 发布

SuperMonsterH

最新推荐文章于 2025-05-15 13:38:42 发布

阅读量263

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/github_39118247/article/details/76098212

本文介绍了一个Android应用如何通过WebView加载本地HTML文件，并实现Android代码与JavaScript之间的双向通信。包括设置WebView加载本地页面、启用JavaScript支持、注册JavaScript接口、监听页面加载进度及标题更新等关键步骤。

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

/**
 *                  ___====-_  _-====___
 *            _--^^^#####//      \\#####^^^--_
 *         _-^##########// (    ) \\##########^-_
 *        -############//  |\^^/|  \\############-
 *      _/############//   (@::@)   \\############\_
 *     /#############((     \\//     ))#############\
 *    -###############\\    (oo)    //###############-
 *   -#################\\  / VV \  //#################-
 *  -###################\\/      \//###################-
 * _#/|##########/\######(   /\   )######/\##########|\#_
 * |/ |#/\#/\#/\/  \#/\##\  |  |  /##/\#/  \/\#/\#/\#| \|
 * `  |/  V  V  `   V  \#\| |  | |/#/  V   '  V  V  \|  '
 *    `   `  `      `   / | |  | | \   '      '  '   '
 *                     (  | |  | |  )
 *                    __\ | |  | | /__
 *                   (vvv(VVV)(VVV)vvv)
 *                        神兽保佑
 *                       代码无BUG!
 */

public class MainActivity extends Activity {

   private TextView tvTitle;
   private ProgressBar bar;
   private WebView webView;

   @Override
   protected void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       setContentView(R.layout.activity_main);
       webView = (WebView) findViewById(R.id.webview);
       tvTitle = (TextView) findViewById(R.id.tvTitle);

bar = (ProgressBar) findViewById(R.id.bar);

       // 加载一个远程服务器上的HTMl资源
       // webView.loadUrl("http://172.17.70.50:8080/index.html");

       // 加载一个本地网页 file:///android_asset 固定写法
       webView.loadUrl("file:///android_asset/index.html");
       // 设置WebView是否支持Js与android之间进行交互
       webView.getSettings().setJavaScriptEnabled(true);
       // this 相当于你的学名 test 相当于你的小名
       webView.addJavascriptInterface(MainActivity.this, "test");
       webView.setWebChromeClient(new WebChromeClient() {
           @Override
           public void onReceivedTitle(WebView view, String title) {
               super.onReceivedTitle(view, title);
               tvTitle.setText(title);
           }

           @Override
           public void onProgressChanged(WebView view, int newProgress) {
               super.onProgressChanged(view, newProgress);
               bar.setProgress(newProgress);
           }
       });
       webView.setWebViewClient(new WebViewClient() {
           @Override
           public void onPageStarted(WebView view, String url, Bitmap favicon) {
               super.onPageStarted(view, url, favicon);
               bar.setVisibility(View.VISIBLE);
           }

           @Override
           public void onPageFinished(WebView view, String url) {
               super.onPageFinished(view, url);
               bar.setVisibility(View.GONE);
           }
       });
   }

   public void btnAndroidCallJs(View v) {

       // android 调用js 里面的代码
       webView.loadUrl("javascript:androidCallJs('fuck!')");

   }

   // @JavascriptInterface 注解让js识别该方法
   @JavascriptInterface
   public void sayHello(String msg) {// 属于android的

       Toast.makeText(this, "我被js调用了 : " + msg, 0).show();

   }

}

index.html界面

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title>测试android与js交互</title>


       <script>//js调用android里面的方法
function jsCallAndroid() {
   test.sayHello("你好");
}

//android调用js方法
function androidCallJs(msg) {

   alert("我被android调用了 : " + msg);

}</script>



   </head>
   <body>

       <input type="submit" value="js调用android里面的方法" onclick="jsCallAndroid()"/>


   </body>
</html>