2. 程式人生 > >Android WebView JS的注入

Android WebView JS的注入

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

JavaScript在Web開發中非常有用，而現在越來越多的App介面也由Javascript來建立，我們需要解決一個問題：java與javaScript怎麼進行互動呢？
例如，我們可以在html中建立一個按鈕，為按鈕事件新增一個介面。然後你可以使用html按鈕跳轉到另一個Activity中。

（1）本地Html檔案

新增一個新的Assert資料夾

右鍵點選“ App ”module>new>folder>assert folder，然後將為您建立一個Assert Folder。

建立一個html檔案

之後，通過右鍵單擊Assert Folder>new >file建立一個html檔案。將html檔案命名為“sample.html”。然後按照下面的原始碼新增html檔案中的按鈕並建立javascript介面​​。

<html>
<head>
    <style>
body{

}
input{

width: 300px;
padding:10px;

}
div#content{
padding:20px;

}
</style>
    <script type="text/javascript">
    function showToastA(toastmsg) {
        InterfaceName.showToast(toastmsg);
    }
 function navigateToAnotherActivityA()
 
 {
        InterfaceName.navigateToAnotherActivity();
    }
</script>
</head>
<body>
<center>
    <h3>Javascript bind to Android</h3>

    <div>
        <input type="button" value="Show Toast" onClick="showToastA('Message from Javascript')" /><br/><br
 
/>
        <input type="button" value="Go to Another Activity" onClick="navigateToAnotherActivityA()" />
    </div>
</center>
</body>
</html>

建立第二個Activity

建立html檔案後，轉到專案中建立一個新的活動，所以稍後你將使用html按鈕導航到這個Activity。
activity_main.xml:


<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.questdot.javascriptwebviewexample.MainActivity">

    <WebView
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/webkit"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" />
</RelativeLayout>

MainActivity.java

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        WebView browser;
        browser=(WebView)findViewById(R.id.webkit);

        browser.getSettings().setJavaScriptEnabled(true);

        browser.addJavascriptInterface(new WebAppInterface(this), "InterfaceName");

        browser.loadUrl("file:///android_asset/sample.html");
    }

    public class WebAppInterface {
        Context mContext;

        WebAppInterface(Context c) {
            mContext = c;
        }

        @JavascriptInterface
        public void showToast(String toast) {
            Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show();
        }


        @JavascriptInterface
        public void navigateToAnotherActivity(){
            AlertDialog.Builder alertDialog = new AlertDialog.Builder(mContext);

            alertDialog.setTitle("Alert Message");

            alertDialog.setMessage("You want to Go another Activity?");

            alertDialog.setPositiveButton("YES",
                    new DialogInterface.OnClickListener() {
                        public void onClick(DialogInterface dialog, int which) {

                            Intent chnIntent = new Intent(MainActivity.this, SecondActivity.class);
                            startActivity(chnIntent);
                        }
                    });

            alertDialog.setNegativeButton("NO",
                    new DialogInterface.OnClickListener() {
                        public void onClick(DialogInterface dialog, int which) {

                            dialog.cancel();
                        }
                    });
            // Showing Alert Message
            alertDialog.show();
        }
    }
}

addJavascriptInterface中的第二個引數“InterfaceName”應該與html檔案中的相同，否則將報錯。
還要注意的是4.2之前向webview注入的物件所暴露的介面toString沒有註釋語句@JavascriptInterface，而4.2及以後的則多了註釋語句@JavascriptInterface
經過查官方文件所知，因為這個介面允許JavaScript 控制宿主應用程式，這是個很強大的特性，但同時，在4.2的版本前存在重大安全隱患，因為javascript 可以使用反射訪問注入webview的Java物件的public fields，在一個包含不信任內容的WebView中使用這個方法，會允許攻擊者去篡改宿主應用程式，使用宿主應用程式的許可權執行java程式碼。因此4.2以後，任何為js暴露的介面，都需要加。

（2）動態網頁

圖片點選

