andorid原生程式碼和js互動

阿新 • • 發佈：2019-01-18

Android原生程式碼是可以和js進行互動的，本人理解，js語言和java類似，原生程式碼和js一定程度上能夠共享物件，通過webview控制元件作為二者的橋樑，可以實現方法的互相呼叫。

下面是程式碼，請注意看程式碼註釋

activity程式碼

package app.h5.com.myapplication;

import android.annotation.SuppressLint;
import android.app.Activity;
import android.content.Intent;
import android.net.Uri;
import android.os.Bundle;
import  
android.webkit.JavascriptInterface;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.Toast;

public class MainActivity1 extends Activity {

    private WebView webView;
    Contact contact;
    @SuppressLint("JavascriptInterface")
    public void onCreate(Bundle savedInstanceState) {
        super 
.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main1);
        //載入頁面
webView = (WebView) findViewById(R.id.webview);
        //允許JavaScript執行
webView.getSettings().setJavaScriptEnabled(true);

        contact = new Contact();
        // 新增一個物件, 讓JS可以訪問該物件的方法, 該物件中可以呼叫JS中的方法，引數二為js裡面物件名
 
webView.addJavascriptInterface(contact, "contact");
        //最好不要在此呼叫，如果網頁沒有載入完畢，不能執行js方法
//        contact.showcontacts();
webView.setWebViewClient(new WebViewClient(){
            @Override
public void onPageFinished(WebView view, String url) {
                super.onPageFinished(view, url);
                //網頁載入完成後，再呼叫js方法。
contact.showcontacts();
            }
        });
        webView.loadUrl("file:///android_asset/index1.html");
    }

    private final class Contact {

//注意Androidsdk17以上（不包括17），和js互動的方法必須加此註解 @JavascriptInterface

//JavaScript呼叫此方法撥打電話

@JavascriptInterface

public void call(String phone) {

//            startActivity(new Intent(Intent.ACTION_CALL, Uri.parse("tel:" + phone)));

Toast.makeText(MainActivity1.this, phone, Toast.LENGTH_LONG).show();

        //此方法呼叫js方法show(string)，引數通過json傳遞

@JavascriptInterface

public void showcontacts() {

            String json = "[{\"name\":\"zxx\", \"amount\":\"9999999\", \"phone\":\"18600012345\"}]";

            // 呼叫JS中的方法

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

        //在js裡面點選button，會呼叫此方法

@JavascriptInterface

public void toast(String str){

            Toast.makeText(MainActivity1.this, "aaaaaaaaaaaa  --- " + str, Toast.LENGTH_LONG).show();

}}

html程式碼

<!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>Insert title here</title>
    <script type="text/javascript">
    //此方法Android原生程式碼進行呼叫，引數為json字串，插入一行資料，姓名、存款、電話
            function show(jsondata){
                    alert("show");
                    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";  
                        var td3 = tr.insertCell(2);  
                        td3.align = "center";  
                        td1.innerHTML = jsonobjs[y].name;   
                        td2.innerHTML = jsonobjs[y].amount;
                        //點選此電話，呼叫Android原生程式碼的contact的call(str)方法
                        td3.innerHTML = "<a href='javascript:contact.call(\""+ jsonobjs[y].phone+ "\")'>"+ jsonobjs[y].phone+ "</a>";   
                    }  
            }  
        </script>
</head>

<!-- 請注意不要在html內直接呼叫Android程式碼，高版本Android sdk禁止此呼叫 -->

<!-- <bodyonload="javascript:contact.showcontacts()">此呼叫Android高版本禁止 -->

<body>

<button id="button" onclick = "javascript:contact.toast('123')">haha</button>
<table border="0" width="100%" id="personTable" cellspacing="0">
    <tr>
        <td width="30%">姓名</td>
        <td width="30%" align="center">存款</td>
        <td align="center">電話</td>
    </tr>
</table>
</body>
</html>

//注意Androidsdk17以上（不包括17），和js互動的方法必須加此註解 @JavascriptInterface

點選電話號碼，呼叫了contact類的方法，彈出電話號碼。

andorid原生程式碼和js互動

Android原生程式碼是可以和js進行互動的，本人理解，js語言和java類似，原生程式碼和js一定程度上能夠共享物件，通過webview控制元件作為二者的橋樑，可以實現方法的互相呼叫。下面是程式碼，請注意看程式碼註釋 activity程式碼 package ap

iOS和JS互動(含OC、html、js)程式碼不使用第三方庫(二)

最近研究研究OC和JS互動的WebViewJavascriptBridge的用法網上似乎有好多的關於OC和js互動的例子，但是沒有一個完成的。今天我就把我的OC程式碼和Html程式碼統統的放出來。在說說網上的例子都是一個樣沒有一點區別，其實你關注洲洲哥的簡書就

Android和HTML5混合開發中android程式碼與JS互動

當下HTML5非常火，使用HTML5混合開發的好處是當開發者想要修改某一個非原生頁面時，修改提交之後不用對應用進行升級發版，有人說HTML5將來將會取代原生開發，但個人感覺就目前來說這體驗感還沒完全達到原生的水平，今天做了個小Demo用於android與java

ios UIWebView使用和js互動

下面我們一起學習下UIWebView的使用一、定義webView 程式碼如下 #pragma 懶載入 - (UIWebView *)webView { if (!_webView) { _webView = [[UIWebView alloc] initWit

webView和js互動

1.匯入網路許可權 2.View佈局 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res

CEF：C++和JS互動

CEF 中的JavaScript CEF 利用 V8 JS 引擎來實現 JS。瀏覽器中的每一個 frame 都有自己的 JS 上下文，JS 只能在該上下文中執行。 JS 只能在渲染程序中的 TID_RENDERER 執行緒中執行。有關 JS 回撥的介面都包含

Android webView和js互動

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layo

微信統一下單支付伺服器程式碼和js程式碼

/** * * 類名稱：WeixinController.java 類描述：微信公共平臺開發 * * @version 1.0 */ @Controller @RequestMapping(value = "/pay") public class Weixi

WKWebView詳解&WKWebVieW和JS互動

開發App的過程中，常常會遇到在App內部載入網頁，通常用UIWebView載入。而這個自iOS2.0開始使用的Web容器一直是開發的心病：載入速度慢，佔用記憶體多，優化困難。如果載入網頁多，還可能因為過量佔用記憶體而給系統kill掉。各種優化的方法效果也不那麼明顯iOS8 以後，蘋果推出了新框架 W

WKWebView和UIWebView載入本地html和JS互動各種坑解決辦法

因為蘋果的檔案機制，所有的資原始檔都相當於放在bundle的路徑裡，裡面不分任何資料夾路徑，所以我們在載入(js, css, png)等等的資原始檔的時候，不應該加上任何檔名，所以最好是把所有有關html的檔案都放在同一平級的資料夾 UIWebView 1.OC調JS

Android開發之WebView和JS互動詳解

Android提供了一個很強大的WebView控制元件用來處理Web網頁，而在網頁中，JavaScript又是一個很舉足輕重的指令碼。本文將介紹如何實現Java程式碼和Javascript程式碼的相互呼叫。如何實現實現Java和js互

WKWebView OC和JS互動

網頁很簡單，只有一個按鈕，點選按鈕會觸發一個方法，在事件的方法中通過呼叫 window.webkit.messageHandlers.NativeModel.p

android 和 js互動客戶端呼叫的方法

mWebView.setWebViewClient(new WebViewClient() { // 點選H5的按鈕，跳轉到另一個介面，單機H5裡的提交按鈕判斷是否登入，onPageFinished（）每次載入都會呼叫 @Overrid

iOS中原生APP與JS互動之 WebViewJavascriptBridge 的簡單用法

有時候我們需要跟H5介面做一些簡單的互動功能，這就需要跟JS打交道了。 1、首先初始化一個webview（viewdidload） UIWebView* webView = [[UIWebView alloc] initWithFrame:self.view.bounds

duilib + cef簡單瀏覽器的demo2--c++和js互動

參考連線： https://bitbucket.org/chromiumembedded/cef/wiki/Home demo下載地址： http://download.csdn.net/detail/shuaixingrumo/9560822 前一篇博文講述了

iOS webview 和 js 互動

1.先上一段 html 程式碼 <html> <head> <meta http-equiv="Content-Type"content="text/html; charset=utf8"> </head> &l

安卓混合開發——原生Java和H5互動，保證你一看就懂！

** 在Android開發中，越來越多的商業專案使用了Android原生控制元件與WebView進行混合開發，當然不僅僅就是顯示一個WebView那麼簡單，有時候還需要本地Java程式碼與HTML中的JavaScript進行互動，Android也對互動做了很好的封裝，所以很容易實現例如：點選網頁中的按鈕An

IOS 原生介面和Weex容器互相跳轉實踐附部分js和原生程式碼

weex相關原理，請看官方網站此IOS Weex demo實現的功能，從原生介面跳轉到Weex容器頁面，然後點選Weex容器頁面的button（js）跳轉到另一個原生介面。一. 先上效果圖二.實現 1. weex容器渲染的js程式碼如下，上面

手把手實現：JS原生程式碼與Servlet的前後互動實現

1.涉及到的知識前端語言：javascript,html，如果可以的話，再來一個CSS用於設計樣式後端語言：Java 前端技術：ajax（可以用JQ框架，簡單又高效。但是希望用原生程式碼來寫，容易搞懂原理）後端技術：servlet 2.前端 2.1 首先寫一

android_阿里WEEX js檔案與原生程式碼資料互動

專案大部分前段用weex寫支付分享第三方等東西用原生寫這就產生了互動的大坑。阿里官方的文件互動的方法有兩種：Module和Component。這個Component 就是個大坑，根據文件所寫的各種除錯，就是無法互動，而且官方文件還出了低階錯誤，簡直磨滅了阿里在我

andorid原生程式碼和js互動

相關推薦