GALAXY TECH
Chuyên gia Công nghệ
Thứ tư, 11/03/2020 | 00:00 GMT+7

Sử dụng API toàn màn hình

Trong bài viết này, ta sẽ đề cập đến API toàn màn hình với số lượng lớn các đoạn mã và các bản trình diễn tương tác. Đây là một API cực kỳ dễ làm việc!

API toàn màn hình đã được giới thiệu vào năm 2013 và cung cấp một cách riêng để các trình duyệt vào / thoát chế độ toàn màn hình. Thông số kỹ thuật này mang đến một loạt các API JavaScript và bộ chọn CSS mà ta có thể sử dụng để tinh chỉnh trải nghiệm user phong phú này.

Khái niệm cơ bản về API toàn màn hình

Thật dễ dàng để kích hoạt chế độ toàn màn hình trên web! Hiện tại, một số trình duyệt vẫn yêu cầu đặt tiền tố cho phương thức requestFullscreen .

Để kiểm tra phương thức API toàn màn hình nào khả dụng, bạn có thể tạo một hàm trợ giúp tương tự như sau:

function activateFullscreen(element) {
  if(element.requestFullscreen) {
    element.requestFullscreen();        // W3C spec
  }
  else if (element.mozRequestFullScreen) {
    element.mozRequestFullScreen();     // Firefox
  }
  else if (element.webkitRequestFullscreen) {
    element.webkitRequestFullscreen();  // Safari
  }
  else if(element.msRequestFullscreen) {
    element.msRequestFullscreen();      // IE/Edge
  }
};

Từ "yêu cầu" trong requestFullscreen là do các trình duyệt không có quyền (theo mặc định) để kích hoạt chế độ toàn màn hình.

Thoát chế độ toàn màn hình khá dễ dàng, nhưng nó cũng yêu cầu trình duyệt phát hiện một chút:

function deactivateFullscreen() {
  if(document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
  } else if (document.webkitExitFullscreen) {
    document.webkitExitFullscreen();
  }
};

Sử dụng chức năng trên, để kích hoạt chế độ toàn màn hình, chỉ cần chuyển tài liệu HTMLElement!

<button
  onclick="activateFullscreen(document.documentElement);"
>
  Go fullscreen!
</button>

<button
  onclick="deactivateFullscreen();"
>
  Leave fullscreen
</button>

Xem Pen alligatorio-fullscreen-api-1 của wle8300 ( @ wle8300 ) trên CodePen .

Sử dụng API toàn màn hình trên các HTMLElements độc đáo

Như bạn có thể đoán, các phần mềm HTML khác cũng có thể chuyển sang chế độ toàn màn hình, không chỉ là tài liệu !

Trong bản trình diễn bên dưới, hãy thử nhấp vào các node để đặt <h1> , <img> và <video> chuyển sang chế độ toàn màn hình:

<button
  onclick="activateFullscreen(document.getElementById('my-image'));"
>
  Fullscreen #my-text!
</button>
<button
  onclick="activateFullscreen(document.getElementById('my-image'))"
>
  Fullscreen #my-image
</button>
<button
  onclick="activateFullscreen(document.getElementById('my-video'))"
>
  Fullscreen #my-video
</button>

<h1 id="my-text">Hello world</h1>
<img id="my-image" src="alligatorio-logo.svg" width="200"/>
<video id="my-video" controls src="big-buck-bunny.mp4" />

Xem Pen alligatorio-fullscreen-api-2 của wle8300 ( @ wle8300 ) trên CodePen .

Thuộc tính & Sự kiện

Có các thuộc tính bổ sung mà Fullscreen API mang lại:

  • document.fullScreenEnabled : trả về boolean biểu thị liệu trang web có quyền vào chế độ toàn màn hình hay không
  • document.fullScreenElement : trả về nút HTMLElement (chỉ khi kích hoạt chế độ toàn màn hình)

Bạn cũng cần phát hiện trình duyệt:

const fullscreenEnabled = document.fullscreenEnabled
  || document.mozFullScreenEnable
  || document.webkitFullscreenEnabled;
const fullscreenElement = document.fullscreenElement
  || document.mozFullScreenElemen
  || document.webkitFullscreenElement;

Ngoài ra còn có một sự kiện gọi là thay đổi toàn màn hình khi user vào / thoát chế độ toàn màn hình mà bạn có thể nghe:

const fullscreenElement = document.fullscreenElement
  || document.mozFullScreenElement
  || document.webkitFullscreenElement;

document.addEventListener('fullscreenchange', (event) => {
  if (fullscreenElement) {
    console.log('Entered fullscreen:', document.fullscreenElement);
  } else {
    console.log('Exited fullscreen.');
  }
});

Tạo kiểu cho các phần tử toàn màn hình

Ngoài API JavaScript có sẵn, bạn cũng có thể sử dụng một số lớp giả CSS:

/* Targets the
  HTML element that's
  in fullscreen mode */
:fullscreen,
:-webkit-full-screen,
:-moz-full-screen,
:-ms-fullscreen {
  /* ... */
}


/* Styling the
  backdrop */
::backdrop {
  /* ... */
}

Đây là một ví dụ trong đó ta thêm luật màu nền và độ mờ bắt mắt vào phông nền:

::backdrop {
  opacity: 0.8;
  background: #DFA612;
}

Xem Pen alligatorio-fullscreen-api-3 của wle8300 ( @ wle8300 ) trên CodePen .

Hãy thử nhấp vào nút! Bạn có thể đọc thêm về : toàn màn hình và : phông nền trên Mạng nhà phát triển Mozilla.

Đặc điểm kỹ thuật W3C xen kẽ giữa “toàn màn hình” và “toàn màn hình”, vì vậy bạn sẽ thấy sự khác biệt về thông số kỹ thuật cũ hơn, tiền tố trình duyệt, v.v. Các trình duyệt trong tương lai sẽ gắn bó với “toàn màn hình”

Tôi có thể sử dụng toàn màn hình không? Dữ liệu về hỗ trợ cho tính năng toàn màn hình trên các trình duyệt chính từ caniuse.com.

Tags:

Các tin liên quan