android和JavaScript簡單傳值互動
阿新 • • 發佈：2018-11-26
activity_main.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<Button
android:id="@+id/but"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="78dp"
android:onClick="callHtml"
android:text="點擊向HTML傳值" />
<WebView
android:id="@+id/webview"
android:layout_width="match_parent"
android:layout_height="300dp"
android:layout_alignParentBottom="true"/>
</RelativeLayout>
============
MainActivity.java
package com.example.webview_demo;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.webkit.JavascriptInterface;
import android.webkit.WebChromeClient;
import android.webkit.WebView;
import android.widget.Toast;
public class MainActivity extends Activity {
private WebView webView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//獲取控制元件ID
webView = (WebView) findViewById(R.id.webview);
//載入本地的網頁 本地的路徑
webView.loadUrl("file:///android_asset/javascript.html");
//是否支援JavaScrip
webView.getSettings().setJavaScriptEnabled(true);
//1.Javascrip 2.別名
webView.addJavascriptInterface(this, "android");
//回撥彈框
webView.setWebChromeClient(new WebChromeClient());
}
//1.點選Button調取HTML檔案中的方法進行傳值
public void callHtml(View v) {
webView.loadUrl("javascript:getAndroidText('我來自android')");
}
//2.定義一個接受html裡的方法
@JavascriptInterface
public void getHtml(String name) {
Toast.makeText(MainActivity.this, name, Toast.LENGTH_SHORT).show();
}
}
===============
asset檔案下的javascript.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<script type="text/javascript">
<!--定義接受Android的方法-->
function getAndroidText(msg){
alert(msg);
}
<!--向Android進行傳值-->
function sendTextToAndroid(){
var name = document.getElementById("username").value;
android.getHtml(name);
}
</script>
</head>
<body>
<input type="text" id="username"></input>
<input type="submit" onClick="sendTextToAndroid()" value="點擊向Android傳入值"></input>
</body>
</html>