首頁 > 開發者 > 手機程式開發

(五) Android中WebView跟JavaScript中的互動

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：android   webview   javascript   互動   addjavascriptinterfa   

在 android 的應用程式中,可以直接調用 WebView 中的 javascript 代碼,而 WebView 中的 javascript 代碼,也可以去調用 ANDROID 應用程式(也就是 JAVA 部分的代碼).下面舉例說明之:

1、JAVASCRIPT 指令碼調用 android 程式
要在 WebView 中,調用 addJavascriptInterface(OBJ,interfacename)其中,obj 為和 javascript 通訊的應用程式,interfacename 為提供給 JAVASCRIPT 調用的名稱,設定如下:

<span style="font-size:14px;">WebView WebView = new WebView(this);WebView.getSettings().setJavaScriptEnabled(true);WebView.loadUrl(getIntent().getCharSequenceExtra("url").toString());//設定 JavaScript 指令碼代碼的介面名稱是”android”WebView.addJavascriptInterface(this, "android");</span>
其中 WebView 調用的 HTML 頁中,JS 如下: 

<span style="font-size:14px;"><script type="text/javascript">function ok() {android.js(document.forms[0].elements[0].value, document.forms[0].elements[1].value);}</script></span>
而這個 android.js 在哪呢?那是在應用程式中的 
<span style="font-size:14px;">//JavaScript 指令碼代碼可以調用的函數 js()處理public void js(String action, String uri) {...../}</span>
這個 JS 中就是處理 JAVASCRIPT 發送過來的請求了.

2、下面的例子,當 WebView 網頁中輸入後,點提交按鈕,會跟 ANDROID 的應用程式進行互動

<span style="font-size:14px;">WebView WebView = new WebView(this);WebView.getSettings().setJavaScriptEnabled(true);WebView.setWebChromeClient(new MyWebChromeClient());WebView.loadUrl(getIntent().getCharSequenceExtra("url").toString());//onJsAlert()函數接收到來自 HTML 網頁的 alert()警告資訊public boolean onJsAlert(WebView view, String url, String message, JsResult result) {if (message.length() != 0) {AlertDialog.Builder builder = new AlertDialog.Builder(JExample02.this);builder.setTitle("From JavaScript").setMessage(message).show();result.cancel();return true;}return false;}</span>
而 HTML 頁中的 JS 事件為: 
<span style="font-size:14px;"><input type="button" value="alert" onclick="alert(document.forms[0].elements[0].value)"></span>
特 別 提 示 下 , 在 自訂的 MyWebChromeClient()) 中 , 除 了 可 以 重 寫 onJSAlert 外 , 還 可 以 重 寫onJsPrompt,onJsConfirm 等。
3、下面這個例子,先顯示第一張圖片,點一點後,再顯示第 2 張圖片
HTML JS 中: 

<span style="font-size:14px;"><script language="javascript">function changeImage02() {document.getElementById("image").src="navy02.jpg";}function changeImage01() {document.getElementById("image").src="navy01.jpg";}</script></head><body><a onClick="window.demo.onClick()"><img id="image" src="navy01.jpg"/></a></body></span>

當點<a onClick="window.demo.onClick()">後,調用 ANDROID 應用程式中的處理部分,看程式 

<span style="font-size:14px;">WebView.addJavascriptInterface(new JSInterface(),"demo");public final class JSInterface {//JavaScript 指令碼代碼可以調用的函數 onClick()處理public void onClick() {handler.post(new Runnable() {public void run() {if (flag == 0) {flag = 1;WebView.loadUrl("javascript:changeImage02()");} else {flag = 0;WebView.loadUrl("javascript:changeImage01()");}}});}}</span>

可以看到,ANDROID 中,通過 WebView.loadUrl 去調用 HTML 頁面中的 JS.

其實在第一篇文章中，就已經接觸到了webView和js的相互調用了，大體先介紹到這吧。




(五) Android中WebView跟JavaScript中的互動

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More