2. 程式人生 > >webview與js的相互互動

webview與js的相互互動

阿新 • • 發佈：2019-01-22
方案思路， 1.在點選圖片的時候呼叫本地的java方法並給出響應的圖片地址 2.本地獲得圖片地址後，開啟一個遮罩activity進行顯示和處理 第二步的實現很容易實現，關鍵是第一步的實現，在網頁中點選圖片不會呼叫本地的java程式碼。那麼我們需要給這個點選事件加上相應的js函式，讓點選事件呼叫的js函式來呼叫我們提前準備好的java函式，等我們捕獲到圖片的url剩下的就好處理了。 關鍵點就是給普通的html注入我們的js函式，讓圖片能夠響應點選並呼叫js函式，在通過js函式來呼叫我們的java函式。聽起來好像有點繞，不過也不難，下面我們用程式碼實現下 對java和js互動還不熟悉的同學，請參照前面的文章
這次例項的主要功能：點選圖片在新的activity中展示，對圖片能夠進行手勢操作，包括雙指縮放等 效果圖
載入webview的activity程式碼  
  1. package wst.webview;  
  2. import android.annotation.SuppressLint;  
  3. import android.app.Activity;  
  4. import android.content.Context;  
  5. import android.content.Intent;  
  6. import android.graphics.Bitmap;  
  7. import android.os.Bundle;  
  8. import android.webkit.WebView;  
  9. import android.webkit.WebViewClient;  
  10. @SuppressLint("SetJavaScriptEnabled")  
  11. publicclass MainActivity extends Activity {  
  12.     private WebView contentWebView = null;  
  13.     @SuppressLint("SetJavaScriptEnabled")  
  14.     @Override
  15.     publicvoid onCreate(Bundle savedInstanceState) {  
  16.         super.onCreate(savedInstanceState);  
  17.         setContentView(R.layout.main);  
  18.         contentWebView = (WebView) findViewById(R.id.webview);  
  19.         // 啟用javascript
  20.         contentWebView.getSettings().setJavaScriptEnabled(true);  
  21.         // 隨便找了個帶圖片的網站
  22.         contentWebView.loadUrl("http://www.weim.me/12408.html");  
  23.         // 新增js互動介面類，並起別名 imagelistner
  24.         contentWebView.addJavascriptInterface(new JavascriptInterface(this), "imagelistner");  
  25.         contentWebView.setWebViewClient(new MyWebViewClient());  
  26.     }  
  27.     // 注入js函式監聽
  28.     privatevoid addImageClickListner() {  
  29.         // 這段js函式的功能就是，遍歷所有的img幾點，並新增onclick函式，函式的功能是在圖片點選的時候呼叫本地java介面並傳遞url過去
  30.         contentWebView.loadUrl("javascript:(function(){" +  
  31.         "var objs = document.getElementsByTagName(\"img\"); " +   
  32.                 "for(var i=0;i<objs.length;i++)  " +   
  33.         "{"
  34.                 + "    objs[i].onclick=function()  " +   
  35.         "    {  "
  36.                 + "        window.imagelistner.openImage(this.src);  " +   
  37.         "    }  " +   
  38.         "}" +   
  39.         "})()");  
  40.     }  
  41.     // js通訊介面
  42.     publicclass JavascriptInterface {  
  43.         private Context context;  
  44.         public JavascriptInterface(Context context) {  
  45.             this.context = context;  
  46.         }  
  47.         publicvoid openImage(String img) {  
  48.             System.out.println(img);  
  49.             //
  50.             Intent intent = new Intent();  
  51.             intent.putExtra("image", img);  
  52.             intent.setClass(context, ShowWebImageActivity.class);  
  53.             context.startActivity(intent);  
  54.             System.out.println(img);  
  55.         }  
  56.     }  
  57.     // 監聽
  58.     privateclass MyWebViewClient extends WebViewClient {  
  59.         @Override
  60.         publicboolean shouldOverrideUrlLoading(WebView view, String url) {  
  61.             returnsuper.shouldOverrideUrlLoading(view, url);  
  62.         }  
  63.         @Override
  64.         publicvoid onPageFinished(WebView view, String url) {  
  65.             view.getSettings().setJavaScriptEnabled(true);  
  66.             super.onPageFinished(view, url);  
  67.             // html載入完成之後，新增監聽圖片的點選js函式
  68.             addImageClickListner();  
  69.         }  
  70.         @Override
  71.         publicvoid onPageStarted(WebView view, String url, Bitmap favicon) {  
  72.             view.getSettings().setJavaScriptEnabled(true);  
  73.             super.onPageStarted(view, url, favicon);  
  74.         }  
  75.         @Override
  76.         publicvoid onReceivedError(WebView view, int errorCode, String description, String failingUrl) {  
  77.             super.onReceivedError(view, errorCode, description, failingUrl);  
  78.         }  
  79.     }  
  80. }  

