Chúng tôi luôn có thể xem toàn bộ trang web ở chế độ toàn màn hình. Để làm như vậy, bạn có thể nhấn phím F11 trong Windows, trong khi trong OS X, bạn có thể nhấn Shift + Command + F. Tuy nhiên, đôi khi chúng tôi, với tư cách là nhà phát triển web, muốn thêm trình kích hoạt trên trang web để thực hiện chức năng hơn là sử dụng các phím đó.

Ngoài việc cung cấp một số yếu tố mới, HTML5 cũng đã giới thiệu một bộ API mới bao gồm một bộ mà chúng ta sẽ thảo luận trong bài đăng này, được gọi là Fullscreen API. API này cho phép chúng tôi đặt trang web của mình hoặc chỉ một phần tử cụ thể trên trang web ở chế độ toàn màn hình (và ngược lại) bằng cách sử dụng chức năng gốc của trình duyệt.

Liên quan đến việc triển khai, API này sẽ hữu ích đặc biệt cho video, hình ảnh, trò chơi trực tuyến và các bản trình bày slide dựa trên HTML / CSS.

Hỗ trợ trình duyệt

Tại thời điểm viết bài, API này chỉ hoạt động cho Google Chrome, Safari và Firefox. Tương tự như CSS3, cú pháp có tiền tố vì nó vẫn đang trong giai đoạn thử nghiệm.

Webkit Firefox Description
webkitRequestFullScreen mozRequestFullScreen Phương thức gửi trang web hoặc phần tử được chỉ định toàn màn hình.
webkitCancelFullscreen mozCancelFullscreen Phương pháp thoát khỏi chế độ toàn màn hình.
mozFullScreenElement webkitFullScreenElement Phương pháp xem phần tử có ở chế độ toàn màn hình hay không.

Điều đáng chú ý là API toàn màn hình có thể thay đổi trong tương lai.

Ví dụ sử dụng

Một trong những cách tốt nhất để học một điều mới là bằng ví dụ. Trong bài đăng này, chúng tôi sẽ chạy một dự án đơn giản. Ý tưởng là chúng ta sẽ có một hình ảnh và một nút sẽ đưa hình ảnh ra toàn màn hình hoặc thay đổi nó trở lại chế độ xem bình thường chỉ bằng một cú nhấp chuột.

HTML

Hãy bắt đầu với đánh dấu HTML. Chúng ta có phần tử

để bao bọc hình ảnh và phần tử cho nút.

  <div  >
	<img src="https://www.driveria.net/blog/html5-fullscreen-api/img/arokanddedes.jpg">
	<span ></span>
</div>
 

CSS

Sau đó, chúng tôi đặt hình ảnh ở trung tâm của cửa sổ cũng như thêm một vài phong cách trang trí để làm cho nó trông đẹp hơn.

  .demo-wrapper {
	width: 38%;
	margin: 0 auto;
}
.html5-fullscreen-api {
	position: relative;
}
.html5-fullscreen-api img {
	max-width: 100%;
	border: 10px solid #fff;
	box-shadow: 0px 0px 50px #ccc;
}
.html5-fullscreen-api .fs-button {
	z-index: 100;
	display: inline-block;
	width: 32px;
	height: 32px;
	position: absolute;
	top: 10px;
	right: 10px;
	cursor: pointer;
}
 

phong cách hình ảnh

Tôi quyết định hiển thị biểu tượng trong phần tử bằng cách sử dụng: sau phần tử giả, để sau này chúng tôi có thể thay đổi biểu tượng dễ dàng thông qua CSS bằng cách sử dụng nội dung.

  .html5-fullscreen-api .fs-button:after {
	display: inline-block;
	width: 100%;
	height: 100%;
	font-size: 32px;
	font-family: 'ModernPictogramsNormal';
	color: rgba(255,255,255,.5);
	cursor: pointer;
	content: "v"; 
 }
.html5-fullscreen-api .fs-button:hover:after {
	color: rgb(255,255,255);
}
 

biểu tượng toàn màn hình

JavaScript

Chúng tôi sẽ sử dụng jQuery để làm cho mã gọn gàng hơn một chút.

Như chúng tôi đã đề cập, chúng tôi sẽ gửi hình ảnh toàn màn hình khi nhấp chuột. Chúng tôi bọc hàm dưới phương thức jQuery .on.

  $('.fs-button').on('click', function(){ 

}
 

Trước tiên, chúng tôi kiểm tra xem phần tử đã ở chế độ toàn màn hình chưa, nếu điều kiện này trả về, chúng tôi sẽ thực thi webkitCancelFullScreen để gửi nó về chế độ xem bình thường. Nếu không, chúng tôi sẽ chuyển nó sang toàn màn hình bằng phương thức webkitRequestFullScreen, giống như vậy.

  $('.fs-button').on('click', function(){
		var elem = document.getElementById('fullscreen');
		if(document.webkitFullscreenElement) {
			document.webkitCancelFullScreen();
		}
		else {
			elem.webkitRequestFullScreen();
		};
	});
 

Nhấp vào biểu tượng toàn màn hình và hình ảnh của chúng tôi sẽ chuyển sang chế độ toàn màn hình, như được hiển thị trong ảnh chụp màn hình sau.


chế độ toàn màn hình

CSS toàn màn hình

Webkit (cũng như Firefox) cũng cung cấp một tập hợp các lớp giả mới cho phép chúng ta thêm các quy tắc kiểu khi phần tử ở chế độ toàn màn hình. Giả sử chúng ta muốn thay đổi nền, chúng ta có thể viết các quy tắc kiểu theo cách này.

  #fullscreen:-webkit-full-screen {
	background-image: url('../img/ios-linen.jpg'); 
	width: 100%;
}
 

Bây giờ, bạn sẽ thấy kết cấu vải lanh iOS ở chế độ toàn màn hình.


kết cấu vải lanh ios

Trong bài viết này, chúng tôi đã khám phá Cách sử dụng API toàn màn hình HTML5 với một vài bước đơn giản. Trong trường hợp bạn có bất kỳ câu hỏi nào, vui lòng hỏi driveria.net trong phần bình luận bên dưới.