Android日常開發中，常常會遇到加載H5頁面的情況，于是少不了與H5頁面的互動問題。具體表現在Android調用H5代碼及H5中調用Android代碼兩種情況。
測試頁面
test.png
這裡我們首先編寫上圖所示的測試頁面，在MainActivity中初始化各元件
private void initView() {
mLoginLayout = findViewById(R.id.login_layout);
mUserName = findViewById(R.id.edit_user_name);
mPassword = findViewById(R.id.edit_password);
mWebView = findViewById(R.id.web_view);
}
Android調用H5
要點：
WebView.loadUrl("javascript:method(" + "'" + param+ "'" + ")");
Android調用H5時，首先建立WebView頁面，初始化完成後，調用loadUrl方法，其參數有固定格式，以“javascript：”開頭，表示調用javasript代碼，後面接在H5中自己定義的method方法，如有參數須像上面那樣前後再用單引号括起來。
初始化WebView
private void initWebView() {
WebSettings settings = mWebView.getSettings();
// 設定啟用JavaScript功能
settings.setJavaScriptEnabled(true);
mWebView.setWebViewClient(new WebViewClient());
mWebView.loadUrl("file:///android_asset/index.html");
}
将已經寫好的index.html檔案放在assets目錄下，通過loadUrl方法加載進來。
點選登入跳轉到H5頁面，并在H5頁面中顯示輸入的使用者名。
public void login(View view) {
String userName = mUserName.getText().toString().trim();
String password = mPassword.getText().toString().trim();
login(userName, password);
}
private void login(String userName, String password) {
if(!TextUtils.isEmpty(password) && TextUtils.equals("123456", password)) {
mWebView.loadUrl("javascript:login(" + "'" + userName + "'" + ")");
mWebView.setVisibility(View.VISIBLE);
mLoginLayout.setVisibility(View.GONE);
} else {
Toast.makeText(this, "密碼輸出錯誤", Toast.LENGTH_SHORT).show();
}
}
效果如下：
H5.png
H5調用Android
要點：
Android中：WebView調用addaddJavascriptInterface方法，JsInterface為H5回調類，自定義名稱，tag與H5中js代碼window後的tag名稱一緻即可。JsInterface中回到方法method()記得添加@JavascriptInterface标記。
WebView.addJavascriptInterface(new JsInterface(), tag);
private class JsInterface {
@JavascriptInterface
public void method() {
}
}
H5中：onclick()方法中使用window開頭，表示調用Android方法，tag與前面保持一緻，method為Android中的回調方法，可傳參。
登出
完整代碼
MainActivity：
public class MainActivity extends AppCompatActivity {
private View mLoginLayout;
private TextView mUserName;
private TextView mPassword;
private WebView mWebView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
initWebView();
}
private void initView() {
mLoginLayout = findViewById(R.id.login_layout);
mUserName = findViewById(R.id.edit_user_name);
mPassword = findViewById(R.id.edit_password);
mWebView = findViewById(R.id.web_view);
}
private void initWebView() {
WebSettings settings = mWebView.getSettings();
// 設定啟用JavaScript功能
settings.setJavaScriptEnabled(true);
mWebView.setWebViewClient(new WebViewClient());
mWebView.addJavascriptInterface(new JsLogoutInterface(), "android");
mWebView.loadUrl("file:///android_asset/index.html");
}
public void login(View view) {
String userName = mUserName.getText().toString().trim();
String password = mPassword.getText().toString().trim();
login(userName, password);
}
private void login(String userName, String password) {
if(!TextUtils.isEmpty(password) && TextUtils.equals("123456", password)) {
mWebView.loadUrl("javascript:login(" + "'" + userName + "'" + ")");
mWebView.setVisibility(View.VISIBLE);
mLoginLayout.setVisibility(View.GONE);
} else {
Toast.makeText(this, "密碼輸出錯誤", Toast.LENGTH_SHORT).show();
}
}
private class JsLogoutInterface {
@JavascriptInterface
public void logout() {
Toast.makeText(MainActivity.this, "退出成功", Toast.LENGTH_SHORT).show();
runOnUiThread(new Runnable() {
@Override
public void run() {
mWebView.setVisibility(View.GONE);
mLoginLayout.setVisibility(View.VISIBLE);
}
});
}
}
}
布局檔案activity_main.xml：
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
tools:context=".MainActivity">
android:id="@+id/login_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
android:id="@+id/user_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="15dp"
android:text="使用者名："
android:textSize="16sp"
android:textColor="@android:color/black"
/>
android:id="@+id/edit_user_name"
android:layout_width="80dp"
android:layout_height="wrap_content"
android:layout_alignBottom="@+id/user_name"
android:layout_toRightOf="@+id/user_name"
android:layout_marginBottom="-8dp"
/>
android:id="@+id/password"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignRight="@+id/user_name"
android:layout_below="@+id/user_name"
android:layout_marginTop="15dp"
android:text="密碼："
android:textSize="16sp"
android:textColor="@android:color/black"
/>
android:id="@+id/edit_password"
android:layout_width="80dp"
android:layout_height="wrap_content"
android:layout_alignBottom="@+id/password"
android:layout_toRightOf="@+id/password"
android:layout_marginBottom="-8dp"
/>
android:id="@+id/login_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/password"
android:layout_marginTop="20dp"
android:layout_marginLeft="30dp"
android:text="登入"
android:onClick="login"
/>
android:id="@+id/web_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:visibility="gone"
/>
index.html:
Home
#user {
font-size: 20px;
color: red
}
function login(userName) {
document.getElementById("user").innerHTML = userName;
}
目前使用者為：
登出