android WebView 和js互调用的使用说明。

最新推荐文章于 2020-12-21 17:29:22 发布

DoRemix

最新推荐文章于 2020-12-21 17:29:22 发布

阅读量668

点赞数

文章标签： android开发

本文链接：https://blog.csdn.net/xj626361950/article/details/42917427

版权

这段时间公司同事他们要求讲点android方面的知识（ps:我同事他们都是做PHP的），然后不知道怎么讲才能让他们感兴趣，所以就找了一些WebView的例子跟他们讲了下，下面就是一些关于android调用HTML中js方法和HTML调用android这边的方法的操作。

1，首先大家要知道第一步操作，建立权限，WebView访问是需要访问网络的，所以首先大家不要忘记了在androidmanifest.xml中配置网络权限：

<uses-permission android:name="android.permission.INTERNET"/>

2，android中利用webview调用网页上的JS代码，

android中可以通过webview来实现和JS的交互，在程序中调用js代码，只需要将webivew控件支持的js属性设置为true，然后通过loadUrl就可以直接进行调用，如下：

mWebView.getSettings().setJavaScriptEnabled(true);
mWebView.loadUrl("javascript:test()");//调用页面中test JS方法

3，页面上需要调用java代码的方法，在网页中调用java代码，需要在webview控件中添加javascriptInterface。如下所示：

mWebView.addJavascriptInterface(new Object() { 
            public void clickOnAndroid() { 
                mHandler.post(new Runnable() { 
                    public void run() { 
                        Toast.makeText(Test.this, "测试调用java", Toast.LENGTH_LONG).show();
                    } 
                }); 
            } 
        }, "demo");

在网页中，只需要像调用JS方法一样，进行调用就可以：

<div id='b'><a οnclick="window.demo.clickOnAndroid()">b.c</a></div>

4，java代码调用JS并传参

首先一样需要带参数的函数形式，但需要注意此处的参数需要final类型，即得到以后不可修改，如果需要修改其中的值，可以先设置中间变量，然后进行修改，如下所示：

mWebView.addJavascriptInterface(new Object() { 
            public void clickOnAndroid(final int i) { 
                mHandler.post(new Runnable() { 
                    public void run() { 
                                int j = i;
                                j++;
                Toast.makeText(Test.this, "测试调用java" + String.valueOf(j), Toast.LENGTH_LONG).show();
                    }
                });
            } 
        }, "demo");

然后在HTML页面中，利用如下代码：

<div id='b'><a οnclick="window.demo.clickOnAndroid(2)">b.c</a></div>

即可以实现互调，

5，下面让我们来看一个实例：

将我们需要的HTML代码预先写好放到assets文件夹下面：

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>登录</title>
        <link rel="stylesheet" type="text/css" href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css" />
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
        <style>
        body{ background:none repeat scroll 0 0 #F8F8F8;}
    </style>
     </head>
    <body>
     
     <div class='main panel-body' style="margin-top:100px;">
        <div class="login_bg">
        <h2 class="text-center">超级管理后台</h2>
            <form id="login" class="form-horizontal col-md-12"  method="post" role="form" >
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="用户名" name="username" id="username">
                </div>
                <div class="form-group">
                    <input type="password" class="form-control" name="password" placeholder="密码" id="password">
                </div>
                <div class="form-group">
                    <button class="btn btn-lg btn-block btn-primary login" onClick="window.login.startFunction()" href="";>登录
                     
                </div>
             </form>
        </div>
    </div>
    <span id="content"></span>
    <script type="text/javascript">
        function updateHtml(){
            document.getElementById("content").innerHTML = "你通过 android 中的控件调用了html 中js 的方法";
            alert("dialog");
        }
         
    </script>
    </body>
</html>

然后就是java代码：

import android.annotation.SuppressLint;
import android.app.Activity;
import android.app.AlertDialog;
import android.content.DialogInterface;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.webkit.WebView;
import android.widget.Button;
 
public class WordActivity extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.asd);
        //获取webView 控件
       final WebView webview=(WebView)findViewById(R.id.webView1);
        //加上这句话才能使用javascript方法  
        webview.getSettings().setJavaScriptEnabled(true);
       //webview.loadUrl("http://128.128.191.62/cn/mobile/geturl.html");
        //加载assets目录下面的demo.html 界面
        webview.loadUrl("file:///android_asset/index2.html");
        //增加接口方法,让html页面调用  
        webview.addJavascriptInterface(this,"login");  
        Button button = (Button)findViewById(R.id.button1);
        button.setOnClickListener(new OnClickListener() {
             
            @Override
            public void onClick(View v) {
                webview.loadUrl("javascript:updateHtml()");
            }
        });
    }
     
    public void startFunction(){
        AlertDialog.Builder ab=new AlertDialog.Builder(WordActivity.this);
        ab.setTitle("提示");
        ab.setMessage("通过js 调用了 java 中的方法");
        ab.setPositiveButton("确定", new DialogInterface.OnClickListener()
        {
            @Override
            public void onClick(DialogInterface dialog, int which) {
                dialog.dismiss();
            }
        });
        ab.create().show();
    }
}