Android與H5互調(diào)簡(jiǎn)析

均屬于筆記，僅供個(gè)人參考，有問題歡迎指正

一，java調(diào)用JavaScript

1，初始化WebView并且加載網(wǎng)絡(luò)頁(yè)面

private void initWebView() {

? ??????webView = new WebView(this);

??????? WebSettings webSettings =webView.getSettings();

//設(shè)置支持javaScript腳步語(yǔ)言

??????? webSettings.setJavaScriptEnabled(true);

//支持雙擊-前提是頁(yè)面要支持才顯示

??????? webSettings.setUseWideViewPort(true);

//支持縮放按鈕-前提是頁(yè)面要支持才顯示

??????? webSettings.setBuiltInZoomControls(true);

//設(shè)置客戶端-不跳轉(zhuǎn)到默認(rèn)瀏覽器中

??????? webView.setWebViewClient(new WebViewClient());

//加載網(wǎng)絡(luò)資源

??????? webView.loadUrl("http://123.com/teacher.shtml");

//??????? webView.loadUrl("file:///android_asset/JavaAndJavaScriptCall.html");

??????? //顯示頁(yè)面

??????? setContentView(webView);

??? }

2，在工程main目錄下創(chuàng)建assets目錄且加載本地資源

webView.loadUrl("file:///android_asset/JavaAndJavaScriptCall.html");

本地資源中js相關(guān)

<script type="text/javascript">

function javaCallJs(){

document.getElementById("content").innerHTML += ? ?"<br\>java調(diào)用了js無(wú)參函數(shù)";

}

/** 被調(diào)用的方法 */

function javaCallJs(arg){

document.getElementById("content").innerHTML = ("歡迎："+arg );

}

? function showDialog(){

? ? ? alert("你好,我是來(lái)自javascript");

? }

? ? </script>

3，Java調(diào)用javaScript

/**

?* Java調(diào)用javaScript

?*@param numebr，注意調(diào)用方式

?*/

private void login(String numebr) {

? ??webView.loadUrl("javascript:javaCallJs("+" ' "+numebr+" ' "+")");

??? setContentView(webView);

}

二，JavaScript調(diào)java

1，配置Javascript接口

//設(shè)置支持js調(diào)用java

webView.addJavascriptInterface(new AndroidAndJSInterface(),"Android");

,2，實(shí)現(xiàn)Javascript接口類

/**

?* js可以調(diào)用該類的方法

?*/

class AndroidAndJSInterface{

????public void showToast(){

??? ????Toast.makeText(JavaAndJSActivity.this, "我被js調(diào)用了", ?Toast.LENGTH_SHORT).show();

??? }

}

3，JavaScript調(diào)java

<input type="button" value="點(diǎn)擊Android被調(diào)用" onclick="window.Android.showToast()" />

4，解決該WebView.addJavascriptInterface接口不起作用的兩種辦法

1_針對(duì)版本改成16

defaultConfig {

????targetSdkVersion 16 ? ??

?}

2_在JavaScript接口類的方法加上@JavascriptInterface注解

/**

?* js可以調(diào)用該類的方法

?*/

class AndroidAndJSInterface{

@JavascriptInterface

public void showToast(){

??????? Toast.makeText(JavaAndJSActivity.this, "我被js調(diào)用了", Toast.LENGTH_SHORT).show();

??? }

}

三，示例1，H5頁(yè)面調(diào)用Android播放視頻

1，初始化webView，android對(duì)應(yīng)方法

@Override

