1. Trang chủ
  2. Câu hỏi và trả lời
  3. Phát hiện xem trình duyệt có ở chế độ toàn màn hình hay không

Phát hiện xem trình duyệt có ở chế độ toàn màn hình hay không

2009-06-26 79 views
39

Có cách nào phát hiện đáng tin cậy nếu trình duyệt đang chạy ở chế độ toàn màn hình không? Tôi chắc rằng không có bất kỳ API trình duyệt nào tôi có thể truy vấn, nhưng có ai đã làm việc đó bằng cách kiểm tra và so sánh các số đo chiều cao/chiều rộng nhất định do DOM hiển thị không? Ngay cả khi nó chỉ hoạt động đối với một số trình duyệt nhất định, tôi quan tâm đến việc nghe về nó.Phát hiện xem trình duyệt có ở chế độ toàn màn hình hay không

Nguồn

2009-06-26 Simon Lieschke

+2

Tại sao bạn cần phát hiện điều này? Có lẽ có một giải pháp cho vấn đề của bạn? – Marc

+2

Khi trình duyệt ở chế độ toàn màn hình, không có cách nào nhìn thấy thời gian được báo cáo bởi hệ điều hành (ví dụ: đồng hồ trong vùng thông báo trên thanh tác vụ trên Windows).Việc có thể thấy thời gian hiện tại có thể quan trọng đối với người dùng ứng dụng web của chúng tôi, vì vậy chúng tôi muốn có thể hiển thị đồng hồ khi trình duyệt được kiểm tra toàn màn hình. Màn hình bất động sản là một phí bảo hiểm khi ứng dụng của chúng tôi được chạy ở độ phân giải thấp hơn như 1024 * 768 vì vậy chúng tôi muốn chỉ hiển thị đồng hồ khi trình duyệt được kiểm tra đầy đủ nếu có thể. –

+1

Điều gì sẽ xảy ra nếu họ thường không có đồng hồ trên màn hình của họ và cũng không sử dụng trình duyệt của họ toàn màn hình? Bạn có chắc bạn là người chịu trách nhiệm cho họ biết thời gian hiện tại? –

Trả lời

7

Điều gì về việc xác định khoảng cách giữa chiều rộng khung nhìn và chiều rộng độ phân giải cũng như chiều cao tương tự. Nếu đó là một lượng nhỏ pixel (đặc biệt là đối với chiều cao), thì có thể ở chế độ toàn màn hình.

Tuy nhiên, điều này sẽ không bao giờ đáng tin cậy.

Nguồn

2009-06-26 04:28:01 alex

+0

Nếu trình duyệt thực sự chạy toàn màn hình, sự khác biệt giữa kích thước khung nhìn và độ phân giải bằng 0. Trừ khi bạn đang chạy nhiều màn hình, tôi đoán vậy. –

+0

Thanh cuộn có được tính là một phần của chế độ xem không? –

+0

Tôi không chắc chắn - bạn sẽ phải thử nghiệm. – alex

9

Opera xử lý toàn màn hình dưới dạng loại phương tiện CSS khác. Họ gọi nó là Opera Show, và bạn có thể kiểm soát nó cho mình một cách dễ dàng:

@media projection { 
    /* these rules only apply in full screen mode */ 
}

Kết hợp với [email protected], cá nhân tôi đã tìm thấy nó cực kỳ tiện dụng.

Nguồn

2009-06-26 04:46:45

2

này làm việc cho tất cả các trình duyệt mới:

if (!window.screenTop && !window.screenY) { 
    alert('Browser is in fullscreen'); 
}

Nguồn

2011-10-21 22:20:47

+4

Thật không may, thử nghiệm này đã biến không đáng tin cậy. –

+1

Điều này dường như hoạt động: nếu (screen.height === window.outerHeight) { cảnh báo ('Trình duyệt ở chế độ toàn màn hình'); } –

+0

Không, giải pháp thứ hai không hoạt động trong Chrome 23, khi toàn màn hình qua API bật, nhưng người dùng tắt nó đi bằng Ctrl + alt + F. – Ruben

