A map app that uses WebView controls in Android to invoke each other with JavaScript methods

Source: Internet
Author: User

In Android through the WebView control, you can implement the page to be loaded with the Android method call each other, we want to implement the Addjavascriptinterface method in WebView, so that HTML can call the Android method, I personally feel a bit like dwr here.

To make it easy for everyone to understand, I wrote a simple demo with the following steps:

First step: Create a new Android project named Webviewdemo (here I have an HTML page defined in assets).

The second step: Modify the Main.xml layout file, add a WebView control and a button control, the code is as follows:

<?xml version= "1.0" encoding= "Utf-8"?
<linearlayout xmlns:android= "http://schemas.android.com/apk /res/android "
    android:orientation=" vertical "
    android:layout_width=" Fill_parent "
    android:layout_height=" fill_parent "
   ;
< TEXTVIEW&NBSP
     android:layout_width= "fill_parent"
     android:layout_height= "Wrap_content"
     android:text= "Welcome to Mr Wei ' s Blog."
    />
<webview
  android:id= "@+id/webview"
  Android:layout_ Width= "Fill_parent"
     android:layout_height= "wrap_content"
/>
<button
  android:id= "@+id/button"
  android:layout_width= "fill_parent"
  android:layout_height= " Wrap_content "
  android:text=" Change the WebView content "
/>
</linearlayout>

The third step: Create a new demo.html file in the assets directory, the code is as follows (I do not know why the more MCE: These things,<script></script> this is right):

<mce:script language= "JavaScript" ><!--

function Fillcontent () {
document.getElementById ("Content"). InnerHTML =
"This Content was showed by Android invoke Javascript function.";
}

--></mce:script>
<body>
<p><a onclick= "Window.demo.startMap ()" href= "" >start googlemap</a></p>
<p id= "Content" ></p>
<p>a Demo----Android and Javascript invoke each other.</p>
<p>Author:Frankiewei</p>
</body>

Fourth step: Modify the main core program Webviewdemo.java, the code is as follows:

Package Com.tutor.webwiewdemo;

Import android.app.Activity;
Import Android.content.ComponentName;
Import android.content.Intent;
Import Android.os.Bundle;
Import Android.view.View;
Import android.webkit.WebSettings;
Import Android.webkit.WebView;
Import Android.widget.Button;

public class Webviewdemo extends Activity {
Private WebView Mwebview;
Private Button Mbutton;
public void OnCreate (Bundle savedinstancestate) {
Super.oncreate (savedinstancestate);
Setcontentview (R.layout.main);
Setupviews ();
}
Initialization
private void Setupviews () {
Mwebview = (WebView) Findviewbyid (R.id.webview);
WebSettings mwebsettings = Mwebview.getsettings ();
Add this sentence to use the JavaScript method
Mwebsettings.setjavascriptenabled (TRUE);
Add an interface method to make the HTML page call
Mwebview.addjavascriptinterface (New Object () {
Here I define a way to open the map app
public void Startmap () {
Intent mintent = new Intent ();
ComponentName component = new ComponentName (
"Com.google.android.apps.maps",
"Com.google.android.maps.MapsActivity");
Mintent.setcomponent (component);
StartActivity (mintent);
}
}, "demo");
Load page
Mwebview.loadurl ("file:///android_asset/demo.html");
Mbutton = (Button) Findviewbyid (R.id.button);
Add an event response to the button, execute the JavaScript fillcontent () method
Mbutton.setonclicklistener (New Button.onclicklistener () {
public void OnClick (View v) {
Mwebview.loadurl ("Javascript:fillcontent ()");
}
});
}
}

Fifth step: Run the above project to see the effect.

The HTML content changes when the button is clicked on the first interface

Click the HTML Startgooglemap to launch the map app

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.