Android原生代碼與html5交互

時間 2019-11-17

標籤 android 原生代碼 html5 html 交互欄目 Android 简体版

原文原文鏈接

1、首先是網頁端，這個就是一些簡單的標籤語言和JS函數：javascript

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>H5 And Android</title>
<script>
//定義本地方法效果提供給Android端調用被調用後將得到參數值
function callH5(data){
　　document.getElementById("result").innerHTML="result success for Android to:"+data;
}

//定義本地點擊事件效果調用Android方法傳遞參數給Android客服端
function myOnclick(){
　　document.getElementById("result").innerHTML="按鈕被點擊了"
　　//調用android本地方法調用對象由Android定義實例化，調用方法由Android提供 (具體對象名和方法待定，可變動)
　　myObj.callAndroid("彈窗顯示回調成功了～～～");
}html

js調用androidjava

註冊js對象名稱爲control，方法爲toNews，傳的是新聞id和新聞類型

WebSettings webSettings = webView.getSettings();
// 設置WebView屬性，可以執行Javascript腳本
webSettings.setJavaScriptEnabled(true);
// 設置能夠訪問文件
webSettings.setAllowFileAccess(true);
// 設置支持縮放
webSettings.setBuiltInZoomControls(true);
webView.addJavascriptInterface(new JavaScriptInterfaces(), "control");
// 加載須要顯示的網頁
webView.loadUrl(url + "?newsId=" + newsId + "&newsType=" + newsType + "&subjectImg=" + imageUrl);
String str = url + "?newsId=" + newsId + "&newsType=" + newsType + "&subjectImg=" + imageUrl;
LogUtils.e(url + "?newsId=" + newsId + "&newsType=" + newsType + "&subjectImg=" + imageUrl);
// 設置Web視圖
webView.setWebViewClient(new webViewClient());// 若是去掉webView會用瀏覽器加載網絡鏈接

class JavaScriptInterfaces {
    JavaScriptInterfaces() {
    }

    @JavascriptInterface
    public void toNews(long newsId, String accessUrl) {
        Intent intent = new Intent(SpecialWebActivity.this, NewsDetailsWebActivity.class);
        intent.putExtra("newsId", newsId + "");
        startActivity(intent);
    }
}

</script>
</head>
<body>
　　<button id="button" onclick="myOnclick()">點擊調用Android方法</button>
　　<p/>
　　<div id="result">效果展現</div>
</body>
</html>android

2、接下來就是Android中加載web網頁，而且設置完成交互了，直接上代碼，也有詳細註釋:web

package com.lvyerose.h5andandroid;瀏覽器

import android.annotation.SuppressLint;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.View;
import android.webkit.JavascriptInterface;
import android.webkit.WebView;
import android.widget.Toast;網絡

public class MainActivity extends AppCompatActivity {
　　private WebView mWebView;
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
　　setContentView(R.layout.activity_main);
　　Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
　　setSupportActionBar(toolbar);app

　　mWebView = (WebView) findViewById(R.id.webView);
　　initWeb();ide

}函數

@SuppressLint({"JavascriptInterface", "SetJavaScriptEnabled"})
void initWeb(){
　　//設置編碼　　
　　mWebView.getSettings().setDefaultTextEncodingName("utf-8");
　　//支持js
　　mWebView.getSettings().setJavaScriptEnabled(true);

　　//設置本地調用對象及其接口
　　//第一個參數爲實例化自定義的接口對象第二個參數爲提供給JS端調用使用的對象名
　　mWebView.addJavascriptInterface(new Contact() {

@JavascriptInterface //必須加的註解
@Override
public void callAndroid(String phone) {
　　Toast.makeText(MainActivity.this, phone, Toast.LENGTH_LONG).show();
}
}, "myObj");
　　//載入js
　　mWebView.loadUrl("http://lvyerose.com/h5andAndroid.html");

　　findViewById(R.id.button).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
　　//Android調用Js方法，其中參數 'Android OK !!!' 可傳入變量效果以下：
　　// mWebView.loadUrl("javascript:callH5('"+str+"')");
　　mWebView.loadUrl("javascript:callH5('Android OK !!!')");

}
});
}
//定義接口，提供給JS調用
interface Contact {
　　@JavascriptInterface
　　void callAndroid(String phone);

}