展示圖片的activity程式碼
  1. package wst.webview;  
  2. import java.io.IOException;  
  3. import java.io.InputStream;  
  4. import java.net.URL;  
  5. import android.app.Activity;  
  6. import android.graphics.drawable.BitmapDrawable;  
  7. import android.graphics.drawable.Drawable;  
  8. import android.os.Bundle;  
  9. import android.widget.TextView;  
  10. publicclass ShowWebImageActivity extends Activity {  
  11.     private TextView imageTextView = null;  
  12.     private String imagePath = null;  
  13.     private ZoomableImageView imageView = null;  
  14.     @Override
  15.     protectedvoid onCreate(Bundle savedInstanceState) {  
  16.         super.onCreate(savedInstanceState);  
  17.         setContentView(R.layout.show_webimage);  
  18.         this.imagePath = getIntent().getStringExtra("image");  
  19.         this.imageTextView = (TextView) findViewById(R.id.show_webimage_imagepath_textview);  
  20.         imageTextView.setText(this.imagePath);  
  21.         imageView = (ZoomableImageView) findViewById(R.id.show_webimage_imageview);  
  22.         try {  
  23.             imageView.setImageBitmap(((BitmapDrawable) ShowWebImageActivity.loadImageFromUrl(this.imagePath)).getBitmap());  
  24.         } catch (IOException e) {  
  25.             e.printStackTrace();  
  26.         }  
  27.     }  
  28.     publicstatic Drawable loadImageFromUrl(String url) throws IOException {  
  29.         URL m = new URL(url);  
  30.         InputStream i = (InputStream) m.getContent();  
  31.         Drawable d = Drawable.createFromStream(i, "src");  
  32.         return d;  
  33.     }  
  34. }  


圖片佈局檔案 
  1. <?xmlversion="1.0"encoding="utf-8"?>
  2. <LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"
  3.     android:layout_width="fill_parent"
  4.     android:layout_height="fill_parent"
  5.     android:orientation="vertical">
  6.     <!-- TODO 預設佔位圖 -->
  7.     <wst.webview.ZoomableImageView
  8.         android:id="@+id/show_webimage_imageview"
  9.         android:layout_width="fill_parent"
  10.         android:layout_height="fill_parent"
  11.         android:scaleType="matrix"
  12.         android:src="@drawable/icon"/>
  13.     <TextView
  14.         android:id="@+id/show_webimage_imagepath_textview"
  15.         android:layout_width="fill_parent"
  16.         android:layout_height="wrap_content"
  17.         android:gravity="center"
  18.         android:textColor="#ffff0000"/>
  19. </LinearLayout>

希望對大家有所幫助 原始碼附上

相關推薦

WebView與JS的互動和優化

一、與JS互動     1.直接使用html檔案、js檔案、圖片、佈局存放在本地assets或網路中                   2.在Main

ios webview與JS的互動

最近寫了一個與JS互動的程式，瞭解了下HTML ,HTML DOM,JS相關的知識 1.什麼是 DOM？ 通過 JavaScript，您可以重構整個 HTML 文件。您可以新增、移除、改變或重排頁面上的專案。 要改變頁面的某個東西，JavaScript 就需要獲

iOS原生程式碼通過webView與js指令碼互動

  前段時間公司的一個專案需要使用的到OC程式碼與js指令碼的互動。對於入行不久的我，當時也是在部落格裡面爬文來解決。做下來之後把我自己通過實踐和學習得來的東西整理一下，以便在這方面接觸不多的人能夠快速的掌握OC與js的互動。新手教程，大神勿噴，如有錯誤，多多指教。    

