android中webview與js交互

移動(dòng)開發(fā)中，我們經(jīng)常會(huì)遇到混合開發(fā)模式，經(jīng)常是在移動(dòng)客戶端中增加網(wǎng)頁(yè)，來減少客戶端的壓力，同時(shí)也讓軟件更加靈活。廢話少說，下面直接進(jìn)入主題。

在桐鄉(xiāng)等地區(qū)，都構(gòu)建了全面的區(qū)域性戰(zhàn)略布局，加強(qiáng)發(fā)展的系統(tǒng)性、市場(chǎng)前瞻性、產(chǎn)品創(chuàng)新能力，以專注、極致的服務(wù)理念，為客戶提供成都做網(wǎng)站、網(wǎng)站建設(shè) 網(wǎng)站設(shè)計(jì)制作按需求定制制作,公司網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè),高端網(wǎng)站設(shè)計(jì),成都全網(wǎng)營(yíng)銷,成都外貿(mào)網(wǎng)站制作,桐鄉(xiāng)網(wǎng)站建設(shè)費(fèi)用合理。

webView.getSettings().setAppCachePath(getCacheDir().getAbsolutePath());

webView.getSettings().setAppCacheEnabled(true);

if (Constant.DEBUG) {

webView.getSettings().setCacheMode(WebSettings.LOAD_NO_CACHE);

}

if (Build.VERSION.SDK_INT = Build.VERSION_CODES.LOLLIPOP) {

webView.getSettings().setMixedContentMode(WebSettings.MIXED_CONTENT_ALWAYS_ALLOW);

}

//參數(shù)1 定義Android 與js交互的接口， 參數(shù)2 與js交互的一個(gè)常量，可以是任意一個(gè)常量字符串，

但是h5網(wǎng)頁(yè)調(diào)用的時(shí)候需要增加這個(gè)參數(shù)二：handler

public class JSInterface{

@JavascriptInterface//這個(gè)標(biāo)注必須加上 表示js要調(diào)用的方法，可以自動(dòng)識(shí)別

public void getShareInfo(String strings) {

//todo android dosomething

}

}

那么 js端該如何調(diào)用這個(gè)方法呢\

android 和ios的調(diào)用方法不一樣 因此 h5里面需要區(qū)別andorid和ios機(jī)型來分別調(diào)用移動(dòng)端方法

如android：

//handler 是與android 約定的常量（最好做成全局通用的常量）

//getShareInfo 是與android 定義的調(diào)用方法

以上常量、方法、參數(shù)類型 必須一致才能成功調(diào)用

WebView提供兩個(gè)事件回調(diào)類給應(yīng)用層，分別為WebViewClient,WebChromeClient開發(fā)者可以繼承

這兩個(gè)類，接手相應(yīng)事件處理。WebViewClient 主要提供網(wǎng)頁(yè)加載各個(gè)階段的通知，比如網(wǎng)頁(yè)開始

加載onPageStarted，網(wǎng)頁(yè)結(jié)束加載onPageFinished等；WebChromeClient主要提供網(wǎng)頁(yè)加載過程

中提供的數(shù)據(jù)內(nèi)容，比如返回網(wǎng)頁(yè)的title,favicon等。

有需要監(jiān)聽加載網(wǎng)頁(yè)進(jìn)度

//需要webBar的可以自定義增加一個(gè)webBar

最后，就是大家都知道的webView.loadUrl(url);//url需要加載的網(wǎng)頁(yè)

那么，如何在android調(diào)用js的方法呢

//getMsg() 為js里面暴露的方法

在銷毀的時(shí)候：

protected void onDestroy() {\

super.onDestroy();\

if (webView != null) {\

webView.loadUrl("about:blank");\

webView.destory();\

}\

}

Android調(diào)用js的問題

Android中可以使用WebView加載網(wǎng)頁(yè)，同時(shí)Android端的java代碼可以與網(wǎng)頁(yè)上的javascript代碼之間相互調(diào)用。

一 Android部分：

布局代碼：

LinearLayout xmlns:android="" xmlns:tools="" android:layout_width="match_parent" android:layout_height="match_parent" android:focusable="true" android:focusableInTouchMode="true" android:orientation="vertical" android:padding="8dp" tools:context=".MainActivity" LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" EditText android:id="@+id/input_et" android:layout_width="0dp" android:layout_height="wrap_content" android:singleLine="true" android:layout_weight="1" android:hint="請(qǐng)輸入信息" / Button android:text="Java調(diào)用JS" android:layout_width="wrap_content" android:layout_height="wrap_content" android:onClick="sendInfoToJs" / /LinearLayout WebView android:id="@+id/webView" android:layout_width="match_parent" android:layout_height="match_parent" / /LinearLayout

Activity代碼：

