doc.html 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8"/>
  5. <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
  6. <meta name="HandheldFriendly" content="true"/>
  7. <meta name="MobileOptimized" content="320"/>
  8. <title>Hello H5+</title>
  9. <script type="text/javascript">
  10. // 空函数
  11. function shield(){
  12. return false;
  13. }
  14. //取消浏览器的所有事件,使得active的样式在手机上正常生效
  15. document.addEventListener('touchstart',shield,false);
  16. document.oncontextmenu=shield;
  17. // H5 plus事件处理
  18. var ws=null,wc=null,as='slide-in-right';
  19. var aw=false,ac=null;//加载文档内容子窗口
  20. function plusReady(){
  21. // 获取自身窗口
  22. ws=plus.webview.currentWebview();
  23. ws.addEventListener('hide',function(){
  24. nvtt.innerText='';
  25. wc.clear();
  26. wc.hide();
  27. },false);
  28. // Android处理返回键
  29. plus.key.addEventListener('backbutton',function(){
  30. back();
  31. },false);
  32. // iOS平台使用新动画
  33. if('iOS'==plus.os.name){
  34. as='pop-in';
  35. }
  36. // 检测是否需要自动显示
  37. aw&&ws.show(as);
  38. aw=false;
  39. // 创建加载内容窗口
  40. var topoffset='45px';
  41. if(plus.navigator.isImmersedStatusbar()){// 兼容immersed状态栏模式
  42. topoffset=(Math.round(plus.navigator.getStatusbarHeight())+45)+'px';
  43. }
  44. wc=plus.webview.create(null,'doccontent',{top:topoffset,bottom:'0px',bounce:'vertical',bounceBackground:'#FFFFFF'});
  45. // 内容更新后自动显示
  46. wc.addEventListener('loaded',function(){
  47. wc.show('fade-in');
  48. },false);
  49. wc.hide();
  50. ws.append(wc);
  51. // 检测是否需要自动加载内容
  52. ac&&wc.loadURL(ac);
  53. ac=null;
  54. }
  55. if(window.plus){
  56. plusReady();
  57. }else{
  58. document.addEventListener('plusready',plusReady,false);
  59. }
  60. // 处理返回事件
  61. function back(){
  62. if(ws){
  63. if(ws.preate){
  64. ws.hide('auto');
  65. }else{
  66. ws.close('auto');
  67. }
  68. }else if(history.length>1){
  69. history.back();
  70. }else{
  71. close();
  72. }
  73. }
  74. // 更新标题和内容
  75. function updateDoc(t,c){
  76. nvtt.innerText=t;
  77. if(ws){
  78. ws.show(as,null,function(){
  79. if(!wc){
  80. ac=c;
  81. }else{
  82. wc.loadURL(c);
  83. }
  84. });
  85. }else{
  86. aw=true;
  87. ac=c;
  88. }
  89. }
  90. </script>
  91. <style type="text/css">
  92. * {
  93. -webkit-user-select: none;
  94. -ms-touch-select: none;
  95. }
  96. html {
  97. width: 100%;
  98. height: 100%;
  99. }
  100. body {
  101. margin: 0;
  102. padding: 0;
  103. width: 100%;
  104. height: 100%;
  105. color:#666;
  106. background-color:#EAEAEA;
  107. font-family: Verdana, Arial, Helvetica , "Microsoft YaHei" , sans-serif;
  108. font-size:14px;
  109. word-break: break-all;
  110. -webkit-touch-callout:none;
  111. -webkit-tap-highlight-color:rgba(0,0,0,0);
  112. -webkit-text-size-adjust:none;
  113. }
  114. header {
  115. width: 100%;
  116. height: 44px;
  117. font-size: 17px;
  118. text-align: center;
  119. line-height: 44px;
  120. background: rgba(215,75,40,1);
  121. border-bottom: 1px solid rgba(215,75,40,0.8);
  122. -ms-touch-action: none;
  123. }
  124. .nvbt {
  125. width: 15%;
  126. height: 100%;
  127. float: left;
  128. }
  129. .nvbt:active {
  130. background-color: rgba(170,170,170,0.1);
  131. }
  132. #nvtt {
  133. width:70%;
  134. height:100%;
  135. color: #cccccc;
  136. float:left;
  137. overflow:hidden;
  138. text-overflow:ellipsis;
  139. white-space:nowrap;
  140. }
  141. .iback {
  142. 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=);
  143. background-size: 50px 44px;
  144. }
  145. </style>
  146. </head>
  147. <body onselectstart="return false;">
  148. <header id="header">
  149. <div class="nvbt iback" onclick="back()"></div>
  150. <div id="nvtt"></div>
  151. </header>
  152. <br/><br/><br/><br/>
  153. <p style="text-align:center;color:#666">正在加载中...</p>
  154. </body>
  155. <script type="text/javascript" src="../js/immersed.js" ></script>
  156. </html>