15

Chrome 15, Firefox 10 và Safari 5.1 hiện nay cung cấp API để lập trình kích hoạt chế độ toàn màn hình. Chế độ toàn màn hình được kích hoạt theo cách này cung cấp các sự kiện để phát hiện các thay đổi toàn màn hình và các lớp giả CSS để tạo kiểu cho các phần tử toàn màn hình.

Xem this hacks.mozilla.org blog post để biết chi tiết.

Nguồn

2012-02-02 12:52:23

+0

Tuy nhiên, có cách nào để phát hiện người dùng đã nhập toàn màn hình bằng trình duyệt được cung cấp có nghĩa là (như F11 hoặc menu bên cạnh Thu phóng trong Chrome) không? – Suma

4

Firefox 3+ cung cấp thuộc tính không chuẩn trên đối tượng window báo cáo xem trình duyệt có ở chế độ toàn màn hình hay không: window.fullScreen.

Nguồn

2012-02-02 13:35:54

+0

Rất tuyệt! Điều này hoạt động đáng tin cậy trong Firefox. Đây chắc chắn là một phần của giải pháp. –

3

Trong Chrome ít nhất:

onkeydown thể được sử dụng để phát hiện các phím F11 được ép để nhập toàn màn hình. onkeyup có thể được sử dụng để phát hiện phím F11 đang được nhấn để thoát chế độ toàn màn hình.

Sử dụng mà kết hợp với kiểm tra keyCode == 122

Phần khó khăn sẽ được báo cho KeyDown/KeyUp không để thực thi mã của nó nếu người kia chỉ cần làm.

Nguồn

2012-08-21 07:14:50 Rhyono

+0

Điều này không giúp ích nếu người dùng đã nhập toàn màn hình bằng F11 trước khi họ điều hướng đến trang web đang chạy javascript đó. –

1

Có KHÔNG của tôi qua trình duyệt biến thể:

<!DOCTYPE html> 
<html> 
<head> 
    <title>Fullscreen</title> 
</head> 
<body> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
<script type="text/javascript"> 
var fullscreen = $(window).height() + 1 >= screen.height; 
$(window).on('resize', function() { 
    if (!fullscreen) { 
    setTimeout(function(heightStamp) { 
     if (!fullscreen && $(window).height() === heightStamp && heightStamp + 1 >= screen.height) { 
     fullscreen = true; 
     $('body').prepend("<div>" + $(window).height() + " | " + screen.height + " | fullscreen ON</div>"); 
     } 
    }, 500, $(window).height()); 
    } else { 
    setTimeout(function(heightStamp) { 
     if (fullscreen && $(window).height() === heightStamp && heightStamp + 1 < screen.height) { 
     fullscreen = false; 
     $('body').prepend("<div>" + $(window).height() + " | " + screen.height + " | fullscreen OFF</div>"); 
     } 
    }, 500, $(window).height()); 
    } 
}); 
</script> 
</body> 
</html>

Tested on:
Kubuntu 13.10:
Firefox 27 (<!DOCTYPE html> là cần thiết, kịch bản một cách chính xác làm việc với dual-màn hình), Chrome 33, Rekonq - vượt qua

Win 7:
Firefox 27, Chrome 33, Opera 12, Opera 20, IE 10 - pass
IE < 10 - thất bại

Nguồn

2014-03-07 15:47:28 SergO

5

Chỉ cần nghĩ rằng tôi muốn thêm thruppence tôi để tiết kiệm bất cứ ai đập đầu họ. Câu trả lời đầu tiên là tuyệt vời nếu bạn có toàn quyền kiểm soát quá trình, đó là bạn bắt đầu quá trình toàn màn hình trong mã. Vô dụng nếu ai đó làm điều này bằng cách nhấn F11.