我們還可以對網頁中的圖片新增點選事件，獲得該圖片的資訊，比如連結等。
主要程式碼如下：

 // 注入js函式監聽  
    private void addImageClickListner() {  
        // 這段js函式的功能就是，遍歷所有的img結點，並新增onclick函式，函式的功能是在圖片點選的時候呼叫本地java介面並傳遞url過去  
        contentWebView.loadUrl("javascript:(function(){" +  
        "var objs = document.getElementsByTagName(\"img\"); " +   
                "for(var i=0;i<objs.length;i++)  " +   
        "{"  
                + "    objs[i].onclick=function()  " +   
        "    {  "   
                + "        window.imagelistner.openImage(this.src);  " +   
        "    }  " +   
        "}" +   
        "})()");  
    }  
// js通訊介面  
    public class JavascriptInterface {  

        private Context context;  

        public JavascriptInterface(Context context) {  
            this.context = context;  
        }  

        public void openImage(String img) {  
            System.out.println(img);  
            //  
            Intent intent = new Intent();  
            intent.putExtra("image", img);  
            intent.setClass(context, ShowWebImageActivity.class);  
            context.startActivity(intent);  
            System.out.println(img);  
        }  
    }  
// 監聽  
    private class MyWebViewClient extends WebViewClient {  
        @Override  
        public boolean shouldOverrideUrlLoading(WebView view, String url) {  

            return super.shouldOverrideUrlLoading(view, url);  
        }  

        @Override  
        public void onPageFinished(WebView view, String url) {  

            view.getSettings().setJavaScriptEnabled(true);  

            super.onPageFinished(view, url);  
            // html載入完成之後，新增監聽圖片的點選js函式  
            addImageClickListner();  

        }  

        @Override  
        public void onPageStarted(WebView view, String url, Bitmap favicon) {  
            view.getSettings().setJavaScriptEnabled(true);  

            super.onPageStarted(view, url, favicon);  
        }  

        @Override  
        public void onReceivedError(WebView view, int errorCode, String description, String failingUrl) {  

            super.onReceivedError(view, errorCode, description, failingUrl);  

        }  
    }  

// 隨便找了個帶圖片的網站  
        contentWebView.loadUrl("http://www.weim.me/12408.html");  
        // 新增js互動介面類，並起別名 imagelistner  
        contentWebView.addJavascriptInterface(new JavascriptInterface(this), "imagelistner");  
        contentWebView.setWebViewClient(new MyWebViewClient());

這種注入JS的方法基本可以說是放之四海而皆準的方法，我們還可以用此方法攔截按鈕的點選事件。

按鈕點選

我們以豆瓣登陸這個網頁為例。

檢視網頁原始碼，登陸按鈕在這段程式碼中可以找到：

<form id="lzform" name="lzform" method="post" onsubmit="return validateForm(this);" action="https://accounts.douban.com/login">
  <div style="display:none;">
    <img src="https://www.douban.com/pics/blank.gif" onerror="document.lzform.action='https://accounts.douban.com/login'"/>
  </div>
  <input name="source" type="hidden" value="book"/>
    <input name="redir" type="hidden" value="https://book.douban.com/subject/1041482/"/>
  <div class="item-right">
    <a href="?redir=https://book.douban.com/subject/1041482/&amp;source=book&amp;login_type=sms">手機驗證碼登入</a>
  </div>
  <div class="item">
    <label>帳號</label>
    <input id="email" name="form_email" type="text" class="basic-input"
           maxlength="60" value="郵箱/手機號/使用者名稱" tabindex="1"/>
  </div>
  <div class="item">
    <label>密碼</label>
    <input id="password" name="form_password" type="password" class="basic-input" maxlength="20" tabindex="2"/>
  </div>
  <!-- tsYR99_fISw | 175.191.30.52 -->

  <div class="item">
    <label>&nbsp;</label>
    <p class="remember">
      <input type="checkbox" id="remember" name="remember" tabindex="4"/>
      <label for="remember" class="remember">下次自動登入</label>
      | <a href="https://accounts.douban.com/resetpassword">忘記密碼了</a>
    </p>
  </div>
  <div class="item">
    <label>&nbsp;</label>
    <input type="submit" value="登入" name="login" class="btn-submit" tabindex="5"/>
  </div>




