android 控制 WebView 內的 Javascript 互相調用 的方式記錄
一開始建立專案時 android 版本要先選 4.0 起跳
不然會錯誤一堆 因為舊的很多都已經不支援
也可以在 AndroidManifest.xml 裡面 修改
android:minSdkVersion="14" // 這個不改會有很多問題
在 AndroidManifest.xml 裡面加上網路權限
不然會錯誤一堆 因為舊的很多都已經不支援
也可以在 AndroidManifest.xml 裡面 修改
android:minSdkVersion="14" // 這個不改會有很多問題
在 AndroidManifest.xml 裡面加上網路權限
<uses-permission android:name="android.permission.INTERNET" /><uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
在主 /My_Web/res/layout/activity_main.xml
設計時 Composite 時拉 WebView 元件
在 MainActivity 裡面內容如下:
WebView mWebView = (WebView)findViewById(R.id.webView1);
在 activity_main.xml 要記得先存檔
不然 R.id. 會找不到 webView1
類似 C# 的 webbrower
------------------------
在一開始
protected void onCreate(Bundle savedInstanceState) {
前先宣告 private WebView webView;
內容加入
webView = (WebView)findViewById(R.id.webView1); webView.getSettings().setJavaScriptEnabled(true);//啟用Javascript //建立讓 Web 可以 Call 的元件 webView.addJavascriptInterface(new WebAppInterface(this), "Android"); webView.setWebViewClient(new MyWebViewClient());
這邊有錯誤 讓 Eclipse 幫我們先建
WebAppInterface,MyWebViewClient 這兩個類 跟檔案
addJavascriptInterface 這東西會要求在 onCreate 加入
@SuppressLint({ "JavascriptInterface", "SetJavaScriptEnabled" })
----------------------------------------------------
webView.loadUrl("file:///android_asset/index.html"); //注意这个资源的位置放在assets文件夹下。
ps:變更放在 assets 目錄下的 測試Html 檔時 要記得 專案重新整理
不然網頁無法更新
1.由 Android 呼叫 Web 內的 Js
這個用不著 addJavascriptInterface
就是
webView.loadUrl("javascript:JsTest()");
就可以 Call
也可以 直接 加入 Javascript 的程式碼
webView.loadUrl("javascript:document.getElementById('tt').value = '測試'; ");
一加入便會執行
---------------------------------------------
2.Web內 呼叫 Android 的 function
這個就要用 addJavascriptInterface
//建立讓 Web 可以 Call 的元件 webView.addJavascriptInterface(new WebAppInterface(this), "Android");
WebAppInterface 內是讓 Web 呼叫的東東
以下是程式碼
//建立讓 Web 可以 Call 的元件 public class WebAppInterface { Context mContext; /* Instantiate the interface and set the context */ //這是接收 this 用 讓 底下函數 可以 用到 主畫面功能 如無用到 就可拿掉 this WebAppInterface(Context c) { mContext = c; } //以下都是讓 Web Call 的介面 public void showSource(String html) { Log.d("Vincent", html); } public void showToast(String toast) { Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show(); } }
//應用方法
一個是抓網頁原始碼
在 MyWebViewClient 裡當web load 完
public void onPageFinished(WebView view, String url) {
Log.d("Vincent","onPageFinished ");
//將Javascript 注進 Html 內 並呼叫傳回 local_obj.showSource
view.loadUrl(
"javascript:window.Android.showSource('<head>'+ document.getElementsByTagName('html')[0].innerHTML+'</head>');");
super.onPageFinished(view, url);
}
紅色部分注意
Android 是建立 時 取的名字
webView.addJavascriptInterface(new WebAppInterface(this), "Android");
showSource是 內部要 call 的函數.
這個就是結合 注入 js 並執行後 傳回 給 android 的範例
-------------------------------
那 web 內 Js 怎麼 call android
在 web 內 js 碼
function showAndroidToast(toastmsg) { Android.showToast(toastmsg); }
只要在 web 內 call showAndroidToast("aa");
就會 Call android 內的 showToast
-------------------
打包收工
------------------------
在一開始
protected void onCreate(Bundle savedInstanceState) {
前先宣告 private WebView webView;
內容加入
webView = (WebView)findViewById(R.id.webView1); webView.getSettings().setJavaScriptEnabled(true);//啟用Javascript //建立讓 Web 可以 Call 的元件 webView.addJavascriptInterface(new WebAppInterface(this), "Android"); webView.setWebViewClient(new MyWebViewClient());
這邊有錯誤 讓 Eclipse 幫我們先建
WebAppInterface,MyWebViewClient 這兩個類 跟檔案
addJavascriptInterface 這東西會要求在 onCreate 加入
@SuppressLint({ "JavascriptInterface", "SetJavaScriptEnabled" })
----------------------------------------------------
webView.loadUrl("file:///android_asset/index.html"); //注意这个资源的位置放在assets文件夹下。
ps:變更放在 assets 目錄下的 測試Html 檔時 要記得 專案重新整理
不然網頁無法更新
1.由 Android 呼叫 Web 內的 Js
這個用不著 addJavascriptInterface
就是
webView.loadUrl("javascript:JsTest()");
就可以 Call
也可以 直接 加入 Javascript 的程式碼
webView.loadUrl("javascript:document.getElementById('tt').value = '測試'; ");
一加入便會執行
---------------------------------------------
2.Web內 呼叫 Android 的 function
這個就要用 addJavascriptInterface
//建立讓 Web 可以 Call 的元件 webView.addJavascriptInterface(new WebAppInterface(this), "Android");
WebAppInterface 內是讓 Web 呼叫的東東
以下是程式碼
//建立讓 Web 可以 Call 的元件 public class WebAppInterface { Context mContext; /* Instantiate the interface and set the context */ //這是接收 this 用 讓 底下函數 可以 用到 主畫面功能 如無用到 就可拿掉 this WebAppInterface(Context c) { mContext = c; } //以下都是讓 Web Call 的介面 public void showSource(String html) { Log.d("Vincent", html); } public void showToast(String toast) { Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show(); } }
//應用方法
一個是抓網頁原始碼
在 MyWebViewClient 裡當web load 完
public void onPageFinished(WebView view, String url) {
Log.d("Vincent","onPageFinished ");
//將Javascript 注進 Html 內 並呼叫傳回 local_obj.showSource
view.loadUrl(
"javascript:window.Android.showSource('<head>'+ document.getElementsByTagName('html')[0].innerHTML+'</head>');");
super.onPageFinished(view, url);
}
紅色部分注意
Android 是建立 時 取的名字
webView.addJavascriptInterface(new WebAppInterface(this), "Android");
showSource是 內部要 call 的函數.
這個就是結合 注入 js 並執行後 傳回 給 android 的範例
-------------------------------
那 web 內 Js 怎麼 call android
在 web 內 js 碼
function showAndroidToast(toastmsg) { Android.showToast(toastmsg); }
只要在 web 內 call showAndroidToast("aa");
就會 Call android 內的 showToast
-------------------
打包收工
留言
張貼留言