Tia hy vọng trên đường chân trời đến dưới dạng đề xuất W3C này là http://www.w3.org/TR/view-mode/ sẽ cho phép phát hiện cửa sổ, nổi (không có chrome), phóng to, thu nhỏ và toàn màn hình thông qua truy vấn phương tiện (tất nhiên có nghĩa là window.matchMedia và liên kết).

Tôi đã nhìn thấy các dấu hiệu cho thấy nó đang trong quá trình triển khai với tiền tố -webkit và -moz nhưng dường như chưa xuất hiện trong quá trình sản xuất.

Vì vậy, không, không có giải pháp nhưng hy vọng tôi sẽ tiết kiệm một người nào đó chạy rất nhiều xung quanh trước khi chạm vào cùng một bức tường.

PS *: - moz toàn màn hình có doo-dah là tốt, nhưng tốt đẹp để biết về.

Nguồn

2015-01-28 03:35:27

1

giải pháp của tôi là:

var fullscreenCount = 0; 
var changeHandler = function() {           

    fullscreenCount ++; 

    if(fullscreenCount % 2 === 0) 
    { 
     console.log('fullscreen exit'); 
    } 
    else 
    { 
     console.log('fullscreened'); 
    } 

}                   
document.addEventListener("fullscreenchange", changeHandler, false);  
document.addEventListener("webkitfullscreenchange", changeHandler, false); 
document.addEventListener("mozfullscreenchange", changeHandler, false); 
document.addEventListener("MSFullscreenChanges", changeHandler, false);

Nguồn

2015-06-24 15:19:00 w4kskl

0

tài window.innerHeight và screen.availHeight. Ngoài ra chiều rộng.

window.onresize = function(event) { 
    if (window.outerWidth === screen.availWidth && window.outerHeight === screen.availHeight) { 
     console.log("This is your MOMENT of fullscreen: " + Date());  
}

Nguồn

2015-12-03 15:13:33

2

Bạn có thể kiểm tra xem document.fullscreenElement không phải là null để xác định xem chế độ toàn màn hình trên. Bạn cần phải cung cấp tiền tố fullscreenElement cho phù hợp. Tôi sẽ sử dụng một cái gì đó như thế này:

var fullscreenElement = document.fullscreenElement || document.mozFullScreenElement || 
document.webkitFullscreenElement || document.msFullscreenElement;

https://msdn.microsoft.com/en-us/library/dn312066(v=vs.85).aspx có một ví dụ điển hình cho điều này mà tôi trích dẫn dưới đây:

document.addEventListener("fullscreenChange", function() { 
      if (fullscreenElement != null) { 
       console.info("Went full screen"); 
      } else { 
       console.info("Exited full screen");    
      } 
     });

Nguồn

2016-02-03 13:30:58 Parth

1

Đây là giải pháp mà tôi đã đến ... Tôi đã viết nó như một mô-đun es6 nhưng mã nên khá đơn giản.

/** 
* Created by sam on 9/9/16. 
*/ 
import $ from "jquery" 

function isFullScreenWebkit(){ 
    return $("*:-webkit-full-screen").length > 0; 
} 
function isFullScreenMozilla(){ 
    return $("*:-moz-full-screen").length > 0; 
} 
function isFullScreenMicrosoft(){ 
    return $("*:-ms-fullscreen").length > 0; 
} 

function isFullScreen(){ 
    // Fastist way 
    var result = 
     document.fullscreenElement || 
     document.mozFullScreenElement || 
     document.webkitFullscreenElement || 
     document.msFullscreenElement; 

    if(result) return true; 

    // A fallback 
    try{ 
     return isFullScreenMicrosoft(); 
    }catch(ex){} 
    try{ 
     return isFullScreenMozilla(); 
    }catch(ex){} 
    try{ 
     return isFullScreenWebkit(); 
    }catch(ex){} 

    console.log("This browser is not supported, sorry!"); 
    return false; 
} 

window.isFullScreen = isFullScreen; 

export default isFullScreen;

Nguồn

2016-09-10 18:07:16

Các vấn đề liên quan

 Các vấn đề liên quan