{"id":971,"date":"2020-08-10T15:05:29","date_gmt":"2020-08-10T18:05:29","guid":{"rendered":"https:\/\/www.joemaster.com.br\/tutoriais\/?p=971"},"modified":"2020-08-10T15:05:29","modified_gmt":"2020-08-10T18:05:29","slug":"como-abrir-tela-inteira-do-navegador-com-javascript","status":"publish","type":"post","link":"https:\/\/www.joemaster.com.br\/tutoriais\/como-abrir-tela-inteira-do-navegador-com-javascript\/","title":{"rendered":"Como abrir Tela inteira do navegador com JavaScript"},"content":{"rendered":"

Tela inteira com JavaScript
\nClique no bot\u00e3o “Abrir tela inteira” para abrir esta p\u00e1gina no modo de tela inteira. Feche-o clicando na tecla “Esc” do teclado ou no bot\u00e3o “Fechar tela inteira”.<\/p>\n

Abrir tela inteira Fechar tela inteira
\nObserva\u00e7\u00e3o: o Internet Explorer 10 e anterior n\u00e3o oferece suporte ao m\u00e9todo msRequestFullscreen ().<\/p>\n

 <\/p>\n

<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\r\n<style>\r\n\/* Chrome, Safari and Opera syntax *\/\r\n:-webkit-full-screen {\r\n  background-color: yellow;\r\n}\r\n\r\n\/* Firefox syntax *\/\r\n:-moz-full-screen {\r\n  background-color: yellow;\r\n}\r\n\r\n\/* IE\/Edge syntax *\/\r\n:-ms-fullscreen {\r\n  background-color: yellow;\r\n}\r\n\r\n\/* Standard syntax *\/\r\n:fullscreen {\r\n  background-color: yellow;\r\n}\r\n\r\n\/* Style the button *\/\r\nbutton {\r\n  padding: 20px;\r\n  font-size: 20px;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<h2>Fullscreen with JavaScript<\/h2>\r\n<p>Click on the \"Open Fullscreen\" button to open this page in fullscreen mode. Close it by either clicking the \"Esc\" key on your keyboard, or with the \"Close Fullscreen\" button.<\/p>\r\n\r\n<button onclick=\"openFullscreen();\">Open Fullscreen<\/button>\r\n<button onclick=\"closeFullscreen();\">Close Fullscreen<\/button>\r\n\r\n<script>\r\nvar elem = document.documentElement;\r\nfunction openFullscreen() {\r\n  if (elem.requestFullscreen) {\r\n    elem.requestFullscreen();\r\n  } else if (elem.mozRequestFullScreen) { \/* Firefox *\/\r\n    elem.mozRequestFullScreen();\r\n  } else if (elem.webkitRequestFullscreen) { \/* Chrome, Safari & Opera *\/\r\n    elem.webkitRequestFullscreen();\r\n  } else if (elem.msRequestFullscreen) { \/* IE\/Edge *\/\r\n    elem.msRequestFullscreen();\r\n  }\r\n}\r\n\r\nfunction closeFullscreen() {\r\n  if (document.exitFullscreen) {\r\n    document.exitFullscreen();\r\n  } else if (document.mozCancelFullScreen) {\r\n    document.mozCancelFullScreen();\r\n  } else if (document.webkitExitFullscreen) {\r\n    document.webkitExitFullscreen();\r\n  } else if (document.msExitFullscreen) {\r\n    document.msExitFullscreen();\r\n  }\r\n}\r\n<\/script>\r\n\r\n<p>Note: Internet Explorer 10 and earlier does not support the msRequestFullscreen() method.<\/p>\r\n\r\n<\/body>\r\n<\/html>\r\n\r\n<\/pre>\n


<\/center>\n
\n
\n  Ap\u00f3s clicar em Copy ⇗
O código fica pronto para testar ou colar onde quiser no  CTRL+V<\/font>\n