WebView和JavaScrip交互基礎(chǔ)
本節(jié)引言:
在上一節(jié)中我們對(duì)Android的WebView(網(wǎng)頁(yè)視圖)進(jìn)行了學(xué)習(xí),相信已經(jīng)了解了WebView的基本用法;
而本節(jié)我們要學(xué)習(xí)的就是通過(guò):HTML -> JS ->Java來(lái)完成HTML5端與Android手機(jī)間的 互訪!好的,話不多說(shuō),有嗎有真相,讓我們通過(guò)編寫代碼來(lái)體驗(yàn)這種微妙的聯(lián)系吧~
PS:為了方便,本節(jié)用到的HTML都是以文件的形式放到assets目錄下,只需通過(guò) loadUrl("file:///android_asset/~")即可加載對(duì)應(yīng)的HTML~
1.核心步驟講解:
首先,我們定義一個(gè)類,用于將數(shù)據(jù)暴露出來(lái),JS通過(guò)該類暴露的方法(Public)來(lái)調(diào)用Android!
接著,我們?cè)赪ebView所在頁(yè)面Activity,使用下述代碼:
webview.getSettings().setJavaScriptEnabled(true);
webview.addJavascriptInterface(object,"name");
然后js或者h(yuǎn)tml中調(diào)用name.xxx調(diào)用對(duì)象里的暴露的方法:
比如: < input type="button" value="Toast提示" onclick="name.showToast('呵呵');"/>
另外,setJavaScriptEnabled是在Android 4.4以前的系統(tǒng)才有效?。?!下一節(jié)我們會(huì)來(lái)講解Android 4.4后
WebKit的變化以及要注意的地方!
2.使用示例講解:
1)HTML通過(guò)JS顯示Toast與普通列表的對(duì)話框
運(yùn)行效果圖:
代碼實(shí)現(xiàn):
先準(zhǔn)備我們的HTML文件,創(chuàng)建好后放到assets目錄下:
demo1.html:
Js調(diào)用Android
自定義一個(gè)Object對(duì)象,js通過(guò)該類暴露的方法來(lái)調(diào)用Android
MyObject.java:
/** * Created by Jay on 2015/9/11 0011. */ public class MyObject { private Context context; public MyObject(Context context) { this.context = context; } //將顯示Toast和對(duì)話框的方法暴露給JS腳本調(diào)用 public void showToast(String name) { Toast.makeText(context, name, Toast.LENGTH_SHORT).show(); } public void showDialog() { new AlertDialog.Builder(context) .setTitle("聯(lián)系人列表").setIcon(R.mipmap.ic_lion_icon) .setItems(new String[]{"基神", "B神", "曹神", "街神", "翔神"}, null) .setPositiveButton("確定", null).create().show(); } }
最后是MainActivity.java,啟用JavaScript支持,然后通過(guò)addJavascriptInterface暴露對(duì)象~
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(); //①設(shè)置WebView允許調(diào)用js webSettings.setJavaScriptEnabled(true); webSettings.setDefaultTextEncodingName("UTF-8"); //②將object對(duì)象暴露給Js,調(diào)用addjavascriptInterface wView.addJavascriptInterface(new MyObject(MainActivity.this), "myObj"); } }
2)HTML通過(guò)JS調(diào)用三種不同的對(duì)話框
運(yùn)行效果圖:
實(shí)現(xiàn)代碼:
先往assets目錄下塞一個(gè)html文件:demo2.html:
<meta http-equiv = "Content-Type" content="text/html;charset=UTF-8" 測(cè)試Js的三種不同對(duì)話框 function alertFun() { alert("Alert警告對(duì)話框!"); } function confirmFun() { if(confirm("訪問(wèn)百度?")) {location.href = "http://www.baidu.com";} else alert("取消訪問(wèn)!"); } function promptFun() { var word = prompt("Prompt對(duì)話框","請(qǐng)輸入點(diǎn)什么...:"); if(word) { alert("你輸入了:"+word) }else{alert("呵呵,你什么都沒(méi)寫!");} }