<!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>
|
