H5與android原生的JS互動

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

公司最近接手了一個電信的專案，其中最關鍵的技術就是H5頁面與android的互動。因為之前專案中H5與原生介面的載入動畫是分開寫的，導致大小以及效果有差距，所以我才有接觸兩者之間互動的學習機會。簡單的來說需求就是在H5中通過Js呼叫android自定義的LoadingDialog。</span>

首先 Android通過內建的控制元件Webview來載入H5頁面。主要可以設定的程式碼如下：

webView.setVerticalScrollBarEnabled(false);
webView.setHorizontalScrollBarEnabled(false);
webView.getSettings().setJavaScriptEnabled(true); //加上這句話才能使用JavaScript方法  
webView.getSettings().setDomStorageEnabled(true);
webView.requestFocus();
webView.getSettings().setUseWideViewPort(true);
webView.getSettings().setLoadWithOverviewMode(true);
webView.getSettings().setSupportZoom(true);
webView.getSettings().setBuiltInZoomControls(true);
webView.getSettings().setSavePassword(false);
webView.getSettings().setSaveFormData(false);
webView.getSettings().setSupportZoom(false);

首先是JsInterface.java

public class JsInterface {
    Context context;

    public JsInterface(Context context) {
        this.context = context;
    }<pre name="code" class="java">    @JavascriptInterface
    public void startFunction() {
        new LoadingDialog(context,true,R.style.loadingDialog).show();
    }

在activity裡面實現H5裡面的方法，注意方法之前要加上註解“@JavascriptInterface”，當android:targetSdkVersion的數值小於17無所謂，當大於等於17時就必須新增，否則不會呼叫方法裡面的Java程式碼。
在MainActivity中通過 wv.addJavascriptInterface(new JsInterface(MainActivity.this),"shady");前一個引數為定義的JsInterface，後一個為之後在H5介面中呼叫的名稱。

public class MainActivity extends AppCompatActivity {
    private Button btn;
    private WebView wv;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        btn = (Button) findViewById(R.id.btn);
        wv = (WebView) findViewById(R.id.wv);

        wv.getSettings().setJavaScriptEnabled(true);//開啟Js支援
        wv.loadUrl("file:///android_asset/test.html");
        //New 一個介面類 後面的是名稱
        wv.addJavascriptInterface(new JsInterface(MainActivity.this),"shady");
        btn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                wv.loadUrl("javascript:show(" + "'http://blog.csdn.net/Leejizhou'" + ")");//呼叫HTML5頁     面中的JS方法
            }
        });
    }
}

test頁面

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <title></title>
    <meta name="Generator" content="Cocoa HTML Writer">
    <meta name="CocoaVersion" content="1404.34">
    <script type=“text/javascript”>
    function show(arg){
    document.getElementById("content").innerHTML =
         ("<br\>"+arg);
}
</script>
</head>
<body>
<h1><div id="content">內容顯示</div></h1>
<p id="color">aaaaa</p>
<a onClick="window.shady.startFunction()">CallAndroidMethod</a>

</body>
</html>

H5與android原生的JS互動

公司最近接手了一個電信的專案，其中最關鍵的技術就是H5頁面與android的互動。因為之前專案中H5與原生介面的載入動畫是分開寫的，導致大小以及效果有差距，所以我才有接觸兩者之間互動的學習機會。簡單

h5頁面與Android原生頁面互動

Android頁面內巢狀h5頁面已經是隨處可見了。在Android原生頁面和h5頁面的取捨上那些不是本文的重點。重點是，如此多的頁面用網頁來寫，那麼必定涉及到網頁與原生的互動，俗稱js互動。目標：h5頁面點選按鈕Android端接收到網頁傳給的json資料。

Flutter與Android原生程式碼互動

一、概述 Flutter正式版已經出了一段時間了，作為剛入門的一個菜鳥而言，我還需要更多的學習。最近開始的flutter專案用到了分享功能，但是到目前為止，微信，QQ等還沒有出對flutter分享的SDK，這就需要用到flutter與Android和ios的原生互動。下面僅關於fl

Flutter與Android原生的互動

Flutter釋出Preview版本後熱度持續上升，但是仍然有很多不足之處，所有前期還是採用與原生結合的混合開發，那就需要了解Flutter與原生的互動的一些方法。原生啟動Flutter Activity 新建Flutter 專案預設啟動MainAct

JS與Android原生互動

JS與Android原生互動在專案的開發中我們會遇到android 原生與Html5的混合開發，我們可能會需要在android中呼叫js裡面的方法進行資料互動或其他的特殊處理，又或者在Html頁面呼

h5與App原生互動方案

方便測試階段，H5嵌入到App當中，開發人員方便除錯與Debug。目前主流的技術方案： 1.在iOS7以前，在UIWebView中實現一些代理方法攔截帶有約定好的protocol的Url，從Url上獲取get方式的引數傳遞，對映成本地原生方法，如下： -(BOOL)webView:(UIWebView *)

原生Js互動之DSBridge

文章連結：https://mp.weixin.qq.com/s/Iqd0dKM-ZW4UwkIgSTnvYg 在上一篇文章「android 記一次富文字載入之路」中介紹了關於android載入富文字的方法，其中提到的載入html 檔案的，app拿到後臺的json格式資料，傳到html模板檔案裡進

Android Webview JS互動自動點選遇到的問題

這篇文章主要是記錄，在webview中實現自動點選按鈕，和內容填充。遇到一些問題，希望能對你有所幫助 Webview 與 JS互動：下面的JS程式碼實現的功能是：點選帳號登陸，輸入賬號密碼，登陸 String js = "javascript:{docume

node入門demo-Ajax讓前端angularjs/jquery與後臺node.js互動,技術支援：mysql+html+angularjs/jquery

只貼出關鍵程式碼，具體的基礎配置，在dos視窗中鍵入express -e phone,會自動幫我們設定好app.js的配置為了讓nodejs可以渲染html頁面，在dos視窗中鍵入npm install ejs --save，會自動幫ejs的相關配置下載如node_modules資料

ReactNative 與Android 原生傳引數 ReadableMap WritableMap

ReadableMap 主要是rn給原生傳遞引數時使用（1）rn給原生傳遞引數 toast = () => { let obj={ id:1, name:"xi

SSM與android端資料互動

一.前言最近第一次用ssm與安卓端實現了資料互動，我這裡資料互動通過傳送接受JSON資料來實現的。實現了登入註冊和對某些實體類資料的增刪改查。二.後端的具體實現我們實體類的資料和安卓端的實體資料名字要是相同的，不然獲取不到後端傳送的JSON資料，作為後端我們不

Android Webview Js互動遇到的坑！！！

最近研究了一下webview的js互動問題，遇到了各種坑。現在就遇到的坑進行講解一下，避免其他盆友遇到同樣的坑不知所挫。 1.需求：修改html中控制元件內容的值，如登入介面的使用者名稱與密碼自動輸入問題。初始解決方法：通過webview設定webviewClient,並

Android 混淆JS互動沒反應

-keepattributes *Annotation* -keepattributes *JavascriptInterface* -keepclassmembers class fqcn.of.j

簡單的ajax讓前端jquery與後臺node.js互動

作為一個前端程式設計師，這幾天突然看到node.js這個東西，突然就產生了非常濃厚的興趣，跟著網上的教程完成了第一個簡單的前端與後臺互動的程式。最近node.js也很火，大家如果有也想學習這個好玩的東西的，可以借鑑這這篇文章開始你的node之路。 html內容 <!

JavaScript與Android之間的互動

javascript直接呼叫Android中的方法，例子：webview直接載入html，html中的javascript呼叫android端的方法。此例子可以有助於android開發者開發圖表類的專案，圖表不需要原生程式碼，只需用指令碼實現。圖表的指令碼生成可以參考：htt

移動端h5開發和原生的互動

一、使用框架 apiCloud 方便和原生之間的資料互動頁面結構： lib:第三方元件 page：頁面模組劃分 common：公共模組二、使用過程中的問題： 1) h5頁面進入二級頁面按返回鍵 android不能一級一級按次序返回直接回

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

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

H5 呼叫android原生相機程式碼分析

H5 頁面在webView中呼叫原聲相機： H5 端的程式碼：如下： <input id="upload" type="file" accept="image/*;" capture="camera" > //文字輸入框； android端的程式碼： w

Android開發之Webview中原生與JS互動

文章目錄概述使用場景互動方式 Java呼叫JS程式碼 JS呼叫Java程式碼總結概述由於手機硬體資源的快速提升，使得采用混合開發的可能性逐漸成為現實並且流行起來。Android開發中

H5與原生Android互動

前言：在專案中有時候需要APP和H5之間相互呼叫方法來實現某些功能，本文主要介紹Android是怎麼實現相互呼叫對方的方法。 H5呼叫APP的方法——APP來實現一些功能 H5將所需要的引數通過JSon字串的形式傳給APP Android——根據webview

H5與android原生的JS互動

相關推薦