Android與JavaScript交互初覽
背景
年后換了工作恢总，第一個(gè)接手的項(xiàng)目需要Android層與WebView的JavaScript交互
必備小知識(shí)
- JavaScript代碼區(qū)分大小寫(xiě)呻引，多余的空格會(huì)被忽略
- JavaScript的變量申明關(guān)鍵字：var
- JavaScript數(shù)組的申明
var cars = new Array();
var cars = ["Audi","BMW","Volvo"];
- 外部js文件使用：
<script src="myscript.js"></script>
- Web瀏覽器在解析HTML文件時(shí)，自動(dòng)執(zhí)行其中的JavaScript腳本
- 網(wǎng)頁(yè)被加載時(shí)产徊，瀏覽器自動(dòng)創(chuàng)建文檔對(duì)象Document
- WebView注入Java對(duì)象，即通過(guò)WebView建立JavaScript和Android原生對(duì)象的綁定關(guān)系
- Android使用本地js文件的目錄
file:///android_assert/*.html
file:///sdcard/*.html
主要類(lèi)
- WebView：承載類(lèi)
- JsIntergration:提供供Web前端的JavaSript調(diào)用
示例代碼
- html代碼
<html lang="zh-cn">
<body>
<a>js中調(diào)用本地方法</a>
<script>
function runFromJs() {
document.getElementById("hello,web!").innerHTML="Hello,WebView, form Android!"
}
var aTag = document.getElementsByTagName('a')[0];
aTag.addEventListener('click',function(){
var demo = myObject.runFromAndroid("調(diào)用Android的本地方法funFromAndroid（String name）");
aTag.innerHTML=demo;
return false;
},false);
</script>
<div id="hello,web!">Click!!!!</div>
</body>
</html>
- Android 代碼
package com.example.jiaozi.androidjsdemo;
import android.graphics.Color;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.Button;
import com.example.jiaozi.androidjsdemo.js.JSInteration;
public class MainActivity extends AppCompatActivity {
private WebView mWebView;
private Button mClickButton;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
}
private void initView() {
mClickButton = (Button) findViewById(R.id.activity_main_btn);
mClickButton.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
mWebView.loadUrl("javascript:runFromJs()");
}
});
mWebView = (WebView) findViewById(R.id.activity_main_webview);
mWebView.setWebViewClient(new WebViewClient() {
});
mWebView.addJavascriptInterface(new JSInteration(), "myObject");
mWebView.getSettings().setDefaultTextEncodingName("utf-8");
mWebView.getSettings().setJavaScriptEnabled(true);
mWebView.setBackgroundColor(Color.argb(0, 0, 0, 0));
mWebView.loadUrl("file:///android_asset/jsTest.html");
}
}
- Android布局
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
<Button
android:id="@+id/activity_main_btn"
android:layout_width="368dp"
android:layout_height="60dp"
android:text="調(diào)用JavaScript！"
/>
<WebView
android:id="@+id/activity_main_webview"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
</LinearLayout>
