WebView and JavaScript interaction basics

Introduction to this section:

In the previous section we studied Android's WebView (webpage view), and I believe we have understood the basic usage of WebView;

What we want to learn in this section is to use: HTML -> JS ->Java to complete the communication between the HTML5 terminal and the Android phone Exchange visits! Okay, without further ado, is there any truth? Let us experience this subtle connection by writing code~

PS: For convenience, the HTML used in this section is in the form of files Put it in the assets directory, just pass loadUrl("file:///android_asset/~") can load the corresponding HTML~

---

1. Core steps explained:

First, we define a class to expose data, and JS calls Android through the exposed method (Public) of this class!

Then, we use the following code in the Activity of the page where the WebView is located:
webview.getSettings().setJavaScriptEnabled(true);
webview.addJavascriptInterface(object,"name");

Then call name.xxx in js or html to call the exposed method in the object:
For example: < input type=" button" value="Toast prompt" onclick="name.showToast('Hehe');"/>
In addition, setJavaScriptEnabled is only valid in systems before Android 4.4! ! ! In the next section we will explain Android 4.4 and later WebKit changes and what to pay attention to!

---

2. Usage examples:

1) HTML displays the dialog box of Toast and ordinary list through JS

Running renderings:

Code implementation:

First prepare our HTML file, create it and put it in the assets directory:

demo1.html:

    Js调用Android

Customize an Object object, and js calls Android

MyObject.java through the methods exposed by this class :

/**
 * Created by Jay on 2015/9/11 0011.
 */
public class MyObject {
    private Context context;
    public MyObject(Context context) {
        this.context = context;
    }

    //将显示Toast和对话框的方法暴露给JS脚本调用
    public void showToast(String name) {
        Toast.makeText(context, name, Toast.LENGTH_SHORT).show();
    }

    public void showDialog() {
        new AlertDialog.Builder(context)
                .setTitle("联系人列表").setIcon(R.mipmap.ic_lion_icon)
                .setItems(new String[]{"基神", "B神", "曹神", "街神", "翔神"}, null)
                .setPositiveButton("确定", null).create().show();
    }
}

Finally MainActivity.java, enable JavaScript support, and then expose the object through addJavascriptInterface~

public class MainActivity extends AppCompatActivity {
    private WebView wView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        wView = (WebView) findViewById(R.id.wView);
        wView.loadUrl("file:///android_asset/demo1.html");
        WebSettings webSettings = wView.getSettings();
        //①设置WebView允许调用js
        webSettings.setJavaScriptEnabled(true);
        webSettings.setDefaultTextEncodingName("UTF-8");
        //②将object对象暴露给Js,调用addjavascriptInterface
        wView.addJavascriptInterface(new MyObject(MainActivity.this), "myObj");
    }
}

---

2) HTML calls three through JS Different dialog boxes

Running renderings:

##Implementation code:

First put an html file in the assets directory:

demo2.html:

    <meta http-equiv = "Content-Type" content="text/html;charset=UTF-8"
    测试Js的三种不同对话框            function alertFun()
        {
            alert("Alert警告对话框!");
        }
        function confirmFun()
        {
            if(confirm("访问百度?"))
            {location.href = "http://www.baidu.com";}
            else alert("取消访问!");
        }
        function promptFun()
        {
            var word = prompt("Prompt对话框","请输入点什么...:");
            if(word)
            {
                alert("你输入了:"+word)
            }else{alert("呵呵,你什么都没写!");}
        }