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

时间 2019-12-06

标签 android webview 互调用的使用说明栏目 Android 繁體版

原文原文链接

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

1，首先你们要知道第一步操做，创建权限，WebView访问是须要访问网络的，因此首先你们不要忘记了在androidmanifest.xml中配置网络权限： css

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

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

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

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 onclick="window.demo.clickOnAndroid()">b.c</a></div>

4，java代码调用JS并传参

首先同样须要带参数的函数形式，但须要注意此处的参数须要final类型，即获得之后不可修改，若是须要修改其中的值，能够先设置中间变量，而后进行修改，以下所示： java

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 onclick="window.demo.clickOnAndroid(2)">b.c</a></div>

便可以实现互调，

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

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

<!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();
    }
}