webview_embed.html 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123
  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" src="../js/common.js"></script>
  10. <script type="text/javascript" charset="utf-8">
  11. var ws=null,embed=null;
  12. // 扩展API加载完毕,现在可以正常调用扩展API
  13. function plusReady(){
  14. ws=plus.webview.currentWebview();
  15. setTimeout(createEmbed, 500); //延迟创建子窗口避免影响窗口动画
  16. }
  17. // 判断扩展API是否准备,否则监听plusready事件
  18. if(window.plus){
  19. plusReady();
  20. }else{
  21. document.addEventListener('plusready', plusReady, false);
  22. }
  23. // 创建子Webview
  24. function createEmbed(url){
  25. var url=url||'http://m.weibo.cn/u/3196963860';
  26. var topoffset='44px';
  27. plus.nativeUI.showWaiting('',{style:'black',modal:false,background:'rgba(0,0,0,0)'});
  28. embed=plus.webview.create(url,'embed',{top:topoffset,bottom:'0px',position:'dock',dock:'bottom',bounce:'vertical'});
  29. ws.append(embed);
  30. embed.addEventListener('loaded',function(){
  31. plus.nativeUI.closeWaiting();
  32. },false);
  33. embed.addEventListener('loading',function(){
  34. plus.nativeUI.showWaiting('',{style:'black',modal:false,background:'rgba(0,0,0,0)'});
  35. },false);
  36. }
  37. // 打开网址
  38. function openUrl(){
  39. var url=document.getElementById('url');
  40. embed?embed.loadURL(url.value):createEmbed(url.value);
  41. url.blur();
  42. }
  43. // 页面加载后自动打开
  44. document.addEventListener('DOMContentLoaded', function(){
  45. if(embed){
  46. openUrl();
  47. }else{
  48. auto=true;
  49. }
  50. },false);
  51. // 页面跳转完成事件
  52. function onBrowserLoading(){
  53. document.getElementById('url').value=embed.getURL();
  54. }
  55. </script>
  56. <link rel="stylesheet" href="../css/common.css" type="text/css" charset="utf-8"/>
  57. <style type="text/css">
  58. header {
  59. width: 100%;
  60. height: 44px;
  61. position: fixed;
  62. top: 0;
  63. left: 0;
  64. font-size: 27px;
  65. text-align: center;
  66. line-height: 44px;
  67. background: #D74B28;
  68. /*background: -webkit-linear-gradient(top,rgba(215,75,40,1),rgba(215,75,40,0.8));*/
  69. z-index: 9999;
  70. /*border-bottom: 1px solid rgba(215,75,40,0.8);*/
  71. -ms-touch-action: none;
  72. }
  73. .nvbt {
  74. width:15%;
  75. height:100%;
  76. float:left;
  77. overflow:hidden;
  78. text-overflow:ellipsis;
  79. white-space:nowrap;
  80. color: #FFF;
  81. font-size: 16px;
  82. }
  83. .nvbt:active {
  84. background-color: rgba(170,170,170,0.1);
  85. }
  86. .nvtt {
  87. width: 70%;
  88. height: 100%;
  89. color: #cccccc;
  90. float: left;
  91. overflow:hidden;
  92. text-overflow:ellipsis;
  93. white-space:nowrap;
  94. }
  95. #url{
  96. width:98%;
  97. -webkit-user-select:auto;
  98. padding-left:0;
  99. padding-right:0;
  100. background: rgba(0,0,0,0);
  101. border: 0px;
  102. border-bottom:1px solid #ECB100;
  103. border-radius: 0;
  104. outline:none;
  105. }
  106. .iback {
  107. 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=);
  108. background-size: 50px 44px;
  109. }
  110. </style>
  111. </head>
  112. <body>
  113. <header id="header">
  114. <div class="nvbt iback" onclick="back(),plus.nativeUI.closeWaiting();"></div>
  115. <div class="nvtt">
  116. <form action="?" method="get" onsubmit="openUrl();return false;">
  117. <input id="url" type="url" value="http://m.weibo.cn/u/3196963860"/>
  118. </form>
  119. </div>
  120. <div class="nvbt" onclick="openUrl();">前往</div>
  121. </header>
  122. </body>
  123. </html>