Android implements two ways of interacting H5 and native _android

Source: Internet
Author: User

Objective

As you know, in Android WebView, you often need to interact with H5 pages and native pages, such as clicking on the Share button on a Web page, calling a local sharing interface to share, and sharing a successful, local-called JavaScript code to show a successful message. Let's take a look at two ways to achieve this.

One, the way URL interception

Rewrite Shouldoverrideurl for URL blocking, this way through the H5 and native negotiated a good URL format to show H5 page want to native the operation, such as the call, play video, view a user's information and other operations, each operation corresponds to a URL format Like what:

"/media/image/123" represents H5 to invoke native view ID 123;
"/webapp/close/webview" indicates H5 needs to close the current page native;
"/webapp/ Patient_card/? patient_id=345 "means H5 to invoke native display user 345 details page

The parameters can be passed through the parameter of the URL and resolved by Uri.parse. Returns true to truncate the response to the URL request.

 protected webviewclient mwebclient = new Webviewclient () {@Override public boolean s Houldoverrideurlloading (webview view, String URL) {//Add Tel link response if (Url.startswith ("Tel:")) {Intent Intent = n 
   EW Intent (intent.action_dial, Uri.parse (URL)); 
   StartActivity (Intent);
  return true; 
   }//Add MP4 play the corresponding if (Url.endswith (". mp4")) {viewvideo (URL);
  return true; 
   //Add Picture link response if (Pattern.compile ("/media/image"). Matcher (URL). Find ()) {viewimage (URL);
  return true; 
   ///Close WebView if (Pattern.compile ("/webapp/close/webview"). Matcher (URL). Find ()) {onbackpressed ();
  return true; 
   //Add a response to a particular URL if (pattern.compile ("/webapp/patient_card/"). Matcher (URL). Find ()) {URI uri = uri.parse (URL);
   String Patientid = Uri.getqueryparameter ("patient_id");

   Viewpatientinfo (Patientid);
  return true;   
Return super.shouldoverrideurlloading (view, URL); 
};

Second, JavaScript injection mode

JavaScript injection is more straightforward than URL blocking, native the function injected into the H5 call Javascript,h5 through JavaScript to invoke the native function to complete the operation.

1, Get WebView webviewsettings settings, invoke setjavascriptenabled to open JavaScript calls.

WebSettings settings = Mwebview.getsettings ();
Settings.setjavascriptenabled (TRUE);

2. Add the @javascriptinterface annotation before the function that needs to be exposed to JavaScript, only the function that added the annotation can be invoked by JavaScript.

public class Webappinterface {
 @JavascriptInterface public
 boolean method1 (String param1, String param2) {
   Do something
 }

 @JavascriptInterface public
 boolean method2 (String param1, String param2) {
   //Do Something
 }
}

3, through the WebView Addjavascriptinterface method, the native method of the class is injected into the JavaScript. The first parameter of the function is the injected native object, the second parameter is the name of the object, and JavaScript accesses the object by changing its name

WebView WebView = (webview) Findviewbyid (R.id.webview);
Webview.addjavascriptinterface (New Webappinterface (), "InterfaceName");

4, this way, the H5 page can invoke the native function through the following JavaScript

<script type= "Text/javascript" > 
 function method1 (param1, param2) {  
  interfacename.method1 (param1, param2); 
 }
</script>

Native Invoke JavaScript

The native method of invoking JavaScript functions is simpler, through the Loadurl function:

No parameters call
Contentwebview.loadurl ("Javascript:javacalljs ()");

There are parameters called
mwebview.loadurl ("Javascript:test ('" + param+ ")"); Param is the parameter of the JS function test ()

Summarize

The above is the entire content of this article, I hope this article on the content of Android developers can bring some help, if you have questions you can message exchange.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.