This blog to you to share a WebView use case. Implement Android calling JavaScript code to control daytime/night mode.
About WebView How to use, the official website has very good explanation, Building Web Apps in WebView, little witch here not much to repeat.
Implementation ideasUnlike the native application, we are able to implement the Invoke system API very easily, which is to set the theme through the style.
Suppose our content is content in HTML. How to achieve? The first load of HTML pages is definitely for WebView, and the Loadurl way to display HTML pages to WebView, we know that Android can interact with JavaScript. That means you can call Android's code in JavaScript, and you can invoke JavaScript code in Android. So the idea is to switch between day/night mode by invoking JavaScript code from the HTML page in Android to control the page background and font style .
How to implement an HTML code that provides a test<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01//en" "HTTP://WWW.W3.ORG/TR/HTML4/STRICT.DTD";><html><meta http-equiv="Content-type" Content="text/html; Charset=utf-8 "> <script language=JavaScript> function load_night() { document.bgcolor="#000000"var FontColor = document.getElementById ("Font"); if (!fontcolor) { return; } fontcolor.style.color="white"} </script><script language="javascript"> function load_day(){ document.bgcolor="#ffffff"var FontColor = document.getElementById ("Font"); if (!fontcolor) { return; } fontcolor.style.color="Black" } </script><head><title>WebView Test Night Mode</title></head><body LEFTMARGIN="Ten" vlink= "#8000FF" BGCOLOR="# FFFFFF " ALINK=" #FF0000 " LINK=" #0000FF "TOPMARGIN= "Ten" TEXT="#666666"> <div id="Font">Dwarfed by the pale</div> </br> <button type="button" onClick="Load_night ()">Night mode</button> <button type="button" onClick="Load_day ()"> Daytime mode</button></body></html>Android calls JavaScript codeWebSettings settings = webView.getSettings();// 设置javaScript可用settings.setJavaScriptEnabled(true);webView.loadUrl("file:///android_asset/01.html");
Finally effect Full code@Override publicvoidonClick(View v) { switch (v.getId()) { case R.id.btn_nightmode: webView.loadUrl("javascript:load_night()"); break; case R.id.btn_lightmode: webView.loadUrl("javascript:load_day()"); break; default: break; } }
PackageCom.infzm.webview;Importandroid.app.Activity;ImportAndroid.content.Intent;ImportAndroid.net.Uri;ImportAndroid.os.Bundle;ImportAndroid.view.KeyEvent;ImportAndroid.view.View;ImportAndroid.view.View.OnClickListener;ImportAndroid.webkit.WebSettings;ImportAndroid.webkit.WebView;ImportAndroid.webkit.WebViewClient;ImportAndroid.widget.Button; Public class mainactivity extends Activity implements Onclicklistener { PrivateWebView WebView;PrivateButton nightmodebtn;PrivateButton lightmodebtn;@Override protected void onCreate(Bundle savedinstancestate) {Super. OnCreate (Savedinstancestate); Setcontentview (R.layout.activity_main); WebView = (WebView) This. Findviewbyid (R.id.webview); NIGHTMODEBTN = (Button) This. Findviewbyid (R.id.btn_nightmode); LIGHTMODEBTN = (Button) This. Findviewbyid (R.id.btn_lightmode); Nightmodebtn.setonclicklistener ( This); Lightmodebtn.setonclicklistener ( This);//Webview.loadurl ("http://www.baidu.com");WebSettings settings = Webview.getsettings ();//Set JavaScript availableSettings.setjavascriptenabled (true);//Bind JavaScript interface. Can actually call our Android code in JavaScript today//Webview.addjavascriptinterface (new Webappinterface (This), "Android");//Webview.setwebviewclient (New Mywebviewclient ()); //loading HTML pages under the assets folderWebview.loadurl ("File:///android_asset/01.html"); }/** * for controlling page navigation * @author wwj_748 * */ Private class mywebviewclient extends webviewclient { /** * When used to click on a link, the system calls this method */ @Override Public Boolean shouldoverrideurlloading(WebView view, String URL) {if(Uri.parse (URL). GetHost (). Equals ("Www.baidu.com")) {//This is my Web page. So do not overwrite. Get my WebView to load the page return false; }//Otherwise, this link is not my Site page. So browser enabled to process URLsIntent Intent =NewIntent (Intent.action_view, Uri.parse (URL)); StartActivity (Intent);return true; } }@Override Public Boolean OnKeyDown(intKeyCode, KeyEvent event) {//Check whether the event is returned, assuming there is a page history if(KeyCode = = Keyevent.keycode_back && webview.cangoback ()) {Webview.goback ();return true; }//Assuming that it is not a return key or no web browsing history, keep the default //System behavior (may exit the activity) return Super. OnKeyDown (KeyCode, event); }@Override Public void OnClick(View v) {Switch(V.getid ()) { CaseR.id.btn_nightmode:webview.loadurl ("Javascript:load_night ()"); Break; CaseR.id.btn_lightmode:webview.loadurl ("Javascript:load_day ()"); Break;default: Break; } }}http://download.csdn.net/detail/wwj_748/8554833
Reprint Please specify: It_xiao Wizard
Blog Address: http://blog.csdn.net/wwj_748
Mobile Development Enthusiast Group: 299402133
Android record 24-webview for daytime/night reading mode
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
