HTML5 新增加的API

HTML 5推出至今已經有一段時間,但其中還有許多功能未被大家使用,上次已經為大家介紹了 HTML5 Javascript File API 介紹,這次將再為大家介紹其他功能。

崁入PDF

// HTML code
<object data="piechart.pdf" type="application/pdf"> 
    <embed src="piechart.pdf" type='application/pdf'>
</object>

// CSS
object, embed{
    display:block;
    width:90%;
    margin:1em auto;
    height: 600px;
}

頁面目前狀態API

這個API可以讓使用者知道:目前畫面是處於Focus或被縮小、隱藏的狀態。通常會在切換頁簽tab或放大、縮小畫面時作用。主要用途:

  • 對於需定期更新網頁內容的部分,當視窗不可見時,就可以停止更新。
  • 可以根據視窗狀態來停止、撥放影音
  • 可以更精確的計算使用者停留在網頁的時間

使用方式:

  • document.hidden:表示目前頁面是否可被看見(Focus),回傳值為Boolean:true、false
  • document.visibilityState:
    • visible:目前正在作用中
    • hidden:處於最小化或非作用中視窗
    • prerender:
  • isibilitychange Event:事件監控

[php]

// 设置隐藏属性和可见改变事件的名称,属性需要加浏览器前缀 // since some browsers only offer vendor-prefixed support var hidden, state, visibilityChange;
if(typeof document.hidden !== "undefined") {
hidden = "hidden";
visibilityChange = "visibilitychange";
state = "visibilityState";
}
else if(typeof document.mozHidden !== "undefined") {
hidden = "mozHidden";
visibilityChange = "mozvisibilitychange";
state = "mozVisibilityState";
}
else if(typeof document.msHidden !== "undefined") {
hidden = "msHidden";
visibilityChange = "msvisibilitychange";
state = "msVisibilityState";
}
else if(typeof document.webkitHidden !== "undefined") {
hidden = "webkitHidden";
visibilityChange = "webkitvisibilitychange";
state = "webkitVisibilityState";
}

// 添加一个标题改变的监听器
document.addEventListener(visibilityChange, function(e) {
// 开始或停止状态处理
}, false);

[/php]

全螢幕 API

全螢幕API使用上非常簡單,僅有兩種模式:

啟動全螢幕模式

[php]
// 找到适合浏览器的全屏方法
function launchFullScreen(element) {
if(element.requestFullScreen) element.requestFullScreen();
else if(element.mozRequestFullScreen) element.mozRequestFullScreen();
else if(element.webkitRequestFullScreen) element.webkitRequestFullScreen();
}
// 啟動全螢幕
launchFullScreen(document.documentElement); // the whole page
launchFullScreen(document.getElementById("videoElement")); // any individual element
[/php]

退出全螢幕

[php]
function exitFullscreen() {
if(document.exitFullscreen) document.exitFullscreen();
else if(document.mozCancelFullScreen) document.mozCancelFullScreen();
else if(document.webkitExitFullscreen) document.webkitExitFullscreen();
}
exitFullscreen();
[/php]