zoukankan      html  css  js  c++  java
  • 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
  • 相关阅读:
    AESUtil_1
    ELK配置
    Centos7上安装docker
    Excel大批量数据导出
    Redis5.0.6安装完整步骤
    idea远程打断点
    [HNOI2016] 序列
    [TJOI2017] 异或和
    洛谷 P4933 大师
    洛谷 P1950 长方形_NOI导刊2009提高(2)
  • 原文地址:https://www.cnblogs.com/qikeyishu/p/8298873.html
Copyright © 2011-2022 走看看