? ? protected void onCreate(Bundle savedInstanceState) {

? ? ? ? super.onCreate(savedInstanceState);

? ? ? ? setContentView(R.layout.activity_js_call_java_video);

? ? ? ? webView = (WebView) findViewById(R.id.webview);

? ? ? ? WebSettings webSettings = webView.getSettings();

? ? ? ? //設(shè)置支持javaScript腳步語(yǔ)言

? ? ? ? webSettings.setJavaScriptEnabled(true);

? ? ? ? //支持雙擊-前提是頁(yè)面要支持才顯示

//? ? ? ? webSettings.setUseWideViewPort(true);

? ? ? ? //支持縮放按鈕-前提是頁(yè)面要支持才顯示

? ? ? ? webSettings.setBuiltInZoomControls(true);

? ? ? ? //設(shè)置客戶端-不跳轉(zhuǎn)到默認(rèn)瀏覽器中

? ? ? ? webView.setWebViewClient(new WebViewClient());

? ? ? ? //設(shè)置支持js調(diào)用java

? ? ? ? webView.addJavascriptInterface(new AndroidAndJSInterface(),"android");

? ? ? ? //加載網(wǎng)絡(luò)資源

? ? ? ? webView.loadUrl("file:///android_asset/RealNetJSCallJavaActivity.htm");

? ? }

? ? class AndroidAndJSInterface {

? ? ? ? /**

? ? ? ? * 該方法將被js調(diào)用

? ? ? ? */

? ? ? ? @JavascriptInterface

? ? ? ? public void playVideo(int id,String videoUrl,String tile){

? ? ? ? ? ? //調(diào)起系統(tǒng)所有播放器

? ? ? ? ? ? Intent intent = new Intent();

? ? ? ? ? ? intent.setDataAndType(Uri.parse(videoUrl),"video/*");

? ? ? ? ? ? startActivity(intent);

? ? ? ? }

? ? }

2，js調(diào)用java

<script>

?var videourl = "http://10.0.2.2:8080/yellow.mp4";

? ? var itemid = "65411";

? ? var itemtitle = "6.9瑪爾扎哈OP套路教程";

? ? var obj_play = document.getElementById('play');

? ? if(obj_play != null) {

? ? ? ? obj_play.ontouchstart = function() {

? ? ? ? ? ? javascript:android.playVideo(itemid, videourl, itemtitle);

? ? ? ? }

? ? }

</script>

四，示例2，H5頁(yè)面調(diào)用Android撥打電話

1，初始化webView，配置js接口

@Override

? ? protected void onCreate(Bundle savedInstanceState) {

? ? ? ? super.onCreate(savedInstanceState);

? ? ? ? setContentView(R.layout.activity_js_call_java_video);

? ? ? ? webView = (WebView) findViewById(R.id.webview);

? ? ? ? WebSettings webSettings = webView.getSettings();

? ? ? ? //設(shè)置支持javaScript腳步語(yǔ)言

? ? ? ? webSettings.setJavaScriptEnabled(true);

? ? ? ? //支持雙擊-前提是頁(yè)面要支持才顯示

//? ? ? ? webSettings.setUseWideViewPort(true);

? ? ? ? //支持縮放按鈕-前提是頁(yè)面要支持才顯示

? ? ? ? webSettings.setBuiltInZoomControls(true);

? ? ? ? //設(shè)置客戶端-不跳轉(zhuǎn)到默認(rèn)瀏覽器中

? ? ? ? webView.setWebViewClient(new WebViewClient());

? ? ? ? //設(shè)置支持js調(diào)用java

? ? ? ? webView.addJavascriptInterface(new AndroidAndJSInterface(), "Android");

? ? ? ? //加載本地資源

? ? ? ? webView.loadUrl("file:///android_asset/JsCallJavaCallPhone.html");

? ? }

