android中Webview與javascript的交互(互相調用)

最近做Android項目中遇到要在webview中做與js交互相關的東東,涉及到js中調用android本地的方法,於是查了資料整理了一下android和js互相調用的過程。如下demo,demo的主要實現過程如下:通過加載本地的html文件(裏面有js腳本),實現android本地方法和js中的交互。

第一步:

mainfest.xml中加入網絡權限

[java] view plain copy
 在CODE上查看代碼片派生到我的代碼片
  1. <uses-permission android:name="android.permission.INTERNET" />  
第二步:

加載本地寫好的html文件(定義好js中提供給android調用的方法 funFromjs(),和android提供給js調用的對象接口fun1FromAndroid(String name)),放在 assets目錄下。

[html] view plain copy
 在CODE上查看代碼片派生到我的代碼片
  1. <body>  
  2.     <a>js中調用本地方法</a>  
  3.     <script>  
  4.       
  5.     function funFromjs(){  
  6.         document.getElementById("helloweb").innerHTML="HelloWebView,i'm from js";  
  7.     }  
  8.     var aTag = document.getElementsByTagName('a')[0];  
  9.     aTag.addEventListener('click', function(){  
  10.         //調用android本地方法  
  11.         myObj.fun1FromAndroid("調用android本地方法fun1FromAndroid(String name)!!");  
  12.         return false;  
  13.     }, false);  
  14.     </script>  
  15.     <p></p>  
  16.     <div id="helloweb">   
  17.   
  18.     </div>  
  19. </body>  

第三步:

實現android工程與js交互的相關代碼

android主題代碼:

[java] view plain copy
 在CODE上查看代碼片派生到我的代碼片
  1. @SuppressLint({ "JavascriptInterface""SetJavaScriptEnabled" })  
  2.    @Override  
  3.    protected void onCreate(Bundle savedInstanceState) {  
  4.        super.onCreate(savedInstanceState);  
  5.        setContentView(R.layout.activity_main);  
  6.        //初始化  
  7.        initViews();  
  8.   
  9.        //設置編碼  
  10.        mWebView.getSettings().setDefaultTextEncodingName("utf-8");  
  11.        //支持js  
  12.        mWebView.getSettings().setJavaScriptEnabled(true);  
  13.        //設置背景顏色 透明  
  14.        mWebView.setBackgroundColor(Color.argb(0000));  
  15.        //設置本地調用對象及其接口  
  16.        mWebView.addJavascriptInterface(new JavaScriptObject(mContext), "myObj");  
  17.        //載入js  
  18.        mWebView.loadUrl("file:///android_asset/test.html");  
  19.          
  20.        //點擊調用js中方法  
  21.        mBtn1.setOnClickListener(new View.OnClickListener() {  
  22.   
  23.            @Override  
  24.            public void onClick(View v) {  
  25.                mWebView.loadUrl("javascript:funFromjs()");  
  26.                Toast.makeText(mContext, "調用javascript:funFromjs()", Toast.LENGTH_LONG).show();  
  27.            }  
  28.        });  
  29.   
  30.    }  
js調用的android對象方法定義

[java] view plain copy
 在CODE上查看代碼片派生到我的代碼片
  1. public class JavaScriptObject {  
  2.     Context mContxt;  
  3.     @JavascriptInterface //sdk17版本以上加上註解  
  4.     public JavaScriptObject(Context mContxt) {  
  5.         this.mContxt = mContxt;  
  6.     }  
  7.   
  8.     public void fun1FromAndroid(String name) {  
  9.         Toast.makeText(mContxt, name, Toast.LENGTH_LONG).show();  
  10.     }  
  11.   
  12.     public void fun2(String name) {  
  13.         Toast.makeText(mContxt, "調用fun2:" + name, Toast.LENGTH_SHORT).show();  
  14.     }  
  15. }  

效果圖:


。。。。


ps:據網友反應,在Android4.4以上不支持js的一些方法了,上面的思想大概是這樣,要實用的大家可以參考這個開源項目:

https://github.com/lzyzsd/JsBridge


點擊去下載整個demo工程

發佈了42 篇原創文章 · 獲贊 71 · 訪問量 19萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章