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
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