onclick 전체 화면으로 이동

onclick 전체 화면으로 이동

---

곧 출시 될 Chrome 웹 스토어를위한 웹 앱을 만들고 있습니다. F11을 누르는 것을 시뮬레이션하는 방법이 있습니까? 아니면 단순히 현재 창을 전체 화면으로 만드는 명령입니까?

---

JavaScript로 가능합니다 .

var elem = document.getElementById("myvideo");
if (elem.requestFullscreen) {
  elem.requestFullscreen();
} else if (elem.msRequestFullscreen) {
  elem.msRequestFullscreen();
} else if (elem.mozRequestFullScreen) {
  elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
  elem.webkitRequestFullscreen();
}

---

나는 이것이 매우 오래된 질문이라는 것을 알고 있으며 제공된 답변이 적절하다는 것을 알고 있습니다.이 활성화되어 있고 전체 화면에서 몇 가지 조사를 통해 이것을 발견했기 때문에 여기 에이 주제에 대한 업데이트 하나를 남겨 둡니다.

거기에 방법이다 "시뮬레이션" F11 키를 하지만, 자동화 할 수 없으며, 사용자가 실제로 전체 화면 모드를 실행하기 위해, 예를 들어 버튼을 클릭 할 필요가있다.

• 버튼 클릭시 전체 화면 상태 전환

  이 예 에서 사용자는 버튼을 클릭하여 전체 화면 모드로 전환 할 수 있습니다.

  트리거 역할을하는 HTML 요소 :

  <input type="button" value="click to toggle fullscreen" onclick="toggleFullScreen()">
  

  자바 스크립트 :

  function toggleFullScreen() {
    if ((document.fullScreenElement && document.fullScreenElement !== null) ||    
     (!document.mozFullScreen && !document.webkitIsFullScreen)) {
      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 {  
      if (document.cancelFullScreen) {  
        document.cancelFullScreen();  
      } else if (document.mozCancelFullScreen) {  
        document.mozCancelFullScreen();  
      } else if (document.webkitCancelFullScreen) {  
        document.webkitCancelFullScreen();  
      }  
    }  
  }
  

• 버튼 클릭시 전체 화면으로 이동

  이 예 에서는 변경없이 전체 화면 모드를 활성화 할 수 있습니다. 즉, 전체 화면으로 전환하지만 일반 화면으로 돌아가려면 F11 키를 사용해야합니다.

  트리거 역할을하는 HTML 요소 :

  <input type="button" value="click to go fullscreen" onclick="requestFullScreen()">
  

  자바 스크립트 :

  function requestFullScreen() {
  
    var el = document.body;
  
    // 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}");
      }
    }
  }
  

---

이 주제에 대한 유용한 정보와 함께 찾은 출처 :

Mozilla 개발자 네트워크

Javascript 전체 화면 창에서 만드는 방법 (화면 전체 확장)

JavaScript를 통해 F11 키 이벤트를 사용하여 브라우저를 전체 화면으로 만드는 방법

Chrome Fullscreen API

jQuery 전체 화면 이벤트 플러그인, 버전 0.2.0

jquery-fullscreen-plugin

---

짧은 개인 북마크릿 버전

javascript: document.body.webkitRequestFullScreen(); 

전체 화면으로 이동 ←이 링크를 북마크 바로 드래그하여 북마크를 만들 수 있지만 나중에 URL을 수정해야 javascript합니다. 단일 슬래시를 포함하여 이전의 모든 항목을 삭제합니다 . […]http://delete_me/javascript:

This works for me in Google Chrome. You have to test whether it works in your environment and otherwise use a different wording of the function call, e.g. javascript:document.body.requestFullScreen(); – see the other answers for the possible variants.

_{Based on the answers by @Zuul and @default – thanks!}

---

If you want to switch the whole tab to fullscreen (just like F11 keypress) document.documentElement is the element you are looking for:

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();
    }
}

---

I tried other answers on this question, and there are mistakes with the different browser APIs, particularly Fullscreen vs FullScreen. Here is my code that works with the major browsers (as of Q1 2019) and should continue to work as they standardize.

function fullScreenTgl() {
    let doc=document,elm=doc.documentElement;
    if      (elm.requestFullscreen      ) { (!doc.fullscreenElement   ? elm.requestFullscreen()       : doc.exitFullscreen()        ) }
    else if (elm.mozRequestFullScreen   ) { (!doc.mozFullScreen       ? elm.mozRequestFullScreen()    : doc.mozCancelFullScreen()   ) }
    else if (elm.msRequestFullscreen    ) { (!doc.msFullscreenElement ? elm.msRequestFullscreen()     : doc.msExitFullscreen()      ) }
    else if (elm.webkitRequestFullscreen) { (!doc.webkitIsFullscreen  ? elm.webkitRequestFullscreen() : doc.webkitCancelFullscreen()) }
    else                                  { console.log("Fullscreen support not detected.");                                          }
    }

---

Here are a couple of ways to do that:

• The JavaScript Source: Navigation: Full Screen Window
• Javascript to open a full screen window

I'd suggest, provide a popup asking the user if s/he wants to go full screen and then call this javascript accordingly.

---

//set height of html
$("html").css("height", screen.height);
//set width of html
$("html").css("width", screen.width);
//go to full screen mode
document.documentElement.webkitRequestFullscreen();

---

var elem = document.getElementById("myvideo");
function openFullscreen() {
  if (elem.requestFullscreen) {
      elem.requestFullscreen();
  } else if (elem.mozRequestFullScreen) { /* Firefox */
      elem.mozRequestFullScreen();
  } else if (elem.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
      elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE/Edge */
      elem.msRequestFullscreen();
  }
}
//Internet Explorer 10 and earlier does not support the msRequestFullscreen() method.

참고URL : https://stackoverflow.com/questions/3900701/onclick-go-full-screen