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

Recently in the company to participate in the development of the M3 Project, the project is the use of HTML5 development of the front-end page, after development, the project address written to Android, IOS Shell source code, so that when the application is opened, you actively load the project home page URL. This way 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. Ability to dial out numbers directly from your mobile phone.

Yesterday, my colleague Tintin told us that the APP has a BUG: dialing in iOS is no problem, but in Android inside when dialing. Will jump to an error page, similar to our common 404 page. Unable to implement dial-up operation. Our code is written in a common tel:19212345678 .

Let me first talk about our process.

To know what to say. Do not know Baidu know.

So after receiving the feedback, my colleague and I went to Baidu first to search for a bit, 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 way.

In another site, someone suggested adding the official website address behind the number.

Similar to tel:19212345678#weixin.qq.com.

I tried it a bit. It's still the same old way.

Colleagues gathered together to see, this dialing code, on iOS is no matter what problem, in the own browser is no matter what. There is no problem with the browser that comes with the Android phone. There 's a problem when you go to the APP After you've packaged it!

Later colleague Flowers sent me a piece of code. This is the way to override shouldoverrideurlloading (WebView view, String URL) when setting properties . The main idea of the code is to infer whether the incoming URL begins with "Tel:", assuming yes, then run the dial operation; Then run the load -loaded URL 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 error interface like 404 is still going to pop out, just to be blocked by the dial-up interface. After the call is completed, the error screen will come out again.

Today Tintin is urging to ask this question of dialing again, I say I just finished 50%. There is still a small problem that has not been solved. I'm not comfortable yet.

"I'm not comfortable with the assumption that you can't solve it today," Tintin said Cunningly.

In the afternoon, after I had finished the task at hand, I started to study this wonderful problem. Colleagues Tao Tao and Flowers also come to help the pulse.

Colleague Tao Tao on QQ to send me a few web sites. I tried it all.

The first one is to rewrite the shouldoverrideurlloading (WebView view, String URL) for this method. I replied that yesterday has been tried, can be effective but the wrong interface will be followed by the pop-up, 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" > dial 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.

In addition to proving that the shouldoverrideurlloading code is inferred. And there is nothing else to gain.

Just helpless, flowers suddenly remembered a year ago and there is a colleague to do the House diagram display function. It was also because the limitations of technology had to use JS to invoke the Android browser API, I want to see if I can solve the problem of dialing by imitating the solution of the problem.

The interaction between this WebView and js is defined as a function on the JSP page.

In android shell source code inside through Addjavascriptinterface (new  javascriptinterface (this ", "Jsinterface" ) to join the definition on the JSP page js defined on "Font-family: Song Body" interface. Of course, the premise is to add the shell source code javascript interaction Support. I've added this.

In the JSP , the original <a href="tel:xxx" > has been transformed into a click event, the detailed operation of the content is written in the JS function, which avoids being recognized as a hyperlink and jumping to a 404 page.

Let's say you think it's a success here, it's too easy.

Try, click on the image after the page is a clear flashing, and does not run dialing operations.

As seen in Logcat , it is actually not worth the value. Is there a problem at the time of taking the value? I replaced the value of ${clientinfovo.clientmobile} with <s:property value= ' clientmobile '/> . It's worth it!

The rest is the inference for Android and IOS two operating systems.

Thank you for being patient enough to read the long journal above, assuming you have a similar problem with me, then you are lucky.

Below I summarize the method of solving the problem of WebView and js Interaction:

1. Add a permission statement to the Android Shell source code:

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

You need to declare the permission to call and obtain authorization from the user, otherwise you cannot run the dial 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 ability in the shell source code to invoke the Web page js function

3. Rewrite the shouldoverrideurlloading(WebView view, String url) method. Two URLs that are compliant and non-compliant are inferred and run different operations. The Demo 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 run like window.js Interface name . js the name of the function ().

The demo sample code is as follows:

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

5, in the Android Shell source code with the corresponding JS Interface declaration, for example, my name is jsinterface, is written in the fourth step JS Interactive Interface name:

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

6, in the javascriptinterface class inside the declaration and JS the appropriate method . Here, I'm writing inAndroidInside the code that runs the call.

Like what:

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

7, the need to be called this JS inside the hypothesis of the need for dynamic transmission, to the JS function related to the value of the best use of < S:property >. Instead of using ${}.

Otherwise it may not be possible to get the value somehow (assuming you're testing on the simulator, when invalid MMI code appears .) Can also explain the success.

Because the simulator is not connected with the communication operator, so will report this small error, this time suggest you can change the real machine to test);

8, in Web page plus browser inference: Default Run Tel:, suppose it is IOS Browser. Continue to use the former Magnum <a href="tel:xxx" >, assuming that the Android Browser runs its own defined js function to change the URL of the click action Call.

<a href= "Tel:<s:property value= ' clientmobile '/>" >crm/html5_new/ Mycustomer/images/phone.png "></a>

$ (document). Ready (function () {$ ("a"). each (function () {var u = navigator.useragent;if (U.indexof (' IPhone ') >-1) {} else {if (attr). length>4&&$ ("href"). attr ("href"). IndexOf ("Tel:") ==0) {$ (this). attr ("href" , "Javascript:exitsys ('" +$ (This). attr ("href"). Replace ("Tel:", "") + "')");}});});

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