public class MainActivity extends AppCompatActivity { private WebView webView; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); webView = (WebView) findViewById(R.id.webView); webView.setVerticalScrollbarOverlay(true); //設(shè)置WebView支持JavaScript webView.getSettings().setJavaScriptEnabled(true); webView.loadUrl(""); //在js中調(diào)用本地java方法 webView.addJavascriptInterface(new JsInterface(this), "AndroidWebView"); // //添加客戶端支持 webView.setWebChromeClient(new WebChromeClient()); } private class JsInterface { private Context mContext; public JsInterface(Context context) { this.mContext = context; } //在js中調(diào)用window.AndroidWebView.showInfoFromJs(name)，便會(huì)觸發(fā)此方法。 @JavascriptInterface public void showInfoFromJs(String name) { Toast.makeText(mContext, name, Toast.LENGTH_SHORT).show(); } } //在java中調(diào)用js代碼 public void sendInfoToJs(View view) { String msg = ((EditText) findViewById(R.id.input_et)).getText().toString(); //調(diào)用js中的函數(shù)：showInfoFromJava(msg) webView.loadUrl("javascript:showInfoFromJava('" + msg + "')"); // webView.loadUrl("javascript:showInfoFromJava()"); } }

二 網(wǎng)頁(yè)代碼

!DOCTYPE html html lang="en" head meta charset="UTF-8" titleAndroid WebView 與 Javascript 交互/title /head body input type="button" value="分享" onclick="f1()" input type="text" id="show"/ /body script function f1(){ AndroidWebView.showInfoFromJs("hello"); } function showInfoFromJava(msg){ document.getElementById("show").value=msg; alert(1); } /script /html

注意: android 調(diào)用js代碼可能會(huì)報(bào)錯(cuò)如下：

W/WebView(2088): java.lang.Throwable: A WebView method was called on thread 'JavaBridge'. All WebView methods must be called on the same thread.

解決辦法：

webView.post(new Runnable() { @Override public void run() { webView.loadUrl("javascript:showInfoFromJava('" + msg + "')"); }});

JS 調(diào)用android的方法該怎么調(diào)

? ? ? body

? ? ? ? ? !-- Calls into the javascript interface for the activity --

? ? ? ? ? !-- 從HTML文件中調(diào)用activity中的函數(shù) --

? ? ? ? ? !-- 也就是從HTML到android程序 留意window.demo.clickOnAndroid()這句話 --

? ? ? ? ? a onClick="window.demo.clickOnAndroid()"Click/a

? ? ? /body

mWebView.addJavascriptInterface(new?DemoJavaScriptInterface(),?"demo");

final?class?DemoJavaScriptInterface?{??

DemoJavaScriptInterface()?{??

}??

/**?

*?This?is?not?called?on?the?UI?thread.?Post?a?runnable?to?invoke?

*?

*?loadUrl?on?the?UI?thread.?

*?

*/??

public?void?clickOnAndroid()?{????????//?注意這里的名稱。它為clickOnAndroid(),注意，注意，嚴(yán)重注意??

mHandler.post(new?Runnable()?{??

public?void?run()?{??

Toast.makeText....??

}??

});??

}??

}

js怎么跟Android和ios進(jìn)行交互呢？

Android和ios都是用navtive語言編寫的app，那么調(diào)用js的方法如下：

Native 調(diào)用 JS:

本質(zhì)就一個(gè)方法,通過 stringByEvaluatingJavaScriptFromString,都是同步。

1.通常方法：js修通過改doucument的loaction或者新建一個(gè)看不見的iFrame,修改它的 src,就會(huì)觸發(fā)回調(diào) webView 的 shouldStartLoadWithRequest,參數(shù) request 的 url 就是新賦值的 location 或者 url,上層截獲這個(gè) url 的參數(shù),對(duì)此分發(fā)即可。 這個(gè)都是異步調(diào)用的。

如 JS function：

var messagingIframe;

messagingIframe = document.createElement('iframe');

messagingIframe.style.display = 'none';

document.documentElement.appendChild(messagingIframe);

function TestIOSJS(){

messagingIframe.src = "ios/test/click";

};

當(dāng)觸發(fā)上面的JS時(shí)，webview會(huì)收到下面的回調(diào)：

- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType

{

NSString *url = request.URL.absoluteString;

if([url hasSuffix:@"ios/test/click"]){

//do something you want

return NO;

}

return YES;

}

通過截獲這個(gè)request的參數(shù)就可以做native需要做的事情。

Android AgentWeb Android和Js交互

1、Android 調(diào)用js

mAgentWeb.getJsAccessEntrace().quickCallJs(" ");

quickCallJs("方法名",參數(shù)...)；

方法名不帶 ()

例：

js方法? ?getJs()

mAgentWeb.getJsAccessEntrace().quickCallJs("getJs ");

js方法? ?getJs(var a，var b)

mAgentWeb.getJsAccessEntrace().quickCallJs("getJs?",a,b);?

2、js調(diào)用Android

mAgentWeb.getJsInterfaceHolder().addJavaObject("android",new Class());

js調(diào)用 window.android.方法名(參數(shù))

Android中提供的方法 需要添加注解? @JavascriptInterface