zoukankan      html  css  js  c++  java
  • webview

    初次使用webview,有很多地方不懂的,在此做下记录,留待以后学习!

      以前没有接触过APP开发,对webview一直懵懵懂懂,也不敢使用。这次逼不得已必须要去使用就认真的学习了下,发现也并不是很难理解。

      在Html5plus的官方文档中关于webview的方法并不多,共有如下几个

      all    获取所有webview窗口

      close    关闭webview窗口

      create  创建新的webview窗口

      currentWebview  获取当前窗口的webviewObject对象(这个对象很重要!!)

      getWebviewById  查找指定表示的webviewObject窗口

      hide    隐藏webview窗口

      open     创建并打开webview窗口

      show      显示webview窗口

    关于方法的介绍在此不做赘述,文档中写的比较清楚,主要通过本人的两个小测试程序来讲解,代码如下

    此为index.html 是应用进入的第一个页面

    复制代码
     1 <!DOCTYPE html>
     2 <html>
     3     <head>
     4     <meta charset="utf-8">
     5     <title>Webview Example</title>
     6     <script src='js/jQuery.js'></script>
     7     <script type="text/javascript">
     8     // H5 plus事件处理
     9 document.addEventListener("plusready",function (){
    10     $('#create').click(function (){
    11         setTimeout(function (){
    12             alert('开始创建');
    13             var newWsObj = plus.webview.create('test.html','test',{},{myVar:'我的值'});
    14             newWsObj.show();                
    15         }, 1000);        
    16     });
    17 
    18     $('#show').click(function (){
    19         // 显示test窗口
    20         alert('现在显示test窗口,当index窗口第二次出现时test窗口是已经创建了并隐藏起来的');
    21         // 显示并不是刷新 test窗口上的plusready事件中的代码是不会执行的
    22         plus.webview.show('test');
    23     })
    24 });
    25 
    26     </script>
    27     </head>
    28     <body>
    29         <button id='create'>创建一个新的webview并显示</button>
    30         <button id='show'>显示test</button>
    31     </body>
    32 </html>
    复制代码

    此为test.html

    复制代码
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
            <script type="text/javascript" src="js/jQuery.js" ></script>
        <script type="text/javascript">
        // H5 plus事件处理
        document.addEventListener("plusready",function (){
            // 获得应用首页的窗口对象
            var ws = plus.webview.getLaunchWebview();
            alert('应用首页webview:'+ws.getURL());
            // 获得当前创建对象
            var cur = plus.webview.currentWebview();
            alert('当前窗口对象:'+cur.getURL());
            alert('当前窗口对象的值:'+cur.myVar);
            // 输出当前所有的窗口对象
            var wsObjArr = plus.webview.all();
            for (var i in wsObjArr) {
                alert(i+':'+wsObjArr[i].getURL());
            }
            // 隐藏当前webview对象
            alert('1秒后隐藏该webview');
            setTimeout(function(){
                plus.webview.hide(cur);
            },1000);
            
            
        });
        </script>
        </head>
        <body>
            我是新的webview
        </body>
    </html>
    复制代码

    当进入应用时,如果点击“显示test”是不会有效果的,因为我们还没有创建test窗口,我们需要利用create()方法创建并用show()方法显示出来。open()方法类似于同时执行create()和show()。我们在创建test窗口时传递了一个额外的参数"myVar",通过这种方式以后可以很容易的在窗口之间传递参数而不需要通过get方式来传递。

    创建并显示test窗口后会依次alert出首页的窗口url(感觉首页的窗口与通过plus.webview.getWebviewById( plus.runtime.appid )获得的应用入口窗口应该是指的同一个窗口,至少我测试是一样的),当前窗口对象(即test窗口),以及通过在index窗口通过create传递过来的myVar,然后就是所有窗口的输出,第一个窗口是indx窗口,然后再是test窗口。最后调用hide()方法隐藏test窗口,当test窗口被隐藏后,在其下面的index窗口就显现出来的。新建并显示一个窗口类似于在一张纸上盖上另外一张纸,会遮住一开始的那张纸,我们只能看到新的那张放在上面的纸。而当我们把上面的值拿开(隐藏)后,原来的那张纸就又出现了。当我们第二次来到index窗口时再点击“显示test”就会再次显示出test窗口,这就相当于我们又把第二张纸盖在了第一张纸上面,第一张纸又被隐藏了。但是注意,此时test窗口中的代码并不会再执行一次,因为在我们创建并显示test窗口时,这些代码已经执行过了,我们隐藏和显示test窗口并不是关闭它,只是暂时把它“拿开”了!还有一点很重要的是:一个静态页可以创建多个窗口!个人认为静态页与窗口的关系是一对多的关系。

  • 相关阅读:
    🔺 Garbage Remembering Exam UVA
    Cows and Cars UVA
    Probability|Given UVA
    Crossing Rivers HDU
    均匀分布和高斯分布
    Race to 1 UVA
    XMPPElementReceipt wait return,
    someone like you,
    第三方统计,
    截获的感觉,
  • 原文地址:https://www.cnblogs.com/wymbk/p/5642970.html
Copyright © 2011-2022 走看看