Javascript yêu cầu toàn màn hình là không đáng tin cậy

Question

Tôi đang cố gắng để sử dụng API Javascript FullScreen, sử dụng cách giải quyết cho việc triển khai phi tiêu chuẩn hiện từ đây:

https://developer.mozilla.org/en/DOM/Using_full-screen_mode#AutoCompatibilityTable

Đáng buồn thay, nó hoạt động rất thất thường. Tôi chỉ quan tâm đến Chrome (sử dụng v17), nhưng kể từ khi tôi gặp vấn đề tôi đã làm một số thử nghiệm trong Firefox 10 để so sánh, kết quả là tương tự.

Mã bên dưới cố gắng đặt trình duyệt thành chế độ toàn màn hình, đôi khi nó hoạt động, đôi khi không. Nó luôn luôn gọi cảnh báo để cho biết nó đang yêu cầu toàn màn hình. Dưới đây là những gì tôi đã tìm thấy:

• Nó USUALLY đặt chế độ toàn màn hình. Nó có thể nhận được đến một trạng thái mà điều này ngừng hoạt động, nhưng cảnh báo vẫn xảy ra, tức là nó vẫn yêu cầu FullScreen, nhưng nó không hoạt động.
• Nó có thể hoạt động nếu được gọi từ trình xử lý nhấn phím (document.onkeypress), nhưng không được gọi khi tải trang (window.onload).

Mã của tôi là như sau:

function DoFullScreen() { 

    var isInFullScreen = (document.fullScreenElement && document.fullScreenElement !==  null) || // alternative standard method 
      (document.mozFullScreen || document.webkitIsFullScreen); 

    var docElm = document.documentElement; 
    if (!isInFullScreen) { 

     if (docElm.requestFullscreen) { 
      docElm.requestFullscreen(); 
     } 
     else if (docElm.mozRequestFullScreen) { 
      docElm.mozRequestFullScreen(); 
      alert("Mozilla entering fullscreen!"); 
     } 
     else if (docElm.webkitRequestFullScreen) { 
      docElm.webkitRequestFullScreen(); 
      alert("Webkit entering fullscreen!"); 
     } 
    } 
} 

Answer 1

requestFullscreen() không thể được gọi tự động là vì lý do an ninh (ít nhất là trong Chrome). Vì vậy nó chỉ có thể được gọi bằng một hành động người dùng như:

• nhấp chuột (nút, liên kết ...)
• chìa khóa (KeyDown, bấm phím ...)

Và nếu tài liệu của bạn được chứa trong một khung:

• allowfullscreen nhu cầu để có mặt trên các yếu tố *

* W3 Spec:
"...To prevent embedded content from going fullscreen only embedded content specifically allowed via the allowfullscreen attribute of the HTML iframe element will be able to go fullscreen. This prevents untrusted content from going fullscreen..."

Read more: W3 Spec on Fullscreen

Cũng đề cập bởi @abergmeier, trên Firefox yêu cầu độ toàn màn hình của bạn must be executed within 1 second sau sự kiện người dùng tạo đã bị sa thải.

Answer 2

Bạn không có gì sai với chức năng của mình. Trong Firefox, nếu bạn gọi trực tiếp chức năng đó, nó sẽ ngăn chặn toàn màn hình. Như bạn biết, Yêu cầu toàn màn hình bị từ chối vì docElm.mozRequestFullScreen(); không được gọi từ bên trong một trình xử lý sự kiện do người dùng tạo ngắn. Vì vậy, bạn phải gọi hàm trên sự kiện như onClick trong Firefox.

<a href="#" onClick="DoFullScreen()">Full Screen Mode</a> 

Answer 3

Tôi biết điều này là khá một câu hỏi cũ nhưng nó vẫn là kết quả hàng đầu trong Google khi tìm kiếm thông báo lỗi FireFox khi gọi mozRequestFullScreen() từ mã mà không được kích hoạt bởi bất kỳ tương tác người dùng.

Request for full-screen was denied because Element.mozRequestFullScreen() was not called from inside a short running user-generated event handler.

Như đã thảo luận đây là cài đặt bảo mật và do đó là hành vi chính xác trong môi trường trình duyệt thông thường (máy người dùng cuối).

Nhưng tôi đang viết một ứng dụng biển báo kỹ thuật số dựa trên HTML5 chạy trong môi trường được kiểm soát mà không có bất kỳ tương tác người dùng nào được dự định. Nó là quan trọng cho apllication của tôi để có thể chuyển sang chế độ toàn màn hình tự động.

May mắn là FireFox có khả năng loại bỏ hạn chế này trên trình duyệt, điều này khá khó tìm. Tôi sẽ viết nó ở đây như là tài liệu tham khảo trong tương lai cho tất cả mọi người tìm kiếm trang này qua tìm kiếm của Google như tôi đã làm

Trên tìm kiếm about:config trang cho khóa dưới đây và đặt nó vào sai

full-screen-api.allow-trusted-requests-only 

Đối với kỹ thuật số của tôi ứng dụng biển báo tôi cũng loại bỏ dấu nhắc trình duyệt cho thấy khi nhập fullscren:

full-screen-api.approval-required 

Hy vọng rằng điều này có thể tiết kiệm được một người nào đó giờ tôi lãng phí để tìm các thiết lập này.

Answer 4

Một vấn đề bất ngờ với requestFullscreen() là khung cha mẹ cần phải có các thuộc tính allowfullscreen, nếu Firefox kết quả đầu ra được lỗi sau:

Request for fullscreen was denied because at least one of the document’s containing elements is not an iframe or does not have an “allowfullscreen” attribute.

Ngoài iframe, điều này có thể được gây ra bởi trang của bạn là trong một khung frameset . Vì không được hỗ trợ frameset, không có hỗ trợ cho thuộc tính HTML5 allowfullscreen và cuộc gọi requestFullscreen() không thành công.

Các tài liệu Firefox khẳng định một cách rõ ràng này trên MDN, nhưng tôi nghĩ rằng nó gấu lặp lại ở đây, đối với các nhà phát triển người có thể không đọc tài liệu đầu tiên .... ahem

Only elements in the top-level document or in an with the allowfullscreen attribute can be displayed full-screen. This means that elements inside a frame or an object can't.