123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156 |
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8"/>
- <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
- <meta name="HandheldFriendly" content="true"/>
- <meta name="MobileOptimized" content="320"/>
- <title>Hello H5+</title>
- <script type="text/javascript">
- // 空函数
- function shield(){
- return false;
- }
- //取消浏览器的所有事件,使得active的样式在手机上正常生效
- document.addEventListener('touchstart',shield,false);
- document.oncontextmenu=shield;
- // H5 plus事件处理
- var ws=null,wc=null,as='slide-in-right';
- var aw=false,ac=null;//加载文档内容子窗口
- function plusReady(){
- // 获取自身窗口
- ws=plus.webview.currentWebview();
- ws.addEventListener('hide',function(){
- nvtt.innerText='';
- wc.clear();
- wc.hide();
- },false);
- // Android处理返回键
- plus.key.addEventListener('backbutton',function(){
- back();
- },false);
- // iOS平台使用新动画
- if('iOS'==plus.os.name){
- as='pop-in';
- }
- // 检测是否需要自动显示
- aw&&ws.show(as);
- aw=false;
- // 创建加载内容窗口
- var topoffset='45px';
- if(plus.navigator.isImmersedStatusbar()){// 兼容immersed状态栏模式
- topoffset=(Math.round(plus.navigator.getStatusbarHeight())+45)+'px';
- }
- wc=plus.webview.create(null,'doccontent',{top:topoffset,bottom:'0px',bounce:'vertical',bounceBackground:'#FFFFFF'});
- // 内容更新后自动显示
- wc.addEventListener('loaded',function(){
- wc.show('fade-in');
- },false);
- wc.hide();
- ws.append(wc);
- // 检测是否需要自动加载内容
- ac&&wc.loadURL(ac);
- ac=null;
- }
- if(window.plus){
- plusReady();
- }else{
- document.addEventListener('plusready',plusReady,false);
- }
- // 处理返回事件
- function back(){
- if(ws){
- if(ws.preate){
- ws.hide('auto');
- }else{
- ws.close('auto');
- }
- }else if(history.length>1){
- history.back();
- }else{
- close();
- }
- }
- // 更新标题和内容
- function updateDoc(t,c){
- nvtt.innerText=t;
- if(ws){
- ws.show(as,null,function(){
- if(!wc){
- ac=c;
- }else{
- wc.loadURL(c);
- }
- });
- }else{
- aw=true;
- ac=c;
- }
- }
- </script>
- <style type="text/css">
- * {
- -webkit-user-select: none;
- -ms-touch-select: none;
- }
- html {
- width: 100%;
- height: 100%;
- }
- body {
- margin: 0;
- padding: 0;
- width: 100%;
- height: 100%;
- color:#666;
- background-color:#EAEAEA;
- font-family: Verdana, Arial, Helvetica , "Microsoft YaHei" , sans-serif;
- font-size:14px;
- word-break: break-all;
- -webkit-touch-callout:none;
- -webkit-tap-highlight-color:rgba(0,0,0,0);
- -webkit-text-size-adjust:none;
- }
- header {
- width: 100%;
- height: 44px;
- font-size: 17px;
- text-align: center;
- line-height: 44px;
- background: rgba(215,75,40,1);
- border-bottom: 1px solid rgba(215,75,40,0.8);
- -ms-touch-action: none;
- }
- .nvbt {
- width: 15%;
- height: 100%;
- float: left;
- }
- .nvbt:active {
- background-color: rgba(170,170,170,0.1);
- }
- #nvtt {
- width:70%;
- height:100%;
- color: #cccccc;
- float:left;
- overflow:hidden;
- text-overflow:ellipsis;
- white-space:nowrap;
- }
- .iback {
- background: no-repeat center center url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABYCAYAAAADWlKCAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAKwwAACsMBNCkkqwAAABZ0RVh0Q3JlYXRpb24gVGltZQAwOS8xMi8xM5w+I3MAAAAcdEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3JrcyBDUzVxteM2AAACcklEQVR4nO3a0XESURiG4TeO99iBWoGZ+RvADtKBpAPtwBLsANJBrEAs4MyYDmIHSQXkgk0mMLK7ILt8/+F778ici394OGfDsher1Qqn05tTD+A2M4hYBhHLIGIZRCyDiGUQsQwilkHEMohYBhHLIGIZRCyDiGUQsQwilkHEMohYBhHLIGIZRCyDiGUQsQwilkHEMohYb089wNCVUq6Ay+blfUQsTjhOZxc1P9tbSlkAX7b+/C0ifpxgnF5Ve2TtwAD4OvIoe1UlSAsGwPsRR9m76kA6MAD+jjTKQVUF0gMD4HaEUQ6umot6T4ybiJgNP83hVbFDasGACnZIT4yfEXE1wjj/Xeod0hPjDpgNPsyRSguyB8Y0Ih6Gn+g4pQSpFQMSgtSMAclAaseARCDngAFJQM4FAxKAnBMGiH8xLKVMgV89ln6MiPthpxkn6R0SEUvgusfSZSnlsnuZftI75LlSygyYdyx7ZH1s/Rl+ouFKAQIvx9ctMGlZlh4lDQhAcywtqRhF+hqyXfMmT1m/6buasL6mzMaY6dilAoENlLuWZRNgnhEl1ZH1ulLKO9bH16eOpdfqz2K9Lt0Oea75EjilfadAsp2SFgQ2UH53LJ2XUr4PPtARSntkbVfL7+rVgEBvlM/NHQDJUh9Z2zWf/puOZbPhJzm8qkDgBaXt/teHcSY5rOpAAJp/c/vclJSrShDYifKI+NPvVV3U/1VzU3LavFyo/25SPUi2qj2ysmYQsQwilkHEMohYBhHLIGIZRCyDiGUQsQwilkHEMohYBhHLIGIZRCyDiGUQsQwilkHEMohYBhHLIGIZRCyDiGUQsZ4Ak9fPFwUy/HsAAAAASUVORK5CYII=);
- background-size: 50px 44px;
- }
- </style>
- </head>
- <body onselectstart="return false;">
- <header id="header">
- <div class="nvbt iback" onclick="back()"></div>
- <div id="nvtt"></div>
- </header>
- <br/><br/><br/><br/>
- <p style="text-align:center;color:#666">正在加载中...</p>
- </body>
- <script type="text/javascript" src="../js/immersed.js" ></script>
- </html>
|