Cách thay đổi trình duyệt sang chế độ toàn màn hình bằng JavaScript – cửa sổ mở toàn màn hình javascript

Bạn đang xem : mở cửa sổ javascript toàn màn hình

Cách thực hiện – Toàn màn hình

Tìm hiểu cách tạo cửa sổ toàn màn hình bằng JavaScript.

Cửa sổ toàn màn hình

Cách sử dụng JavaScript để xem một phần tử ở chế độ toàn màn hình.

Nhấp vào nút để mở video ở chế độ toàn màn hình:

Trình duyệt của bạn không hỗ trợ thẻ video.

Hãy tự mình thử »

Video toàn màn hình

Để mở một phần tử ở chế độ toàn màn hình, chúng tôi sử dụng element.requestFullscreen ()
phương pháp:

Ví dụ

& lt; script & gt;
/ * Nhận phần tử bạn muốn hiển thị ở chế độ toàn màn hình (a
video trong ví dụ này): * /
var elem = document.getElementById (“myvideo”);

/ * Khi hàm openFullscreen () được thực thi, hãy mở video trong
toàn màn hình.
Lưu ý rằng chúng tôi phải bao gồm các tiền tố cho các trình duyệt khác nhau, như
họ chưa hỗ trợ phương thức requestFullscreen * /
function openFullscreen () {
if (elem.requestFullscreen) {
elem.requestFullscreen ();
} khác
if (elem.webkitRequestFullscreen) {/ * Safari * /
elem.webkitRequestFullscreen ();
} else if (elem.msRequestFullscreen)
{/ * IE11 * /
elem.msRequestFullscreen ();
}
}
& lt; / script & gt;

Hãy tự mình thử »

Tài liệu toàn màn hình

Để mở toàn bộ trang ở chế độ toàn màn hình, hãy sử dụng document.documentElement thay vì document.getElementById ("phần tử") .
Trong ví dụ này, chúng tôi cũng sử dụng hàm đóng để đóng toàn màn hình:

Ví dụ

& lt; script & gt;
/ * Lấy documentElement (& lt; html & gt;) để hiển thị trang ở chế độ toàn màn hình * /
var elem = document.documentElement;

Xem Thêm  Hướng dẫn CSS nội tuyến - Cách tạo kiểu cho thẻ HTML trực tiếp - kiểu phông chữ css inline

/ * Xem ở chế độ toàn màn hình * /
hàm openFullscreen () {
if (elem.requestFullscreen) {
elem.requestFullscreen ();
} else if (elem.webkitRequestFullscreen)
{/ * Safari * /
elem.webkitRequestFullscreen ();
} else if (elem.msRequestFullscreen)
{/ * IE11 * /
elem.msRequestFullscreen ();
}
}

/ *
Đóng toàn màn hình * /
hàm closeFullscreen () {
if (document.exitFullscreen) {
document.exitFullscreen ();
} else if (document.webkitExitFullscreen)
{/ * Safari * /
document.webkitExitFullscreen ();
} else if (document.msExitFullscreen) {/ * IE11 * /
document.msExitFullscreen ();
}
}
& lt; / script & gt;

Bạn cũng có thể sử dụng CSS để tạo kiểu cho trang khi trang ở chế độ toàn màn hình:

Ví dụ

/ * Safari * /
: -webkit-toàn màn hình {
background-color: yellow;
}

/ * IE11 * /
: -ms-fullscreen {
background-color: yellow;
}

/ * Cú pháp chuẩn * /
: fullscreen {
background-color: vàng;
}

Hãy tự mình thử »

Các trang liên quan

Tham chiếu DOM HTML: Phương thức requestFullscreen () .

Tham chiếu DOM HTML: Phương thức exitFullscreen () .

Tham chiếu DOM HTML: Thuộc tính documentElement .


Xem thêm những thông tin liên quan đến chủ đề cửa sổ mở toàn màn hình javascript

Build a Touch Slider with HTML, CSS & JavaScript

  • Tác giả: Traversy Media
  • Ngày đăng: 2021-02-03
  • Đánh giá: 4 ⭐ ( 2348 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Build a full screen touch slider with HTML, CSS & JavaScript

    Full Screen Touch Slider Repo:
    https://github.com/bushblade/Full-Screen-Touch-Slider

    React Component Repo:
    https://github.com/bushblade/react-touch-drag-slider

    YouTube Video Codepen:
    https://codepen.io/bradtraversy/pen/ExNVwgZ

    Handmade Knives By Will Adams:
    https://bushblade.co.uk/

    Timestamps:
    0:00 – Intro
    1:49 – The HTML
    3:32 – The CSS
    10:57 – The JavaScript

Đối tượng window trong javascript

  • Tác giả: toidicode.com
  • Đánh giá: 4 ⭐ ( 8040 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Sau khi đã được tìm hiểu về DOM trong javascript rồi, thì bài này sẽ là bài mở đầu cho series BOM trong javascript.

Sử dụng hồ sơ chơi trò chơi cho chế độ toàn màn hình

  • Tác giả: support.kaspersky.com
  • Đánh giá: 3 ⭐ ( 5012 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

JavaScript Cửa sổ popup giữa màn hình

  • Tác giả: www.javascriptbank.com
  • Đánh giá: 4 ⭐ ( 8633 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Một đoạn mã JavaScript khác để bạn tạo các …JavaScript Cửa sổ popup giữa màn hình – Cửa sổ popup giữa màn hình – Ngôn ngữ: tiếng Việt

Cách mở liên kết trong cửa sổ mới bằng JavaScript – Taptin Blog

  • Tác giả: taptin.info
  • Đánh giá: 4 ⭐ ( 9973 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Bật, tắt JavaScript trên Chrome, Cốc Cốc, Firefox, Edge, Opera, Safari

  • Tác giả: quantrimang.com
  • Đánh giá: 3 ⭐ ( 2520 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Biết cách bật/tắt JavaScript sẽ giúp bạn chủ động khi làm việc trên trình duyệt. Hãy cùng theo dõi cách tắt và bật JavaScript trên Chrome dưới đây nhé, cũng khá đơn giản thôi.

Làm thế nào để hiển thị cửa sổ bật lên toàn màn hình trong javascript?

  • Tác giả: vi.waldorf-am-see.org
  • Đánh giá: 3 ⭐ ( 2937 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Có cách nào để phóng to cửa sổ bật lên ngay sau khi nó được mở không? Nếu không, ít nhất hãy làm cho nó có kích thước màn hình? This: window.open (src, ‘newWin’, ‘fullscreen = “yes”‘) dường như chỉ hoạt động cho …

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Vòng lặp for trong JavaScript: Cách sử dụng vòng lặp for… in - for in loop javascript