• 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
  • 相关阅读:
    DIV+CSS对SEO的帮助
    几种CSS及网站开发常犯的错误
    DIV CSS让搜索引擎蜘蛛不再累
    DIV CSS布局概述及初步入门
    闭合浮动元素(clearingfloat)的简单方法
    Vue学习(十三)模版引擎算是预处理器吗?
    base64学习(二)base64应用于图片
    base64学习(一)Base64的编码转换方式
    HTTP学习(四)短连接和长连接
    favicon.ico学习(三)实战
  • 原文地址:https://www.cnblogs.com/qikeyishu/p/8298873.html
Copyright © 2020-2023  润新知