WebView的使用--Hybrid App

App页面是运行在WebView中的，一个App页面对应一个WebView，本例实现两个WebView之间的跳转。

实现过程（用到了MUI框架）：

1、页面标识+跳转按钮（index.html、main.html）

2、分别对两页面的按钮添加监听事件

3、在index.html页面中创建id为main的WebView,添加main.html页面的路径

4、在main.html页面中获取当前的WebView,将其隐藏

代码如下：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
 6     <title></title>
 7 </head>
 8 <body>
 9     这是main.html页面
10 <button type="button" id="gobackBtn">点击回到index.html页面</button>
11 <script type="text/javascript" src="js/mui.min.js"></script>
12 <script type="text/javascript">
13     document.getElementById("gobackBtn").addEventListener('click',function(){
14         var currentWV=plus.webview.currentWebview();//获取当前webview
15         //var currentWV=plus.getWebviewById("main"); //通过webview的id来获取
16         currentWV.hide();
17     })
18 </script>
19 </body>
20 </hmain

main.html

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
 6     <title></title>
 7 </head>
 8 <body>
 9     这是index.html页面
10     <button type="button" id="btn">点击跳转至main.html页面</button>
11     <script type="text/javascript" src="js/mui.js"></script>
12     <script language="JavaScript">
13 //使用html5+实现页面跳转
14 /*
15         document.getElementById('btn').addEventListener('click',function(){
16             //先判断是否已经创建了id为main的webview
17             //需要获取到main的webview
18             var mainwv=plus.webview.getWebviewById('main');
19             if(!mainwv){//mianwv是null,mainwv是false,!mainwv是true成立。
20                 var main=plus.webview.create("main.html","main");//创建webview
21             }
22             mainwv.show();
23         })
24 */        
25 //使用mui来实现
26 document.getElementById('btn').addEventListener('click',function(){
27 mui.openWindow('main.html','main');//相当于下面的代码
28 })
29 /*
30              var mainwv=plus.webview.getWebviewById('main');
31             if(!mainwv){//mianwv是null的话mainwv是false,!mainwv是true成立。
32                 var main=plus.webview.create("main.html","main");//创建webview
33             }
34             mainwv.show();
35 */
36     </script>
37 </body>
38 </index

index.html