ページ要素を全画面で表示する JavaScript 全画面メソッド_JavaScript スキル

最も簡単な方法の 1 つは、全画面で表示するコンポーネントのスタイルを動的に変更することです。たとえば、位置は絶対値になり、高さと幅はウィンドウ サイズに設定され、背景色はすべて変更されます。 (ページ上の残りの要素を隠すために) 白で表示されます。この方法では、強調表示したいコンポーネントのみが Web ページ上に表示され、視覚的に全画面表示と同等になります。同時に、JavaScript を使用してキーボード イベントを監視します。ユーザーが ESc 終了キーを押すと、元の状態に戻ります。コードの一部は次のとおりです:

コードをコピー コードは次のとおりです。

document.onkeydown = function (event) {
var e = イベント || argument.callee.caller.arguments[0];
if (e && e.keyCode == 27) { //ESC キー

$(' .navbar-inner').fadeIn(100);
var maintable = document.getElementById("holder");
maintable.style.position = "relative";
maintable.style. height = " 100%";
maintable.style.width = "100%";
maintable = document.getElementById("main");
maintable .style.width = "100%";
maintable.style.left = 0 "px";
maintable.style.top = 0 "px";
sizePlots();
}
};

fullScreenClick: function () {

$('.navbar-inner').fadeOut(100);

var maintable = document.getElementById("holder");

maintable.style.position = "absolute";
maintable.style.background = "#fff";
//maintable.style .zIndex = 5;
maintable.style.height = $(window).height() "px";
maintable.style.width = $(window).width() "px";
maintable.style.left = 0 "px";
maintable.style.top = 0 "px";
maintable = document.getElementById("main");
maintable.style.height = "90 %";
maintable.style.width = "90%";
maintable.style.left = $(window).width() * 0.05 "px";
maintable.style.top = $ (window).height() * 0.02 "px";
resizePlots();
},

ただし、これには、手動で F11 を押す必要があるという欠点があります。まさにフルスクリーン。
自分で F11 キーを押さないようにする方法は次のとおりです:

コードをコピー コードは次のとおりです:

全画面

Weibo で相互フォローすることを歓迎します。

weibo.com/leavingseason

音楽を信じて、メーデーを信じよう

これはほとんどのブラウザをサポートできます。しかし、迷惑な IE は依然として HTML5 の全画面機能をサポートできず、F11 を押す動作をシミュレートする必要があります。読者はコード内でそれを確認できます。

コードで全画面インターフェースを終了することもできます:

コードをコピー コードは次のとおりです。

function cancelFullScreen(el) {
var requestMethod = el.cancelFullScreen||el.webkitCancelFullScreen||el.mozCancelFullScreen||el.exitFullscreen;
if ( typeof window.ActiveXObject !== "未定義") { // 古い IE.
var wscript = new ActiveXObject（ "wscript.shell"）;
if（wscript！== null）{
var wscript（ "{f11}"）;
。ご存知の方がいらっしゃいましたら、ぜひシェアしていただければ幸いです。

更新(2013/09/22)

全画面に切り替えるときに、いくつかのカスタムなことをしたいと思うことがよくあります。イベントは次のようにバインドできます:

コードをコピー

コードは次のとおりです。

document.addEventListener("fullscreenchange", function) () { doit();}, false);document.addEventListener("mozfullscreenchange", function () {

doit();

}, false) ;

document.addEventListener("webkitfullscreenchange", function () {
doit();
}, false);


全画面表示または全画面表示から終了しますdoit() 操作がトリガーされるたび。