Use WebView and JS in Android to fully parse the interaction

1. Overview First, there is a need to present a concept, that is hybrid, the main meaning is native native Android and H5 hybrid development. Why did you do it? You can imagine that for the same activity, if the use of pure native development, Android and iOS to maintain the same set of interface and even logic, so that the cost of development and maintenance is very large, and the use of hybrid development method, let the front-end students to write a set of interfaces and logic, For the native end, just use the corresponding container to display it (for Android, this container is, of course, the WebView). So why not all the pages are developed in this way? The user experience is not always as native as using H5 to show the interface, so we need a tradeoff between the two.
　　
After the introduction of what is hybrid, let us consider the following scenarios: Scenario 1: The front side of the page has a button, click on the button to display a native component (such as a toast), or click on this button to go to the native side to perform a time-consuming task.
　　
Scenario 2: Or the front page has a button, click the logic of this button is: If logged in, then jump to the appropriate interface, if not logged in, then jump to the login screen. And this login interface is maintained by our native.
　　
After reading the above two scenes, I believe we also found a problem, hybrid such a development method has a problem to solve, that is the front-end and local communications.
　　
Here's how you can communicate between active native Android and H5.
　　
2. How to use the WebView control with other controls using the same method in layout using a "WebView" tab does not include the navigation bar, the address bar and other full browser features, only to display a page in WebView load Web page, Use here to write a picture description note the right to add access to the Internet in the MA www.sratchina.com nifest file: 11 However, clicking a link in Android, by default, calls the browser program installed on the phone to start, So want to deal with this action through WebView, then need to write a picture description here of course, We can also write a class to inherit webviewclient to extend the Webviewclient object. Write a description of the image here and then just modify the contents of the Setwebviewclient to write a picture description in addition to the user's customary considerations The webview needs to behave more like a browser, that is, it needs to be able to roll back the history, so it needs to overwrite the system's fallback key GoBack, GoForward can navigate backward through the history page here to write a picture describing example 1:webviewclient using layout code ACTIVITY_MAIN.XML:10.
　　
15.
　　
12345678910111213141516171234567891011121314151617 code: 2.
　　
4.
　　
9.
　　
Gets the WebView control settings using WebView load page 16.
　　
18.
　　
24.
　　
30.
　　
35.
　　
37.
　　
39.
　　
Override the system's fallback key 47.
　　
50.
　　
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253123456789101112131415161 7181920212223242526272829303132333435363738394041424344454647484950515253 and Java are very useful for mutual invocation, You can use the Android native Javascriptinterface to communicate with JavaScript and Java.
　　
Example 2:javascript and Java mutual invocation First we write an HTML code: 5.
　　
9.
　　
20.
　　
123456789101112131415161718192021www.boyuanyl.cn2223242512345678910111213141516171819202122232425 This is a very simple HTML5 page with a but Ton, click on the button to execute the Showtoast method in the JS script.
　　
Here's a picture description. So what does this showtoast method do?
　　
Here to write the picture description can see Control.showtoast, this is what we say later, see below our Android Project Java code.
　　
Writing layout file layout content is simple, is nested a WebView control here write a picture description write Mainactivity.java code 2.
　　
13.
　　
15.
　　
17.
　　
Get WebView control get WebView settings to set JavaScript to be available, this sentence is necessary, otherwise everything is done in vain to add JavaScript interface to WebView by WebView loading HTML page 32.
　　
42.
　　
46.
　　
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515212345678910111213141516171 819202122232425262728www.gouyily.cn29303132333435363

www.boshenyl.cn

7383940414243444546474849505152 The above code mainly does the following steps: a) Get WebView control B) Get the settings of WebView, set JavaScript to be available, Open JavaScript channel here to write the picture description C) in the Android program to establish the interface, and write the relevant logic to see the previous JS script that Showtoast () method here to write a picture of the control here is our interface, Called the interface Show method, it is obviously JS called the Android Code, output a description here to write a picture can see this interface we give it named control, finally through Loadurl loading page.
　　
Here to write the picture description can see a toast first, and then call the log () method, the log () method called the JS script log () method, JS log () method does the thing is to output msg in the console, here is obviously the Android call JS method.
　　
Here's a picture description D) Add our own JavaScript interface to WebView to inject a interface of our own writing by WebView's Addjavascriptinterface method.
　　
Write here the picture description e) Use the WebView control to load the HTML file we wrote here to write the picture description on the real phone running the program, the console successfully output content: here to write a picture description so we finished the JS and Java intermodulation, is not very simple.
　　
In the processing of JS warning, dialog boxes and other in the Android Processing JS Warning, dialog boxes need to set the Webchromeclient object to WebView, and to replicate the onjsalert,onjsconfirm therein, Onjsprompt method can be used to handle JavaScript common dialog box Example 3: dialog box for working with JavaScript in Android 1) write HTML page layouts Three dialog boxes for testing JavaScript This is a warning dialog box! For more information please go to my blog? "))
　　
You have chosen not to go! "); Show a dialog with input", "Enter your information here"); Thank you for using: Below we demonstrate 3 dialog boxes </p> Warnings, Reminders dialog box </p> Submit dialog with selection </p> submit a dialog box that requires user input </p> Submit 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849123456789101112131415161718192 02122232425262728293031323334353637383940414243444546474849 Page Effect: Write the layout in the picture description here Please enter the url "/> Connection"/> 123456789101112131415161718192021222324252627282930313212345678910111213141516171819202122232425262728293031323) To write a layout for a custom dialog box new Prom_ Dialog.xml file, in which a custom dialog box with input is composed of TextView and EditText 12345678910111213141516171819123456789101112131415161718194) Get the WebView control and make the relevant settings here to write the picture description 5) The replication OnKeyDown method, when the user presses the return key, returns the last loaded page here to write the picture description 6) to WebView set Setwebchromeclient, and duplicate the method set 3.
　　
Work in JavaScript to build a builder to display the dialog Box prompt dialog box in the Web page "); 14.
　　
After clicking the OK button, proceed to action 25 on the webpage.
　　
30.
　　
36.
　　
38.
　　
40.
　　
Handle the dialog box with the selection in JavaScript "); 65.
　　
Handling hints for dialog boxes in a Web page in JavaScript when no input is entered, the default display defines a dialog box with input consisting of TextView and EditText 77.
　　
Set the prompt information in the TextView corresponding Web page set edittext the input box in the corresponding Web page to build a builder to display the dialog box in the Web page to set the popup caption with the input dialog "); Set the popup Layout Settings button to listen 93.
　　
97.
　　
After clicking OK, get the input value and pass it to the Web page processing 104.
　　
106.
　　
109.
　　
117.
　　
126.
　　
Set the page load progress bar 133.
　　
139.
　　
142.
　　
Get the contents of the edit box we entered to determine whether the input content is not the URL loading URL

Use WebView and JS in Android to fully parse the interaction