<!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" charset="utf-8">
var ws = null,
embed = null;
// 擴展API加載完畢,現在可以正常調用擴展API
function plusReady() {
ws = plus.webview.currentWebview();
ws.addEventListener('show', createEmbed, false);
}
// 判斷擴展API是否準備,否則監聽"plusready"事件
if (window.plus) {
plusReady();
} else {
document.addEventListener("plusready", plusReady, false);
}
// 創建子Webview
function createEmbed() {
var topoffset = '45px';
if (plus.navigator.isImmersedStatusbar()) { // 兼容immersed狀態欄模式
topoffset = (Math.round(plus.navigator.getStatusbarHeight()) + 45) + 'px';
}
plus.nativeUI.showWaiting('', {
style: 'black',
modal: false,
background: 'rgba(0,0,0,0)'
});
embed = plus.webview.create('http://m.weibo.cn/u/3196963860', 'embed', {
top: topoffset,
bottom: '0px',
position: 'dock',
dock: 'bottom',
bounce: 'vertical'
});
ws.append(embed);
embed.addEventListener('loaded', function () {
plus.nativeUI.closeWaiting();
}, false);
embed.addEventListener('loading', function () {
plus.nativeUI.showWaiting('', {
style: 'black',
modal: false,
background: 'rgba(0,0,0,0)'
});
}, false);
}
// 打開網址
function openUrl() {
var url = document.getElementById("url");
embed.loadURL(url.value);
url.blur();
}
// 頁面加載後自動打開
document.addEventListener("DOMContentLoaded", function () {
if (embed) {
openUrl();
} else {
auto = true;
}
}, false);
// 頁面跳轉完成事件
function onBrowserLoading() {
document.getElementById("url").value = embed.getURL();
}
</script>
</head>
<body>
<header id="header">
<div class="nvbt iback" onclick="back(),plus.nativeUI.closeWaiting();"></div>
<div class="nvtt">
<form action="?" method="get" onsubmit="openUrl();return false;">
<input id="url" type="url" value="http://m.weibo.cn/u/3196963860" />
</form>
</div>
<div class="nvbt" onclick="openUrl();">Go</div>
</header>
</body>
</html>
html5+ 窗口嵌套
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.