<div class="item item-3rd">
    <label>
    第三方登入：
    </label>
    <a target="_top" href="https://www.douban.com/accounts/connect/wechat/?from=book&amp;redir=https%3A//book.douban.com/subject/1041482/" class="item-wechat"><img src="https://img3.doubanio.com/f/accounts/1b6cc3ca91f78cf47f41eafa91fbcd4918ae239c/pics/connect_wechat.png" title="微信"></a>
    <a target="_top" href="https://www.douban.com/accounts/connect/sina_weibo/?from=book&amp;redir=https%3A//book.douban.com/subject/1041482/&amp;fallback=" class="item-weibo"><img src="https://img3.doubanio.com/f/accounts/e2f1d8c0ede93408b46cbbab4e613fb29ba94e35/pics/connect_sina_weibo.png" title="新浪微博"></a>
</div>

</form>

那麼要怎麼獲取這個登入按鈕的事件呢？關鍵程式碼如下：

//注入javascript到頁面
webview1.setWebViewClient(new WebViewClient() {
    @Override
    public void onPageFinished(WebView view, String url) {
        super.onPageFinished(view, url);

        StringBuilder sb = new StringBuilder();
        //獲得網頁中所有form節點的標籤陣列，這裡獲得陣列的第一個form節點
        //onsubmit 事件會在表單中的確認按鈕被點選時發生。
        sb.append("document.getElementsByTagName('form')[0].onsubmit = function () {");
        //方法中的區域性變數，用來儲存使用者名稱和密碼
        sb.append("var objPWD, objAccount;var str = '';");
        //獲得form節點下所有的input節點陣列
        sb.append("var inputs = document.getElementsByTagName('input');");
        sb.append("for (var i = 0; i < inputs.length; i++) {");
        //獲得輸入的密碼
        sb.append("if (inputs[i].type.toLowerCase() === 'password') {objPWD = inputs[i];}");
        //獲得輸入的使用者名稱
        sb.append("else if (inputs[i].name.toLowerCase() === 'form_email') {objAccount = inputs[i];}");
        sb.append("}");
        sb.append("if (objAccount != null) {str += objAccount.value;}");
        sb.append("if (objPWD != null) { str += ' , ' + objPWD.value;}");
        sb.append("window.MYOBJECT.processHTML(str);");
        sb.append("return true;");
        sb.append("};");

        view.loadUrl("javascript:" + sb.toString());
    }

});

//建立一個由javascrip呼叫的類
class MyJavaScriptInterface
{
    @JavascriptInterface
    public void processHTML(String html)
    {
        //called by javascript
           Log.d("henrytest", html);

            AlertDialog.Builder builder = new AlertDialog.Builder(Main.this);
            builder.setTitle("AlertDialog from app")
                    .setMessage(html)
                    .setPositiveButton(android.R.string.ok,
                            new DialogInterface.OnClickListener() {

                                @Override
                                public void onClick(DialogInterface dialog, int which) {
                                    // TODO Auto-generated method stub

                                }
                            })
                    .setCancelable(false).show();
    }
}
//為javascript註冊介面
webview1.getSettings().setJavaScriptEnabled(true);
webview1.addJavascriptInterface(new MyJavaScriptInterface(), "MYOBJECT");

這裡寫圖片描述

相關推薦

Android WebView JS的注入

JavaScript在Web開發中非常有用，而現在越來越多的App介面也由Javascript來建立，我們需要解決一個問題：java與javaScript怎麼進行互動呢？ 例如，我們可以在html中建立一個按鈕，為按鈕事件新增一個介面。然後你可以使用html按

android webview JS傳值 prompt

near gravity should 使用 sre pen you eat fir 1. <!DOCTYPE html> <html style="min-height: 100%"> <head> <meta cha

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

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

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

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

android webview JS對話方塊 不能彈出 解決辦法

文章轉載：http://blog.sina.com.cn/s/blog_4e1e357d0101ds5h.html 寫webView 與JS互動的時候 發現彈出對話方塊  設定了很多還是彈不出來：     webSettings.setJavaScriptEnabled(

Android WebView注入js檔案，判斷當前HTML有沒有某個js然後再注入

