[HTML5]使用全螢幕顯示的API(HTML5 FullScreen API)

經常使用 Facebook 或 Flickr 看照片的朋友們,
可能會留意到這些網站服務都提供了高解析度的照片預覽模式,
同時這個預覽模式是使用「全螢幕」來展現的。
 
咦?什麼時候,網站程式碼可以直接執行全螢幕了呢?
 
什麼時候?就從有了 HTML5 以後,
我們的確可以用極少的 Code 來實現這個『全螢幕』顯示的效果了。
原來這個效果是屬於 HTML5 本身即包含的規格之一,
所以只要是支援這個標準的瀏覽器,
都可以透過呼叫這個 HTML5's FullScreen API 來執行。
 
原始碼如下:引用來源 Using HTML5's FullScreen API
 

<!DOCTYPE HTML> 
<html> 
<head> 
<script type="text/javascript"> 
//list of images for the slideshow 
var imageList = ["Image3.jpg", "Image4.jpg", "Image5.jpg"]; 
var count = 0; 
//invoke this when user wants to see a Full Screen Slideshow 
function enterFullScreen(){ 
	var elem = document.getElementById("slideshow"); 
	//show full screen 
	elem.webkitRequestFullScreen(); 
	setTimeout(changePicture, 3000); 
} 
function changePicture(){ 
	count++; 
	//cycle through the list of images 
	document.getElementById("image1").src = imageList[count % imageList.length]; 
	if (document.webkitIsFullScreen) 
		setTimeout(changePicture, 3000); 
	else 
		//if user exits the full screen mode
		document.getElementById("image1").src = imageList[0]; 
} 
</script> 
</head> 
<body> 
<div id="slideshow"> 
	<img id="image1" src="Image3.jpg"><img> 
</div> 
<br> 
<input type="button" value="Enter full screen mode" onclick=enterFullScreen()> 
</body> 
</html>

Readers comment