如何以与IE,Firefox和Opera兼容的方式使用JavaScript使访问者的浏览器全屏显示?
sprintf('Dear user, the best experience with this site is in fullscreen mode. To view this site full screen, press %s.', _get_browsers_full_Screen_key())
如何以与IE,Firefox和Opera兼容的方式使用JavaScript使访问者的浏览器全屏显示?
sprintf('Dear user, the best experience with this site is in fullscreen mode. To view this site full screen, press %s.', _get_browsers_full_Screen_key())
Answers:
这与您使用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>
在较新的浏览器中,例如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);
显然,用户显然需要首先接受全屏请求,并且无法在页面加载时自动触发此请求,它需要由用户(例如按钮)触发
了解更多:https://developer.mozilla.org/en/DOM/Using_full-screen_mode
document.documentElement
将确保您获得正确的根元素(“ html”或“ body”)。使用可以将cancelFullscreen()
其关闭(或再次向IE发送“ F11”)。
此代码还包括如何为Internet Explorer 9(可能是较旧的版本)以及最新版本的Google Chrome启用全屏显示。接受的答案也可以用于其他浏览器。
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(例如单击和按下按键等),“因此不能被恶意使用”期间起作用)。documentElement
,比body
我好。
这是进入和退出全屏模式(即取消,退出,转义)的完整解决方案
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
呢
document.fullScreenElement && document.fullScreenElement !== null
elem
在toggleFull()
从document.body
到document.documentElement
到修复左,右页边距问题
全新的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
我已经用过了...
<!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>
来自以下示例的简单示例: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>
创建功能
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>
现在,全屏API越来越普及并且日趋成熟,为什么不尝试Screenfull.js呢?昨天我第一次使用它,今天我们的应用程序在(几乎)所有浏览器中都变为全屏显示!
确保将其与:fullscreen
CSS中的伪类耦合。有关更多信息,请参见https://www.sitepoint.com/use-html5-full-screen-api/。
幸运的是,对于毫无戒心的Web用户,这不能仅使用javascript来完成。如果尚不存在特定于浏览器的插件,则需要编写它们,然后以某种方式让人们下载它们。您可以得到的最接近的是没有工具或导航栏的最大化窗口,但用户仍然可以看到该URL。
window.open('http://www.web-page.com', 'title' , 'type=fullWindow, fullscreen, scrollbars=yes');">
尽管这会删除用户的许多浏览器功能,但通常认为这是不好的做法。
尝试screenfull.js。这是一个很好的跨浏览器解决方案,也应该适用于Opera浏览器。
用于JavaScript全屏API的跨浏览器使用的简单包装,使您可以将页面或任何元素置于全屏状态。消除浏览器实现上的差异,因此您不必这样做。
演示。
这可能支持
<%@ 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>
你能试一下吗:
<script type="text/javascript">
function go_full_screen(){
var elem = document.documentElement;
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen();
} else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
elem.webkitRequestFullscreen();
}
}
</script>
<a href="#" onClick="go_full_screen();">Full Screen / Compress Screen</a>
试试这个脚本
<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;
这样可以全屏显示窗口
注意: 要使此方法起作用,您需要从http://code.jquery.com/jquery-2.1.1.min.js进行查询
或者使像这样的javascript链接。
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<div id="demo-element">
<span>Full Screen Mode Disabled</span>
<button id="go-button">Enable Full Screen</button>
</div>
<script>
function GoInFullscreen(element) {
if(element.requestFullscreen)
element.requestFullscreen();
else if(element.mozRequestFullScreen)
element.mozRequestFullScreen();
else if(element.webkitRequestFullscreen)
element.webkitRequestFullscreen();
else if(element.msRequestFullscreen)
element.msRequestFullscreen();
}
function GoOutFullscreen() {
if(document.exitFullscreen)
document.exitFullscreen();
else if(document.mozCancelFullScreen)
document.mozCancelFullScreen();
else if(document.webkitExitFullscreen)
document.webkitExitFullscreen();
else if(document.msExitFullscreen)
document.msExitFullscreen();
}
function IsFullScreenCurrently() {
var full_screen_element = document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement || null;
if(full_screen_element === null)
return false;
else
return true;
}
$("#go-button").on('click', function() {
if(IsFullScreenCurrently())
GoOutFullscreen();
else
GoInFullscreen($("#demo-element").get(0));
});
$(document).on('fullscreenchange webkitfullscreenchange mozfullscreenchange MSFullscreenChange', function() {
if(IsFullScreenCurrently()) {
$("#demo-element span").text('Full Screen Mode Enabled');
$("#go-button").text('Disable Full Screen');
}
else {
$("#demo-element span").text('Full Screen Mode Disabled');
$("#go-button").text('Enable Full Screen');
}
});</script>
这里是我的完整的解决方案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);" />