A post-operative summary of the incurable diseases: interaction between WebView and JavaScript

Recently participated in the development of the M3 project in the company, this project is a front-end page developed using HTML5 , after development, the project address is written to Android, IOS Shell source code, so that when the application is opened automatically loading the URL of the Project home page . This practice for users, can not update the client, for developers, found that the problem can be repaired and updated in a timely manner, of course, this is the advantages of b/S software.

In this APP There is a dial-up function, that is, click on the interface of the phone small icon, you can directly dial out the phone number. Yesterday's colleague Tintin told us that the APP has a BUG: dialing in IOS is no problem, but on Android when dialing in, it jumps to an error page, similar to our common 404 page. Unable to implement dial-up operation. Our code writes about the common tel:19212345678 . Let me first talk about our process.

If you know it, I don't know what Baidu knows. So I and colleagues obviously first to Baidu above search, get the following results:

In the open source Chinese community, it is suggested that a double slash, similar to tel://19212345678, is added to the Tel: back. I tried it immediately after I saw it, no.

On another site, someone suggested adding the official website address behind the number. Similar to tel:19212345678#weixin.qq.com. I tried it, and it was always the same.

Colleagues gathered together to see, this dialing code, on iOS There is no problem, in the own browser is no problem, in the Android There is no problem with the browser that comes with your phone. only after the package into the APP After the visit there is a problem!

Later colleague Flowers sent me a piece of code, which is the way to override shouldoverrideurlloading (WebView view, String URL) when setting properties . The main idea of the code is to determine whether the incoming URL begins with "Tel:", if yes, to perform a dial operation; if not, execute the load URL the operation. I added it and tried it, so I could dial it, but I couldn't get too early. Also found that there is a small problem, the dial-up interface pops up at the same time, the same 404 -like error interface will bounce out, but is the dial-up interface to cover. After the call is over, the error screen will come out again.

Today Tintin is urging to ask the question of dialing, I said I only finished the 50%, there is a small problem has not been resolved, I am not satisfied. "If you can't solve it today, I'm not satisfied," Tintin said in cunning. After I finished the task in the afternoon, I began to study this wonderful problem again. Colleagues Tao Tao and Flowers also come to help the pulse.

Colleague Tao Tao in QQ to send me a few URLs, I have to open a test.

The first one is to rewrite shouldoverrideurlloading (WebView view, String URL) This method, I replied that yesterday has been tried, can be effective but the wrong interface will follow the popup, the experience is not very good;

The second is to make a call using the Wati protocol. Similar to <a href= "wtai://wp//mc;10086" > call 10086 </a> , I reply that this also tried, also does not work.

On the advice of my colleague flowers, I opened the simulator and studied the process of downloading the entire dial-up operation, which took some time, but did not find anything unusual. shouldoverrideurlloading The judgment of this code is right.

Just helpless, flowers suddenly remembered a year ago and another colleague to do the House diagram display function, was also due to the limitations of the technology has to use JS Call the Android API , I want to see if I can solve the problem of dialing by imitating the solution of the problem.

This oneWebViewwith theJSthe interaction is in theJSPa function is defined on the page. In theAndroidshell source inside throughAddjavascriptinterface (NewJavascriptinterface ( This),"Jsinterface") to add definitions to the JSPabove theJSinterface. Of course, the premise is to add the shell source code insideJavaScriptsupport. I've added this. In theJSPinside, the original<a href="Tel:xxx" >has been transformed into a click event, the specific execution is written in theJSfunction, which avoids being identified as a hyperlink and jumps to a404page. It would be too easy if you thought it would be successful here. Try, click on the image after the page is a clear flashing, and did not perform dialing operations. In theLogcatSee, it actually does not take the value. Is there a problem at the time of taking the value? I take the value of the${clientinfovo.clientmobile}replaced by<s:property value= ' clientmobile '/>, it's worth it!

The rest is for Android and IOS Two operating systems to judge. at last, the problem was solved, and I sighed long.

Thank you for having enough patience to read the long journal above, if you also have a similar problem with me, then you are lucky. Below I summarize the WebView and js Interaction This kind of problem solution:

1. Add The rights statement inside the Android shell source code:

<uses-permission android:name= "Android.permission.CALL_PHONE"/>

You need to declare the permissions for the call and obtain authorization from the user, or you cannot perform a dial-up operation through the Android Shell. If you want to send text messages, that is the text message-related permissions, flexible processing;

2. Enable JavaScript support in the Android Shell source code :

Contentwebview.getsettings (). Setjavascriptenabled (True);

This can be in the shell source code to invoke the Web page js function

3, rewrite the shouldoverrideurlloading(WebView view, String url) method, the matching and non-conformance of the two URLs to judge, and perform different operations. The sample code is as follows:

public boolean shouldoverrideurlloading (WebView view, String URL) {        if (Url.startswith ("Tel:")) {                 Intent Intent = new Intent (Intent.action_view,                        uri.parse (URL));                 StartActivity (intent);                             return false;        } else {        view.loadurl (URL);        return true;}    }

4, in the Web page link transformation to call the JS function, inside the function to execute a similar window.js Interface name . js Name of function (). The sample code is as follows:

function Exitsys (tel) {window.jsInterface.exitSys (tel);}

5, in the Android Shell Source of the face should be added JS Interface declaration, such as my name is jsinterface, is written in the fourth step JS Interface Name:

Contentwebview.addjavascriptinterface (New Javascriptinterface (This), "Jsinterface");

6, inJavascriptinterfaceclass inside the declaration withJSthe corresponding method. Here, I'm writing inAndroidthe code that calls the phone is executed inside. For example:

public void Exitsys (String number) {   Intent Intent = new Intent (Intent.action_call,uri.parse ("Tel:" +number));                 StartActivity (intent);  }

7. this that needs to be called JS If you need a dynamic reference, give this JS function-related parameter value assignment is best used <s:property > , but not with ${} . Otherwise it may not be possible to get the value somehow; (If you test on the simulator, the invalid MMI code can also indicate success.) Suggest you can switch to the real machine to test)

8, in Web page plus browser judgment. If it's an iOS Browser, continue with the previous Magnum <a href="tel:xxx" >, if it's Android Browser, just execute the custom js function.

A post-operative summary of the incurable diseases: interaction between WebView and JavaScript