webview與js的相互互動

方案思路， 1.在點選圖片的時候呼叫本地的java方法並給出響應的圖片地址 2.本地獲得圖片地址後，開啟一個遮罩activity進行顯示和處理 第二步的實現很容易實現，關鍵是第一步的實現，在網頁中點

Android之webView與js互動

一、java呼叫js操作： 1.佈局檔案： <WebView android:id="@+id/web" android:layout_width="match_parent" android:layout_height="mat

解決Android簽名混淆後WebView與JS互動失效的問題

最近做了個網頁端微信支付的小功能，測試版還好好的，混淆打包後，寫的方法webview無法呼叫，意識到混淆除了問題，於是在網上找了一些大神的解決方案，再根據自己的實際解決過程，列出來一個完整的解決方法。 Android4.2以上版本呼叫js介面需要在方法使用宣告@JavascriptInterfa

WebView與Js互動所有方法及使用

首先 你肯定要定義，初始化一個webview，其實網上的例子很多，我這裡就簡單的把一些WebView 中可能會用到的的很重要的屬性以及支援全屏播放視訊該怎麼實現的程式碼粘出來，直接放到專案中去就行了 [java] view plaincopy <span style=

Android筆記之 Webview與Js互動-詳情舉例

Android呼叫網頁自身Js 你好！ 這是你第一次使用 Markdown編輯器 所展示的歡迎頁。如果你想學習如何使用Markdown編輯器, 可以仔細閱讀這篇文章，瞭解一下Markdown的基本語法知識。 本地（asset）網頁androidcalljs.h

Webview與js互動

public class MainActivity extends AppCompatActivity implements View.OnClickListener { private EditText ed; private Button btn; priva

Android WebView 與JS的資料互動

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

Android中Webview與js互動

1.js呼叫Android程式碼Android端：webView.addJavascriptInterface(new WebHost(this),"js");向WebView註冊一個名叫“js”的物件，然後在JS中可以訪問js這個物件，呼叫這個物件裡的一些方法。 publi

WebView與JS的幾種互動

最近整理了一下原生與H5之間的互動方式，簡單的做個總結。 OC端與JS的互動，大致有這幾種：攔截協議、JavaScriptCore庫、WKWebView、自定義NSURLProtocol攔截、WebViewJavascriptBridge。 JavaScriptCore一個iOS7引進的標準庫，iOS7以前

webview與js互動在targetsdkversion設定為19的時候出現的問題

轉自：http://blog.csdn.net/kaka123ac/article/details/42871441 1.在WebView中呼叫js，在4.4（target = 19）之前，只有一種方法：      呼叫js方法 test()     webView.lo

Android WebView與JS互動及訊息處理

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

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

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

WebView與JS互動不會執行onPageFinished() -WebView(WebKit)

WebView sample: https://github.com/GoogleChrome/chromium-webview-samples Android WebView 在開發過程中有哪些坑？->https://www.zhihu.com/question/3

WebView的使用以及Android與Js的互動

1.WebView基礎使用 1.想要使用WebView，需要在<manifest>中新增許可權： <uses-permission android:name="android.permission.INTERNET" />2.我們可以在xml

Android webview與js互動上傳圖片

最近專案中用到webview，並且有上傳圖片功能，iOS不用做任何處理，但Android就不行了，調不到相簿，後百度才知道這是Android webview的侷限性，需要自己擴充套件WebChromeClient來實現，話不多說直接上程式碼： 第一步：擴充套件WebChro

WebView使用詳解（一）——Native與JS相互呼叫（附JadX反編譯）

前言：念念不忘，必有迴響，永遠堅持你所堅持的！一直在用WebView，還沒有系統的總結過它的用法，下面就係統的總結下，分享給大家一、基本用法1、載入線上URL[java] view plain copy print?void loadUrl(String url

webView 與js互動方法（參考文獻）

1.下載示例 http://code4app.com/ios/webview-%E5%8A%A0%E8%BD%BDcss-js-%E6%96%87%E4%BB%B6/4fcd84186803fa6645000000 <script type = "text/javas