Android与JavaScript交互初览
背景
年后换了工作，第一个接手的项目需要Android层与WebView的JavaScript交互
必备小知识
- JavaScript代码区分大小写，多余的空格会被忽略
- JavaScript的变量申明关键字：var
- JavaScript数组的申明
var cars = new Array();
var cars = ["Audi","BMW","Volvo"];
- 外部js文件使用：
<script src="myscript.js"></script>
- Web浏览器在解析HTML文件时，自动执行其中的JavaScript脚本
- 网页被加载时，浏览器自动创建文档对象Document
- WebView注入Java对象，即通过WebView建立JavaScript和Android原生对象的绑定关系
- Android使用本地js文件的目录
file:///android_assert/*.html
file:///sdcard/*.html
主要类
- WebView：承载类
- JsIntergration:提供供Web前端的JavaSript调用
示例代码
- html代码
<html lang="zh-cn">
<body>
<a>js中调用本地方法</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("调用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="调用JavaScript！"
/>
<WebView
android:id="@+id/activity_main_webview"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
</LinearLayout>
