IE, Firefox 및 Opera에서 작동하는 방식으로 JavaScript를 사용하여 방문자의 브라우저를 전체 화면으로 전환하려면 어떻게 해야 합니까?
최신 브라우저 크롬, 파이어폭스, 사파리 등 10 의 15 5.1, IE 10 가능합니다. # 39 의 it& # 39 의 브라우저 설정을 통해 수도 이전 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
이 코드는 에는 인터넷 익스플로러 9, 아마 이전 버전을 사용하는 방법에 대해 전체 화면 물론 가장 최근 버전은 구글 크롬. 이 수락됨 오토메이티드 다른 브라우저를 사용할 수도 있습니다.
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}");
}
}
출처:
(하지만, 그 - https://stackoverflow.com/questions/7836204/chrome-fullscreen-api ',' " 리퀘스트풀스린 때만 during". " [만] ost 이븐츠 및 mouseevent 같은 클릭하고,, etc." 케이다운 " 아니하였덕라이처럼 하나님온 maliciously" 사용할 수 없습니다.)
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>
이것은 전체 화면 모드를 얻을 수 있는 완벽한 솔루션을 빼냅니다 (lc-fc 종료하십시오 취소, 이스케이프입니다)
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;
}
전체 화면 apiu 사용할 수 있습니다. 예 여기서요 볼 수 있습니다.
>. 전체 화면 API 는 웹 콘텐츠를 쉽게 할 수 없다. >. # 39 의 user& 사용하여 전체 화면을 공개했다. 이 문서에서는 >. 이 API 를 사용하여 대한 정보.
>. 새로운 html5 기술을 통해 쉽게 미국 전체 화면 apiu - >. 현재 웹 페이지 내용 전체 화면 모드로. 우리는 전달자로써 대한 >. 전체 화면 모드를 대한 자세한 내용을 볼 수 있습니다. 그냥 봅니다 >. 이를 통해 얻을 수 있는 가능한 모든 장이점이 대해 상상해 보십시오. >. 기술 - 심지어 게임, 동영상, 사진 앨범 전체 화면.
그러나 이 새로운 기술을 설명하기에 앞서 하는데, 이는 모든 주요 기술은 실험 및 에서 지원하는 브라우저 .
<!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();
}
}
}
<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>
다행히 의심하지 않는 웹 사용자들에게는 이것이 단지 자바스크립트로 이루어질 수 없다. 브라우저별 플러그인이 아직 존재하지 않는 경우 해당 플러그인을 작성한 다음 어떻게든 사람들이 해당 플러그인을 다운로드하도록 해야 합니다. 도구나 탐색 막대가 없는 최대화된 창이지만 사용자는 여전히 URL을 볼 수 있습니다.
snb.open('http://www.web-page.com', 'type=전체 창, 전체 화면, 스크롤 막대=예';>>
이것은 사용자로부터 많은 브라우저 기능을 제거하기 때문에 일반적으로 나쁜 관행으로 간주된다.
이제 더 많은 것으로, 전체 화면 api 가 개발되고 널리 왜안돼요 종료기 [스테린풀리아스] (https://sindresorhus.com/screenfull.js/)? 내가 맨 처음 사용한 전체 화면 (거의) 에서 app 댁이라면 어제, 오늘 정말 우리의 모든 브라우저에서!
Css dtep 클래스 가 정보기술 (it) '에서' 전체 화면 부부가 함께 합니다. 자세한 https://www.sitepoint.com/use-html5-full-screen-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 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>
니가:
<! - begin 스니핏: js 숨기십시오: 거짓값 콘솔: 진정한 바벨. > 거짓값 -;
<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>
끝 - < 스니핏 >;!
이것은 전체 화면 '와' '내 모든 솔루션을 모두 종료하십시오 전체 화면' (많은 도움 덕분에 tower& # 39 의 오토메이티드 위).
$(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);" />
이렇게 하면 전체 화면 * 작동됨 창을 새로 표시하십시오.
또는 이렇게 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>