Android WebView注入js檔案，判斷當前HTML有沒有某個js然後再注入 1.注入js程式碼 判斷當前有沒有jQuery檔案引入，然後再進行注入。 判斷依據其實很簡單，獲取script 的dom物件 判斷src的值 進行遍歷就行了。 (function () {

Android WebView的Js物件注入漏洞解決方案（JSBridge存在的意義）

最近在做一個專案過程中，發現了一個很嚴重的安全漏洞，這個漏洞是烏雲平臺（http://www.wooyun.org）報告出來的。 1，使用場景 我們很多時候要使用WebView來展示一個網頁，現在很多應用為了做到服務端可控，很多結果頁都是網頁的，而不是本地實現，這樣做有很多好處，比如介面的改變不需要重新發布

Android WebView 加載超長 JS 數據

int strong catch [] size set native logs 業務 在之前的文章裏面，我總結過WebView如何與網頁交互，也就是Java如何和JS交互 —— Android WebView 總結 —— Java和JavaScript交互。 基於這篇文章

Android WebView使用詳解包括js互調（by 星空武哥）

分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！        

Android Bug記錄--Error: Webview js呼叫報錯Error calling method on NPObject

其他專案組的專案需要一個簡單h5專案，需要幫忙弄個android殼，就一個頁面，只不過需要播放聲音，沒有其他任何js互動，以後也不會有什麼js拓展。於是就簡單寫了個webview，加了js回撥，並封裝了聲音播放類，在js回撥中使用。 public class Javascript {

記Android webView載入html程式碼 不執行js方法的情況

頁面中有一個webView顯示後臺返回的富文字資料，富文字資料是一串html程式碼，但是並沒有<html><body>這些標籤,webView不做任何處理，使用 webView.loadData(html, "text/html; charset=U

Android WebView 與JS的資料互動

關於WebView 我們知道目前android市場上的一些應用採用的開發方式大致分為三種：Native App、Web App、Hybrid App。本文主要是Hybrid App中實現的主要技術

android webview一篇文章全面瞭解（基本使用，url攔截，js跟java互動）

1.前言 最近幾年混合應用越來越流行，及一部分功能用原生程式碼開發，一部分功能用html5實現。那什麼時候用原生什麼時候用網頁呢？很多人第一反應就是經常變化的頁面用網頁開發，避免經常發包，不全對。其實因為網頁使用體驗遠遠不及原生開發，所以一般有以下兩種情況建議

【Android】webview javascript 注入方法

Android中向webview注入js程式碼可以通過webview.loadUrl("javascript:xxx")來實現，然後就會執行javascript後面的程式碼。 但是當需要注入一整個js檔案的時候，貌似就有點麻煩了。不過理清以下思路，方法其實也很簡單，如下：我們通過在webview的onPag

Js與android webview遭遇過的坑

Uncaught TypeError: Object [object Object] has no method 可能產生該情況有幾種可能 1、安全限制問題 如果只在4.2版本以上的機器出問題，那麼就是系統處於安全限制的問題了。Android文件這

Android webView和js互動

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

Android WebView與JS互動及訊息處理

一、WebView與JS互動 1.JS呼叫本地方法 這個功能的實現還是比較容易的。直接呼叫WebView的該方法就可以新增介面了,不過先要啟動互動 ? 1 2 3 4 // 啟用javascript  mWebView.getSettin

Android WebView上傳圖片(base64)到H5(JS)

最近專案需求是H5呼叫安卓的方法選擇圖片或者開啟照相機拍照，然後傳給H5顯示圖片，最後由H5上傳到伺服器。查了一下資料，大概有以下幾種方法： 利用WebChromeClient的openFileChooser（5.0+是onShowFileChooser）

Android WebView、js互動方式原理總結

webView.loadUrl("javascript:console(" + "'Hello,China!'" + ")""); 二、js注入實現 先來說說原理吧，當js呼叫prompt()方法時，WebChromeClient.onJsPrompt()方法會被觸發，當js觸發Android提供的介面方法時

Android webView與js 互動以及jsbridge框架原始碼分析

1.簡單篇 如何實現簡單的android 呼叫js 與js呼叫android 讓webview做一下操作 private void init(Context context){ WebSettings setting =