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())
回答:
これは、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などの新しいブラウザーでは、これが可能です。ブラウザの設定によっては、ActiveX経由の古いIEでも可能です。
方法は次のとおりです。
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
in toggleFull()
をdocument.body
to document.documentElement
に変更して、左右のマージンの問題を修正します
フルスクリーンAPIを使用できますここで例 を確認できます
フルスクリーンAPIは、ユーザーの画面全体を使用してWebコンテンツを表示する簡単な方法を提供します。この記事では、このAPIの使用に関する情報を提供します。
新しいhtml5テクノロジー–フルスクリーンAPIを使用すると、フルスクリーンモードでWebページコンテンツを簡単に表示できます。フルスクリーンモードに関する詳細情報をお知らせします。フルスクリーンの写真アルバム、ビデオ、さらにはゲームなど、このテクノロジーを使用して得られるすべての利点について想像してみてください。
しかし、この新しいテクノロジーについて説明する前に、このテクノロジーは実験的であり、すべての主要なブラウザでサポートされていることに注意する必要があります。
ここで完全なチュートリアルを見つけることができます: 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 Putコードのように
<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>
全画面表示にするQ&Dの方法は、「キオスク」の状況にある場合、F11を起動して実行した後にブラウザーウィンドウにフィードすることです。これはかなり初期段階ではなく、ユーザーは上部のタッチスクリーンを突き出して半全画面ビューを表示できる場合がありますが、F11を供給するとピンチインするか、プロジェクトを開始するだけの場合があります。
ここに私のための完全なソリューションである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);" />