? ? class AndroidAndJSInterface {

? ? ? ? /**

? ? ? ? * 該方法將被js調(diào)用,用于加載數(shù)據(jù)

? ? ? ? */

? ? ? ? @JavascriptInterface

? ? ? ? public void showcontacts() {

? ? ? ? ? ? // 下面的代碼建議在子線程中調(diào)用

? ? ? ? ? ? String json = "[{\"name\":\"安保處\", \"phone\":\"18600012356\"}]";

? ? ? ? ? ? // Java調(diào)用JS中的方法

//? ? ? ? ? ? webView.loadUrl("javascript:show('" + json + "')");

? ? ? ? ? ? webView.loadUrl("javascript:show1(" + "'" + json + "'" + ")");

? ? ? ? }

? ? ? ? /**

? ? ? ? * 撥打電話

? ? ? ? * @param phone

? ? ? ? */

? ? ? ? @JavascriptInterface

? ? ? ? public void call(String phone) {

? ? ? ? ? ? Intent intent = new Intent(Intent.ACTION_CALL, Uri.parse("tel:" + phone));

? ? ? ? ? ? if (ActivityCompat.checkSelfPermission(JsCallJavaCallPhoneActivity.this, Manifest.permission.CALL_PHONE) != PackageManager.PERMISSION_GRANTED) {

? ? ? ? ? ? ? ? return;

? ? ? ? ? ? }

? ? ? ? ? ? startActivity(intent);

? ? ? ? }

? ? }

2，在html中配置js調(diào)用實(shí)現(xiàn)，上面的showcontacts有調(diào)用js的show等方法

<script type="text/javascript">

? ? ? ? ? ? function show(jsondata){? ? ? ? ? ?

? ? ? ? ? ? ? ? ? ? var jsonobjs = eval(jsondata);

? ? ? ? ? ? ? ? ? ? var table = document.getElementById("personTable");

? ? ? ? ? ? ? ? ? ? for(var y=0; y<jsonobjs.length; y++){

? ? ? ? ? ? ? ? ? ? ? ? var tr = table.insertRow(table.rows.length);

? ? ? ? ? ? ? ? ? ? ? ? var td1 = tr.insertCell(0);

? ? ? ? ? ? ? ? ? ? ? ? var td2 = tr.insertCell(1);

? ? ? ? ? ? ? ? ? ? ? ? td2.align = "center";

? ? ? ? ? ? ? ? ? ? ? ? td1.innerHTML = jsonobjs[y].name;

? ? ? ? ? ? ? ? ? ? ? ? td2.innerHTML = "<a href='javascript:Android.call(\""+ jsonobjs[y].phone+ "\")'>"+ jsonobjs[y].phone+ "</a>";

? ? ? ? ? ? ? ? ? ? }

? ? ? ? ? ? }

? ? ? ? ? ? function show1(jsondata){

? ? ? ? ? ? ? ? ? ? document.getElementById("content").innerHTML =("歡迎："+jsondata );

? ? ? ? ? ? ? ? ? ? var table = document.getElementById("personTable");

? ? ? ? ? ? ? ? ? ? var tr = table.insertRow(table.rows.length);

? ? ? ? ? ? ? ? ? ? var td1 = tr.insertCell(0);

? ? ? ? ? ? ? ? ? ? var td2 = tr.insertCell(1);

? ? ? ? ? ? ? ? ? ? td2.align = "center";

? ? ? ? ? ? ? ? ? ? td1.innerHTML = jsondata.name;

? ? ? ? ? ? ? ? ? ? td2.innerHTML = "<a href='javascript:Android.call(\""+ jsondata.phone+ "\")'>"+ jsonobjs[y].phone+ "</a>";

? ? ? ? ? ? }

? ? ? ? </script>

3，js調(diào)用java

<body onload="javascript:Android.showcontacts()">

td2.innerHTML = "<a href='javascript:Android.call(\""+ jsondata.phone+ "\")'>"+ jsonobjs[y].phone+ "</a>";

4，大體流程

html中在body加載的時(shí)候調(diào)用了Java中的showcontacts方法（前面的Android要和java中的保持一致），java中的showcontacts方法又調(diào)用了js中的show方法（webView.loadUrl("javascript:show('" + json + "')");），記得參數(shù)用引號(hào)括起來(lái)，js中的show方法接著調(diào)用java中的call方法。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容