[Xamarin] 在Android 中使用WebView 並且插入一段Javascript Code.
2015-08-19
一些需求，需要我在APP 中Load 完某個網站之後，動態插入某些 Javscript Code ，所以筆記一下相關的測試
1.介紹一下這次範例的畫面，一個很單純的頁面，裡面只有一個WebView id 為 webViewMain ，APP開啟後，我會載入 http://m.facebook.com 之後我會把上面的Facebook Banner 部分透過 javascript 改成紅色，並且會Toast 一段文字作為提示
如下圖:
頁面的 XML code:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:minWidth="25px"
android:minHeight="25px">
<WebView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/webViewMain" />
</LinearLayout>
畫面預覽:
2. 在 onCreate 時候必須要 WebView 的 Settings.JavaScriptEnabled 打開
protected override void OnCreate(Bundle bundle)
{ base.OnCreate(bundle); // Set our view from the "main" layout resourceSetContentView(Resource.Layout.Main);
webviewMain = FindViewById<WebView>(Resource.Id.webViewMain);
//開啟Javascript code. webviewMain.Settings.JavaScriptEnabled = true;webviewMain.RequestFocus();
//使用客製化的WebViewClient，這樣才能override OnPageFinished 事件webviewMain.SetWebViewClient(new CustWebViewClient(this));
//載入網頁 webviewMain.LoadUrl("https://m.facebook.com/");}
3.接下來就是 關於 那個Inner Class CustWebViewClient 的 Code :
/// <summary>/// 巢狀Class 繼承WebViewClient/// </summary>private class CustWebViewClient : WebViewClient
{ private Activity activity; public CustWebViewClient(Activity aty) {activity = aty;
}
public override bool ShouldOverrideUrlLoading(WebView view, string url)
{view.LoadUrl(url);
return true;
}
/// <summary> /// 當網頁load 完的時候所執行的事件 /// </summary> /// <param name="view"></param> /// <param name="url"></param>public override void OnPageFinished(WebView view, string url)
{ Toast.MakeText(activity, "呼叫Javascript", ToastLength.Long).Show(); //呼叫一段javascript code //其目的在於 將 id 為 header 的 element 背景顏色設成紅色的 view.LoadUrl("javascript:(function() { " + "var elems=document.querySelectorAll('#header');" + "for(var i = 0; i<elems.length; i++)" + " { " + " elems[i].style.backgroundColor='red';" + " }" + "})()"); base.OnPageFinished(view, url);}
}
這樣就大功告成
Sample code: