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