Android與JS互相調用以及註意
阿新 • • 發佈:2017-06-10
import 調用 spa sha 技術 作用 zhang ces wan
html:
界面:
近期項目中常常使用Html5而Android與JS調用常常會用到,這裏記錄一下,測試系統5.0以上。
這裏先貼一下源代碼
Activity:
package jwzhangjie.com.webviewandjs; import android.content.Context; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.view.View; import android.webkit.JavascriptInterface; import android.webkit.WebView; import android.webkit.WebViewClient; import android.widget.Toast; public class MainActivity extends AppCompatActivity { private WebView webView; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); webView = (WebView)findViewById(R.id.webView); initWebView(); } private void initWebView(){ //設置編碼 webView.getSettings().setDefaultTextEncodingName("utf-8"); //支持js webView.getSettings().setJavaScriptEnabled(true); //設置監聽事件 webView.setWebViewClient(new JieWewViewClient()); //設置本地調用對象及其接口 webView.addJavascriptInterface(new JavaScriptObject(getApplicationContext()), "toAndroid"); //載入js webView.loadUrl("file:///android_asset/index.html"); } public void javaCallJsNoParams(View view){ webView.loadUrl("javascript:javaCallJsNoParamsMethod()"); } public void javaCallJsHasParams(View view){ webView.loadUrl("javascript:javaCallJsHasParamsMethod(‘" + 123 + "‘)"); } public class JavaScriptObject { Context mContxt; public JavaScriptObject(Context mContxt) { this.mContxt = mContxt; } @JavascriptInterface //sdk17版本號以上加上註解 public void jsCallJavaNoParams() { Toast.makeText(mContxt, "Js調用Java方法(無參)", Toast.LENGTH_LONG).show(); } @JavascriptInterface //sdk17版本號以上加上註解 public void jsCallJavaHasParams(String params) { Toast.makeText(mContxt, "Js調用Java方法(有參):" + params, Toast.LENGTH_SHORT).show(); } } class JieWewViewClient extends WebViewClient{ /** * 假設緊跟著 * webView.loadUrl("file:///android_asset/index.html"); * 調用Js中的方法是不起作用的,必須頁面載入完畢才幹夠 */ @Override public void onPageFinished(WebView view, String url) { super.onPageFinished(view, url); webView.loadUrl("javascript:javaCallJsHasParamsMethod(‘" + 123 + "‘)"); } } }
html:
<!DOCTYPE HTML> <HTML> <HEAD> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> </HEAD> <BODY> <div> <input type="text" id="showText" style="width:100%;height:100px;margin-bottom:10px" readonly> <input type="button" onclick="jsCallJavaNoParamsMethod()" value="Js調用Java方法(無參)"> <input type="button" onclick="jsCallJavaHasParamsMethod(‘成功了‘)" value="Js調用Java方法(有參)"> </div> </BODY> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript"> function javaCallJsNoParamsMethod(){ $(‘#showText‘).val("Java調用js方法,無參數"); } function javaCallJsHasParamsMethod(params){ $(‘#showText‘).val("Java調用Js方法。有參數:"+params); } function jsCallJavaNoParamsMethod(){ toAndroid.jsCallJavaNoParams(); } function jsCallJavaHasParamsMethod(params){ toAndroid.jsCallJavaHasParams(params); } </script> </HTML>
註意點:
1、Android系統17以及以上,[email protected]
2、不能在載入html頁面的以下直接調用js方法,應該在WebViewClient的onPageFinished裏面載入,原則就是必須html載入完畢後。才幹調用js中的方法。
源代碼:http://download.csdn.net/download/jwzhangjie/9020941
Android與JS互相調用以及註意