ウィンドウが全幅でないときにカーソルを表示するには

私のウィンドウが全幅になったらEscを押してください。ウィンドウが全幅でないときにカーソルを表示するには

次のコードを使用して、カーソルの表示/非表示とウィンドウの全幅の表示を行っています。

function toggleFullScreen(elem) { 
    if ((document.fullScreenElement !== undefined && document.fullScreenElement === null) || (document.msFullscreenElement !== undefined && document.msFullscreenElement === null) || (document.mozFullScreen !== undefined && !document.mozFullScreen) || (document.webkitIsFullScreen !== undefined && !document.webkitIsFullScreen)) { 
     if (elem.requestFullScreen) { 
      elem.requestFullScreen(); 
      document.body.style.cursor = 'none'; // to hide cursor 
     } else if (elem.mozRequestFullScreen) { 
      elem.mozRequestFullScreen(); 
      document.body.style.cursor = 'none'; // to hide cursor 
     } else if (elem.webkitRequestFullScreen) { 
      elem.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT); 
      document.body.style.cursor = 'none'; // to hide cursor 
     } else if (elem.msRequestFullscreen) { 
      elem.msRequestFullscreen(); 
      document.body.style.cursor = 'none'; // to hide cursor 
     } 
    } else{ 
     document.body.style.cursor = 'default'; // to show cursor 
     console.log('test'); 
    } 
}

HTML：

<body oncontextmenu="return false;" onkeydown="return false;" onmousedown="return false;" onclick="toggleFullScreen(document.body)"> 
</body>

CSS：

body { 
    BACKGROUND: #000080; 
    color: #fff; 
    font-family: 'Yantramanav', sans-serif; 
    margin: 0 auto; 
    width: 100%; 
    padding: 0; 
    overflow:hidden; 
    }

出典

2016-07-21 user6617474

どのようなエラーが発生していますか？ – ihemant360

「あなたはexcボタンをクリックしたらどういう意味ですか？あなたのキーボードでエスケープキーを押すことについて話しているのですか、またはページにボタンがありますか？ – Whothehellisthat

Nevermind - あなたはエスケープキーを意味すると思います。 Answer ...; D – Whothehellisthat

その後、fullscreenchangeイベントにフックdocument.fullscreenElementをチェックすることですこれを行うための最善の方法。

checkFullscreenは、ユーザーがフルスクリーンモードにどのように出入りするかにかかわらず実行されるため、変更するたびにカーソルを非表示にすることができます。

イベントにフックする方法はいくつかありますが、簡単にするために、コードで既に使用している方法に固執します。

<body onclick="toggleFullScreen(document.body)" onfullscreenchange="checkFullscreen"></body> 

function toggleFullscreen(elem) { // simplified 
    if (document.fullscreenElement) { 
    elem.requestFullscreen(); 
    } 
    else { 
    document.exitFullscreen(); // changed 
    } 
} 

function checkFullscreen() { // added 
    if (document.fullScreenElement) { 
    document.body.style.cursor = 'none'; 
    } 
    else { 
    document.body.style.cursor = 'default'; 
    } 
}

ブラウザプレフィックスのものを追加する必要がありますが、これは正しい方向を示します。詳細は、fullscreen modeのMDNページをご覧ください。

出典

2016-07-21 06:57:00 Whothehellisthat

私は全幅で表示される新しいウィンドウを開くために上記のコードを試しました。だから私は上記のコードを追加しましたしかし、それは新しいウィンドウを開きますが、全幅で表示されません。（私たちがf11を押すとわかるように） – user6617474

ああ。あなたは現在のウィンドウで何かをフルスクリーンで見ていませんか？あなたはおそらく全画面表示をすることはできません。そうしなければ、ユーザーは全画面モードで望ましくない広告でユーザーを迷惑に陥れる可能性があります。テストするだけで、現在のウィンドウでそのまま試してみましたか？それが動作すれば、新しいウィンドウで動作させる方法を見つけ出すことができます。 – Whothehellisthat

ウィンドウが全幅でないときにカーソルを表示するには

答えて

関連する問題