Как я могу сделать браузер посетителя в полноэкранном режиме, используя JavaScript, таким образом, который работает с IE, Firefox и Opera?Как сделать окно полноэкранным с Javascript (растягивание по всему экрану)
Это так близко, как вы можете получить весь экран в JavaScript:
<script type="text/javascript">
window.onload = maxWindow;
function maxWindow() {
window.moveTo(0, 0);
if (document.all) {
top.window.resizeTo(screen.availWidth, screen.availHeight);
}
else if (document.layers || document.getElementById) {
if (top.window.outerHeight < screen.availHeight || top.window.outerWidth < screen.availWidth) {
top.window.outerHeight = screen.availHeight;
top.window.outerWidth = screen.availWidth;
}
}
}
</script>
не работает в firefox 3.5 – user63898
Посмотрите на ссылку/принятый ответ в ссылке haim evgi ... вы не должны изменять размер браузера. Однако вы можете максимизировать в окне браузеров (то, как я его читаю) – lexu
Странно, я только что повторно протестировал этот скрипт в FF 3.5, и он, похоже, отлично работает ... чего мы не видим? –
К счастью, ничего не подозревающих пользователей сети это не может быть сделано только с помощью JavaScript. Вам нужно будет написать браузерные плагины, если они еще не существуют, а затем каким-то образом заставить их загружать их. Самое близкое, что вы можете получить, - это максимально развернутое окно без инструментов или навигационных панелей, но пользователи все равно смогут увидеть URL-адрес.
window.open(' http://www.web-page.com ', 'title' , 'type=fullWindow, fullscreen, scrollbars=yes');">
Это, как правило, считается плохой практикой, хотя, как он снимает много функциональных возможностей браузера от пользователя.
Это может поддержать
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default5.aspx.cs" Inherits="PRODUCTION_Default5" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
<script type="text/javascript">
function max()
{
window.open("", "_self", "fullscreen=yes, scrollbars=auto");
}
</script>
</head>
<body onload="max()">
<form id="form1" runat="server">
<div>
This is Test Page
</div>
</form>
</body>
</html>
я использовал это ...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script language="JavaScript">
function fullScreen(theURL) {
window.open(theURL, '', 'fullscreen=yes, scrollbars=auto');
}
// End -->
</script>
</head>
<body><h1 style="text-align: center;">
Open In Full Screen
</h1><div style="text-align: center;"><br>
<a href="javascript:void(0);" onclick="fullScreen('http://google.com');">
Open Full Screen Window
</a>
</div>
</body>
</html>
window.open (theURL, '', 'fullscreen = yes', 'scrollbars = auto'); В этой строке есть проблема с parens. –
То есть от родителя. Не полезно, когда окно уже открыто. – Christian
В более поздних версиях браузеров, таких как Chrome 15, Firefox 10, Safari 5.1, IE 10, это возможно. Это также возможно для старых IE через ActiveX в зависимости от настроек браузера.
Вот как это сделать:
function requestFullScreen(element) {
// Supports most browsers and their versions.
var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen;
if (requestMethod) { // Native full screen.
requestMethod.call(element);
} else if (typeof window.ActiveXObject !== "undefined") { // Older IE.
var wscript = new ActiveXObject("WScript.Shell");
if (wscript !== null) {
wscript.SendKeys("{F11}");
}
}
}
var elem = document.body; // Make the body go full screen.
requestFullScreen(elem);
Пользователь явно должен принять полноэкранное запрос первый, и не представляется возможным, чтобы вызвать это автоматически PageLoad, она должна быть вызвана пользователем (например, . кнопка)
подробнее: https://developer.mozilla.org/en/DOM/Using_full-screen_mode
В настоящее время доступно в Chrome 15, Firefox 10 и Safari 5.1. См. Этот блог [hacks.mozilla.org] (http://hacks.mozilla.org/2012/01/using-the-fullscreen-api-in-web-browsers/) для получения подробной информации о текущем состоянии игры. –
Это действительно круто, я этого не знал! –
ошибка 'el не определена', как и должно быть. Что такое 'el' .. ?? – shashwat
Этот код также включает в себя, как включить полный экран для Internet Explorer 9, и, вероятно, более старые версии, , а также очень последние версии Google Ch Рим. Принятый ответ также может быть использован для других браузеров.
var el = document.documentElement
, rfs = // for newer Webkit and Firefox
el.requestFullScreen
|| el.webkitRequestFullScreen
|| el.mozRequestFullScreen
|| el.msRequestFullscreen
;
if(typeof rfs!="undefined" && rfs){
rfs.call(el);
} else if(typeof window.ActiveXObject!="undefined"){
// for Internet Explorer
var wscript = new ActiveXObject("WScript.Shell");
if (wscript!=null) {
wscript.SendKeys("{F11}");
}
}
Источники:
requestFullScreen "работает только в" "[м] ОСТ UIEvents и MouseEvents, такие как мыши и KeyDown и т.д.", «так его нельзя использовать злонамеренно ».)Работает над IE 8 выше, FF10 выше (проверено в FF 9, оно не работает), проверено на Chrome 18 – Treby
@ Питер О. «должен быть помещен в обработчик событий», каким-либо образом запустить его при загрузке? –
@FrancisP: Нет; ни «load», ни «DOMContentLoaded» не являются применимыми UIEvent или MouseEvent для полноэкранного API. –
Попробуйте этот сценарий
<script language="JavaScript">
function fullScreen(theURL) {
window.open(theURL, '', 'fullscreen=yes, scrollbars=auto');
}
</script>
Для вызова использования сценария этот код,
window.fullScreen('fullscreen.jsp');
или с гиперссылкой использовать этот
<a href="javascript:void(0);" onclick="fullScreen('fullscreen.jsp');">
Open in Full Screen Window</a>
В Firefox 10, вы можете сделать на текущей странице идти в полноэкранном режиме (в режиме реального весь экран, без окна хром), используя этот JavaScript:
window.fullScreen = true;
Разве это не должно быть атрибутом только для чтения? –
Термин «предполагается» настолько перегружен программным обеспечением. В некоторых браузерах он доступен только для чтения. Firefox 10 позволяет вам установить его. – Leopd
AQ & D способ пойти на полный экран, если вы находитесь в ситуации «киоска» , должен подать F11 в окно браузера после его запуска и запуска. Это не очень пугающий запуск, и пользователь может вытащить сенсорный экран вверху и получить полу-полноэкранное представление, но подача F11 может сделать в крайнем случае или просто начать работу над проектом.
Вот полное решение, чтобы получить в и из полноэкранного режима (он же отменить, выход, бежать)
function cancelFullScreen(el) {
var requestMethod = el.cancelFullScreen||el.webkitCancelFullScreen||el.mozCancelFullScreen||el.exitFullscreen;
if (requestMethod) { // cancel full screen.
requestMethod.call(el);
} else if (typeof window.ActiveXObject !== "undefined") { // Older IE.
var wscript = new ActiveXObject("WScript.Shell");
if (wscript !== null) {
wscript.SendKeys("{F11}");
}
}
}
function requestFullScreen(el) {
// Supports most browsers and their versions.
var requestMethod = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullscreen;
if (requestMethod) { // Native full screen.
requestMethod.call(el);
} else if (typeof window.ActiveXObject !== "undefined") { // Older IE.
var wscript = new ActiveXObject("WScript.Shell");
if (wscript !== null) {
wscript.SendKeys("{F11}");
}
}
return false
}
function toggleFull() {
var elem = document.body; // Make the body go full screen.
var isInFullScreen = (document.fullScreenElement && document.fullScreenElement !== null) || (document.mozFullScreen || document.webkitIsFullScreen);
if (isInFullScreen) {
cancelFullScreen(document);
} else {
requestFullScreen(elem);
}
return false;
}
Как насчет 'msIsFullScreen'? – kangax
Спецификация изменилась. 'webkitCancelFullScreen' теперь' webkitExitFullscreen'. http://generatedcontent.org/post/70347573294/is-your-fullscreen-api-code-up-to-date-find-out-how-to –
первая часть этой логической операции и операция избыточна и должна быть удалить '' '' document.fullScreenElement && document.fullScreenElement! == null''''' – consideRatio
Вы можете использовать The fullscreen API Вы можете увидеть an example here
полноэкранной API предоставляет простой способ для веб-контента быть представлен с использованием всего экрана пользователя. В этой статье представлена информация об использовании этого API .
Простой пример из: http://www.longtailvideo.com/blog/26517/using-the-browsers-new-html5-fullscreen-capabilities/
<script type="text/javascript">
function goFullscreen(id) {
// Get the element that we want to take into fullscreen mode
var element = document.getElementById(id);
// These function will not exist in the browsers that don't support fullscreen mode yet,
// so we'll have to check to see if they're available before calling them.
if (element.mozRequestFullScreen) {
// This is how to go into fullscren mode in Firefox
// Note the "moz" prefix, which is short for Mozilla.
element.mozRequestFullScreen();
} else if (element.webkitRequestFullScreen) {
// This is how to go into fullscreen mode in Chrome and Safari
// Both of those browsers are based on the Webkit project, hence the same prefix.
element.webkitRequestFullScreen();
}
// Hooray, now we're in fullscreen mode!
}
</script>
<img class="video_player" src="image.jpg" id="player"></img>
<button onclick="goFullscreen('player'); return false">Click Me To Go Fullscreen! (For real)</button>
Новая технология html5 - полноэкранный API дает нам простой способ настоящего содержания веб-страницы в полноэкранном режиме. Мы собираемся дать подробную информацию о полноэкранном режиме. Просто попробуйте представить все возможные преимущества, которые вы можете получить, используя эту технологию - полноэкранные фотоальбомы, видеоролики и даже игры.
Но прежде чем описать эту новую технологию, я должен отметить, что эта технология является экспериментальной, и поддерживается всеми основными браузерами.
Вы можете найти полный учебник здесь:http://www.css-jquery-design.com/2013/11/javascript-jquery-fullscreen-browser-window-html5-technology/
Здесь работает демо:http://demo.web3designs.com/javascript-jquery-fullscreen-browser-window-html5-technology.htm
Создание функции
function toggleFullScreen() {
if ((document.fullScreenElement && document.fullScreenElement !== null) ||
(!document.mozFullScreen && !document.webkitIsFullScreen)) {
$scope.topMenuData.showSmall = true;
if (document.documentElement.requestFullScreen) {
document.documentElement.requestFullScreen();
} else if (document.documentElement.mozRequestFullScreen) {
document.documentElement.mozRequestFullScreen();
} else if (document.documentElement.webkitRequestFullScreen) {
document.documentElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
}
} else {
$scope.topMenuData.showSmall = false;
if (document.cancelFullScreen) {
document.cancelFullScreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}
}
}
В Html Поместите код, как
<ul class="unstyled-list fg-white">
<li class="place-right" data-ng-if="!topMenuData.showSmall" data-ng-click="toggleFullScreen()">Full Screen</li>
<li class="place-right" data-ng-if="topMenuData.showSmall" data-ng-click="toggleFullScreen()">Back</li>
</ul>
Теперь, полные интерфейсы экрана более распространены и по всей видимости, созревания, почему бы не попробовать Screenfull.js? Я использовал его в первый раз вчера, и сегодня наше приложение действительно по-настоящему полноэкранное (почти) все браузеры!
Обязательно соедините его с псевдосемейством :fullscreen в CSS. См. https://www.sitepoint.com/use-html5-full-screen-api/ для получения дополнительной информации.
Удивительный маленький скрипт. Используя его на моем сайте сейчас на www.StarCommanderOnline.com. Спасибо! – Andy
Вот мое полное решение для Full Screen и Exit Full Screen оба (большое спасибо, чтобы помочь от ответа башни выше):
$(document).ready(function(){
$.is_fs = false;
$.requestFullScreen = function(calr)
{
var element = document.body;
// Supports most browsers and their versions.
var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen;
if (requestMethod) { // Native full screen.
requestMethod.call(element);
} else if (typeof window.ActiveXObject !== "undefined") { // Older IE.
var wscript = new ActiveXObject("WScript.Shell");
if (wscript !== null) {
wscript.SendKeys("{F11}");
}
}
$.is_fs = true;
$(calr).val('Exit Full Screen');
}
$.cancel_fs = function(calr)
{
var element = document; //and NOT document.body!!
var requestMethod = element.exitFullScreen || element.mozCancelFullScreen || element.webkitExitFullScreen || element.mozExitFullScreen || element.msExitFullScreen || element.webkitCancelFullScreen;
if (requestMethod) { // Native full screen.
requestMethod.call(element);
} else if (typeof window.ActiveXObject !== "undefined") { // Older IE.
var wscript = new ActiveXObject("WScript.Shell");
if (wscript !== null) {
wscript.SendKeys("{F11}");
}
}
$(calr).val('Full Screen');
$.is_fs = false;
}
$.toggleFS = function(calr)
{
$.is_fs == true? $.cancel_fs(calr):$.requestFullScreen(calr);
}
});
// ВЫЗОВ:
<input type="button" value="Full Screen" onclick="$.toggleFS(this);" />
его внутреннее применение, а не для общественности. im не собираюсь злоупотреблять ни одним – user63898
Вы можете прагматично спросить пользователя: 'sprintf ('Уважаемый пользователь, лучший опыт работы с этим сайтом находится в полноэкранном режиме. Чтобы просмотреть весь этот сайт, нажмите% s.', _get_browsers_full_Screen_key ()) ' – Boldewyn
Мне любопытно, как работает полноэкранный режим youtube. Кто-нибудь знает ответ? – Kasturi