Javascript, чтобы показать курсор, когда окно не является полной шириной

Я хочу скрыть курсор, когда мое окно получит полную ширину, и как только я нажму на кнопку esc, появится мой указатель мыши.Javascript, чтобы показать курсор, когда окно не является полной шириной

Я использую следующий код, чтобы показать/скрыть курсор и показать полную ширину окна.

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 "? Вы говорите о нажатии клавиши Escape на клавиатуре или есть кнопка на странице? – Whothehellisthat

Nevermind - Я думаю, вы имеете в виду клавишу Escape. Ответ на входящий ...; 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'; 
    } 
}

Вам нужно будет добавить в префикс браузера материал, но это должно указывать на вас в правильном направлении. Вы можете узнать больше на странице MDN для fullscreen mode.

источник

2016-07-21 06:57:00 Whothehellisthat

Я пробовал код, чтобы открыть новое окно, которое будет отображаться в полной ширине. поэтому я добавил указанный выше код на но он не wokring открывает новое окно, но не отображается в полной ширине. (как мы можем видеть, когда нажимаем f11) – user6617474

Oh. Вы не просматриваете что-то в текущем окне? Вероятно, вы не можете полноэкранный onload, иначе люди могут спамить пользователя с нежелательными объявлениями в полноэкранном режиме. Просто чтобы проверить, вы пробовали его как есть, для текущего окна? Если это сработает, мы можем начать выяснять, как заставить его работать с новым окном, если это необходимо. – Whothehellisthat

Javascript, чтобы показать курсор, когда окно не является полной шириной

ответ

Смежные вопросы