Android中webview跟JAVASCRIPT中的互動

最後更新：2018-12-07 來源：互聯網

上載者：User

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

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

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

WebView webView = new WebView(this);
webView.getSettings().setJavaScriptEnabled(true);
webView.loadUrl(getIntent().getCharSequenceExtra("url").toString());
//設定JavaScript指令碼代碼的介面名稱是”android”
webView.addJavascriptInterface(this, "android");
其中WEBVIEW調用的HTML頁中,JS如下:
<script type="text/javascript">
function ok() {
android.js(document.forms[0].elements[0].value, document.forms[0].elements[1].value);
}

而這個android.js在哪呢?那是在應用程式中的
//JavaScript指令碼代碼可以調用的函數js()處理
public void js(String action, String uri) {
...../
}

這個JS中就是處理JAVASCRIPT發送過來的請求了.

2) 下面的例子,當WEBVIEW網頁中輸入後,點提交按鈕,會跟ANDROID的應用程式進行互動
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;
}

而HTML頁中的JS事件為:
<input type="button" value="alert" onclick="alert(document.forms[0].elements[0].value)">

特別提示下,在自訂的MyWebChromeClient())中,除了可以重寫onJSAlert外,還可以
重寫onJsPrompt,onJsConfirm等,可以參考
http://618119.com/archives/2010/12/20/199.html

3) 下面這個例子,先顯示第一張圖片,點一點後，再顯示第2張圖片
HTML JS中:
   <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>

當點<a onClick="window.demo.onClick()">
後,調用ANDROID應用程式中的處理部分,看程式:
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()");
                    }
                }
            });
        }
    }
可以看到,ANDROID中,通過webView.loadUrl去調用HTML頁面中的JS風之境地 java-javascript 蘑菇街女裝

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 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