Exemplos de objetos de navegador JavaScript

Índice

    Mostrar índice

Exemplos de uso de JavaScript para acessar e manipular os objetos do navegador.

Objeto de janela

Abra uma nova janela ao clicar em um botão

<!DOCTYPE html>
<html>
<head>
<script>
function openWin() {
  window.open("https://www.w3schools.com");
}
</script>
</head>
<body>

<form>
  <input type="button" value="Open Window" onclick="openWin()">
</form>

</body>
</html>

Abra uma nova janela e controle sua aparência

<!DOCTYPE html>
<html>
<head>
<script>
function openWin() {
  window.open("https://www.w3schools.com","_blank","toolbar=yes, location=yes, directories=no, status=no, menubar=yes, scrollbars=yes, resizable=no, copyhistory=yes, width=400, height=400");
}
</script>
</head>
<body>

<form>
  <input type="button" value="Open Window" onclick="openWin()">
</form>

</body>
</html>

Desfocar e focar uma nova janela

<!DOCTYPE html>
<html>
<head>
<script>
var myWindow;
function openWin() {
  myWindow = window.open("", "", "width=400, height=200");
  myWindow.blur();
}
function blurWin() {
  myWindow.blur();
}
function focusWin() {
  myWindow.focus();
}
</script>
</head>
<body>

<input type="button" value="Open new window" onclick="openWin()">
<input type="button" value="Blur new window" onclick="blurWin()">
<input type="button" value="Focus new window" onclick="focusWin()">

</body>
</html>

Feche a nova janela

<!DOCTYPE html>
<html>
<head>
<script>
var myWindow;
function openWin() {
  myWindow = window.open("", "", "width=400, height=200");
}

function closeWin() {
  myWindow.close();
}
</script>
</head>
<body>

<input type="button" value="Open 'myWindow'" onclick="openWin()" />
<input type="button" value="Close 'myWindow'" onclick="closeWin()" />

</body>
</html>

Verifica se a nova janela foi fechada ou não

<!DOCTYPE html>
<html>
<head>

<script>
var myWindow;
function openWin() {
  myWindow = window.open("", "", "width=400 ,height=200");
}

function closeWin() {
  if (myWindow) {
    myWindow.close();
  }
}

function checkWin() {
  msg = ""
  if (!myWindow) {
    msg = "was never opened";
  } else { 
    if (myWindow.closed) { 
      msg = "is closed";
    } else {
      msg = "is open";
    }
  
  }
  document.getElementById("msg").innerHTML = 
  "myWindow " + msg;
}
</script>

</head>
<body>

<button onclick="openWin()">Open myWindow</button>
<button onclick="closeWin()">Close myWindow</button>
<button onclick="checkWin()">Is myWindow open?</button>

<br><br>
<div id="msg"></div>

</body>
</html>

Escreva algum texto na janela de origem (pai)

<!DOCTYPE html>
<html>
<head>
<script>
function openWin() {
  var myWindow = window.open("", "", "width=400, height=200");
  myWindow.opener.document.getElementById("demo").innerHTML = 
  "A new window has been opened.";
}
</script>
</head>
<body>

<button onclick="openWin()">Open myWindow</button>

<p id="demo"></p>

</body>
</html>

Mova a nova janela em relação à sua posição atual

<!DOCTYPE html>
<html>
<head>
<script>
var myWindow;
function openWin() {
  myWindow=window.open("", "", "width=400, height=200");
}
function moveWin() {
  myWindow.moveBy(250, 250)
}
</script>
</head>
<body>

<input type="button" value="Open myWindow" onclick="openWin()" />
<br><br>
<input type="button" value="Move myWindow" onclick="moveWin()" />

</body>
</html>

Mova a nova janela para a posição especificada

<!DOCTYPE html>
<html>
<head>
<script>
var myWindow;
function openWin() {
  myWindow=window.open("", "", "width=400, height=200");
}

function moveWin() {
  myWindow.moveTo(300, 0);
  myWindow.focus();
}
</script>
</head>
<body>

<input type="button" value="Open myWindow" onclick="openWin()" />
<br><br>
<input type="button" value="Move myWindow" onclick="moveWin()" />

</body>
</html>

Imprimir a página atual

<!DOCTYPE html>
<html>
<head>
<script>
function printPage() {
  window.print();
}
</script>
</head>
<body>

<input type="button" value="Print this page" onclick="printPage()" />

</body>
</html>

Redimensionar uma janela pelos pixels especificados

<!DOCTYPE html>
<html>
<head>
<script>
var w;
function openwindow() {
  w = window.open('','', 'width=100,height=100');
  w.focus();
}

function myFunction() {
  w.resizeBy(50, 50);
  w.focus();
}

</script>
</head>
<body>

<button onclick="openwindow()">Create window</button>
<button onclick="myFunction()">Resize window</button>

</body>
</html>

Redimensionar uma janela para um tamanho especificado

<!DOCTYPE html>
<html>
<head>
<script>
var w;
function openwindow() {
  w = window.open('','', 'width=100,height=100');
  w.focus();
}

function myFunction() {
  w.resizeTo(500, 500);
  w.focus();
}

</script>
</head>
<body>

<button onclick="openwindow()">Create window</button>
<button onclick="myFunction()">Resize window</button>

</body>
</html>

Role o conteúdo pelo número especificado de pixels

<!DOCTYPE html>
<html>
<head>
<script>
function scrollWindow() {
  window.scrollBy(0, 10);
}
</script>
</head>
<body>


<input type="button" onclick="scrollWindow()" value="Scroll" />

<h2>Reserved Words</h2>
<hr>
<p>You cannot use reserved words as variables, labels, or function names:</p>
<hr>
<br>
abstract<br><br>
arguments<br><br>
boolean<br><br>
break<br><br>
byte<br><br>
case<br><br>
catch<br><br>
char<br><br>
class<br><br>
const<br><br>
continue<br><br>
debugger<br><br>
default<br><br>
delete<br><br>
do<br><br>
double<br><br>
else<br><br>
enum<br><br>
eval<br><br>
export<br><br>
extends<br><br>
false<br><br>
final<br><br>
finally<br><br>
float<br><br>
for<br><br>
function<br><br>
goto<br><br>
if<br><br>
implements<br><br>
import<br><br>
in<br><br>
instanceof<br><br>
int<br><br>
interface<br><br>
let<br><br>
long<br><br>
native<br><br>
new<br><br>
null<br><br>
package<br><br>
private<br><br>
protected<br><br>
public<br><br>
return<br><br>
short<br><br>
static<br><br>
super<br><br>
switch<br><br>
synchronized<br><br>
this<br><br>
throw<br><br>
throws<br><br>
transient<br><br>
true<br><br>
try<br><br>
typeof<br><br>
var<br><br>
void<br><br>
volatile<br><br>
while<br><br>
with<br><br>
yield<br><br>

</body>
</html>

Role o conteúdo para uma posição especificada

<!DOCTYPE html>
<html>
<head>
<script>
function scrollWindow() {
  window.scrollTo(0, 100);
}
</script>
</head>
<body>

<input type="button" onclick="scrollWindow()" value="Scroll" />

<h2>Reserved Words</h2>
<hr>
<p>You cannot use reserved words as variables, labels, or function names:</p>
<hr>
<br>
abstract<br><br>
arguments<br><br>
boolean<br><br>
break<br><br>
byte<br><br>
case<br><br>
catch<br><br>
char<br><br>
class<br><br>
const<br><br>
continue<br><br>
debugger<br><br>
default<br><br>
delete<br><br>
do<br><br>
double<br><br>
else<br><br>
enum<br><br>
eval<br><br>
export<br><br>
extends<br><br>
false<br><br>
final<br><br>
finally<br><br>
float<br><br>
for<br><br>
function<br><br>
goto<br><br>
if<br><br>
implements<br><br>
import<br><br>
in<br><br>
instanceof<br><br>
int<br><br>
interface<br><br>
let<br><br>
long<br><br>
native<br><br>
new<br><br>
null<br><br>
package<br><br>
private<br><br>
protected<br><br>
public<br><br>
return<br><br>
short<br><br>
static<br><br>
super<br><br>
switch<br><br>
synchronized<br><br>
this<br><br>
throw<br><br>
throws<br><br>
transient<br><br>
true<br><br>
try<br><br>
typeof<br><br>
var<br><br>
void<br><br>
volatile<br><br>
while<br><br>
with<br><br>
yield<br><br>

</body>
</html>

Janela explicada

Objeto de tela

A tela do visitante: Largura

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 
"Screen width is " + screen.width;
</script>

</body>
</html>

A tela do visitante: Altura

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 
"Screen height is " + screen.height;
</script>

</body>
</html>

A tela do visitante: Largura Disponível

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 
"Available screen width is " + screen.availWidth;
</script>

</body>
</html>

A tela do visitante: Altura Disponível

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 
"Available screen height is " + screen.availHeight;
</script>

</body>
</html>

A tela do visitante: profundidade de cor

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 
"Screen color depth is " + screen.colorDepth;
</script>

</body>
</html>

A tela do visitante: profundidade de pixels

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 
"Screen pixel depth is " + screen.pixelDepth;
</script>

</body>
</html>

Tela explicada

Objeto de localização

Retorne o nome do host e a porta da URL atual

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript</h2>

<h3>The window.location object</h3>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 
"Page hostname is: " + window.location.hostname;
</script>

</body>
</html>

Retorne o URL inteiro da página atual

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript</h2>

<h3>The window.location object</h3>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 
"The full URL of this page is:<br>" + window.location.href;
</script>

</body>
</html>

Retorne o nome do caminho da URL atual

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript</h2>

<h3>The window.location object</h3>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
"Page path is: " + window.location.pathname;
</script>

</body>
</html>

Retornar a parte do protocolo do URL atual

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript</h2>

<h3>The window.location object</h3>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
"The page protocol is: " + window.location.protocol;
</script>

</body>
</html>

Carregar um novo documento

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript</h2>

<h3>The window.location object</h3>

<input type="button" value="Load new document" onclick="newDoc()">

<script>
function newDoc() {
  window.location.assign("https://www.w3schools.com")
}
</script>

</body>
</html>

Substitua o documento atual

<!DOCTYPE html>
<html>
<body>

<button onclick="window.location.replace('https://www.w3schools.com')">
Replace document</button>

</body>
</html>

Saia de um quadro

<!DOCTYPE html>
<html>
<head>
<script>
function breakout() {
  if (window.top != window.self) {
    window.top.location = "tryjs_breakout.htm";
  }
}
</script>
</head>
<body>

<input type="button" onclick="breakout()" value="Break out of frame!">

</body>
</html>

Localização explicada

Objeto histórico

Exibir o número de URLs na lista de histórico

<!DOCTYPE html>
<html>
<body>

<p>Display the number of URLs in the history list:</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
function myFunction() {
  document.getElementById("demo").innerHTML = history.length;
}
</script>

</body>
</html>

Crie um botão Voltar em uma página

<!DOCTYPE html>
<html>
<head>
<script>
function goBack() {
  window.history.back()
}
</script>
</head>
<body>

<button onclick="goBack()">Go Back</button>

<p>Clicking on the Back button here will not result in any action, because there is no previous URL in the history list.</p>

</body>
</html>

Crie um botão de avanço em uma página

<!DOCTYPE html>
<html>
<head>
<script>
function goForward() {
  window.history.forward()
}
</script>
</head>
<body>

<button onclick="goForward()">Go Forward</button>

<p>Clicking on the Forward button here will not result in any action, because there is no next URL in the history list.</p>

</body>
</html>

Carregue um URL específico da lista de histórico

<!DOCTYPE html>
<html>
<head>
<script>
function goBack() {
  window.history.go(-2)
}
</script>
</head>
<body>

<button onclick="goBack()">Go 2 pages back</button>

<p>Clicking on the "Go 2 pages back" button here will not result in any action, because there is no previous URL in the history list.</p>

</body>
</html>

História explicada

Objeto Navegador

Os cookies estão habilitados no navegador do visitante?

<!DOCTYPE html>
<html>
<body>

<h2>The Navigator Object</h2>

<p>The cookieEnabled property returns true if cookies are enabled:</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
"navigator.cookieEnabled is " + navigator.cookieEnabled;
</script>

</body>
</html>

Qual é o nome do navegador do visitante?

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Navigator</h2>

<p>The appCodeName property returns the code name of the browser.</p>

<p>Do not rely on it! "Mozilla" is the application code name for Chrome, Firefox, IE, Safari, and Opera.</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 
"navigator.appCodeName is " + navigator.appCodeName;
</script>

</body>
</html>

Qual é o nome do mecanismo do navegador do visitante?

<!DOCTYPE html>
<html>
<body>

<h2>The Navigator Object</h2>

<p>The product property returns the product name of the browser.</p>

<p>Do not rely on it! Most browsers returns "Gecko" as product name!</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
"navigator.product is " + navigator.product;
</script>

</body>
</html>

Quais são as informações da versão do navegador do visitante?

<!DOCTYPE html>
<html>
<body>

<h2>The Navigator Object</h2>

<p>The appVersion property returns version information about the browser:</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = navigator.appVersion;
</script>

</body>
</html>

Quais são as informações do agente do usuário do navegador do visitante?

<!DOCTYPE html>
<html>
<body>

<h2>The Navigator Object</h2>

<p>The userAgent property returns the user-agent header sent by the browser to the server:</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
navigator.userAgent;
</script>

</body>
</html>

Qual é a plataforma do navegador do visitante?

<!DOCTYPE html>
<html>
<body>

<h2>The Navigator Object</h2>

<p>The platform property returns the browser platform (operating system):</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 
"navigator.platform is " + navigator.platform;
</script>

</body>
</html>

Qual é o idioma do navegador do visitante?

<!DOCTYPE html>
<html>
<body>

<h2>The Navigator Object</h2>

<p>The language property returns the browser's language:</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
"navigator.language is " + navigator.language;
</script>

</body>
</html>

O Java está habilitado no navegador do visitante?

<!DOCTYPE html>
<html>
<body>

<h2>The Navigator Object</h2>

<p>The javaEnabled() method returns true if Java is enabled:</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
"javaEnabled is " + navigator.javaEnabled();
</script>

</body>
</html>

Navegador

Caixas pop-up

Exibir uma caixa de alerta

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Alert</h2>

<button onclick="myFunction()">Try it</button>

<script>
function myFunction() {
  alert("I am an alert box!");
}
</script>

</body>
</html>

Demonstre quebras de linha em uma caixa de alerta

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript</h2>
<p>Line-breaks in a popup box.</p>

<button onclick="alert('Hello\nHow are you?')">Try it</button>

</body>
</html>

Exibir uma caixa de confirmação

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Confirm Box</h2>


<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
function myFunction() {
  var txt;
  if (confirm("Press a button!")) {
    txt = "You pressed OK!";
  } else {
    txt = "You pressed Cancel!";
  }
  document.getElementById("demo").innerHTML = txt;
}
</script>

</body>
</html>

Exibir uma caixa de prompt

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Prompt</h2>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
function myFunction() {
  let text;
  let person = prompt("Please enter your name:", "Harry Potter");
  if (person == null || person == "") {
    text = "User cancelled the prompt.";
  } else {
    text = "Hello " + person + "! How are you today?";
  }
  document.getElementById("demo").innerHTML = text;
}
</script>

</body>
</html>

Pop-up explicado

Tempo

Tempo simples

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Timing</h2>

<p>Click "Try it". Wait 3 seconds, and the page will alert "Hello".</p>

<button onclick="setTimeout(myFunction, 3000);">Try it</button>

<script>
function myFunction() {
  alert('Hello');
}
</script>

</body>
</html>

Outro momento simples

<!DOCTYPE html>
<html>
<body>

<h2>JavaSript setTimeout()</h2>

<p id="demo">I will display when two, four, and six seconds have passed.</p>

<script>
setTimeout(myTimeout1, 2000) 
setTimeout(myTimeout2, 4000) 
setTimeout(myTimeout3, 6000) 

function myTimeout1() {
  document.getElementById("demo").innerHTML = "2 seconds";
}
function myTimeout2() {
  document.getElementById("demo").innerHTML = "4 seconds";
}
function myTimeout3() {
  document.getElementById("demo").innerHTML = "6 seconds";
}
</script>

</body>
</html>

Evento de cronometragem em um loop infinito

<!DOCTYPE html>
<html>
<body>

<button onClick="setInterval(myCounter, 1000)">Start counter!</button>

<p id="demo">Click on the button above and I will count forever.</p>

<script>
var c = 0;
function myCounter() {
  document.getElementById("demo").innerHTML = ++c;
}
</script> 

</body>
</html>

Evento de cronometragem em loop infinito - com um botão Parar

<!DOCTYPE html>
<html>
<body>

<button onClick="myTimer = setInterval(myCounter, 1000)">Start counter!</button>

<p id="demo">Click on the button above and I will count forever.</p>

<button onClick="clearInterval(myTimer)">Stop counter!</button>

<script>
var c = 0;
function myCounter() {
  document.getElementById("demo").innerHTML = ++c;
}
</script> 

</body>
</html>

Um relógio criado com um evento de cronometragem

<!DOCTYPE html>
<html>

<body onload="startTime()">

<h2>JavaScript Clock</h2>

<div id="txt"></div>

<script>
function startTime() {
  const today = new Date();
  let h = today.getHours();
  let m = today.getMinutes();
  let s = today.getSeconds();
  m = checkTime(m);
  s = checkTime(s);
  document.getElementById('txt').innerHTML =  h + ":" + m + ":" + s;
  setTimeout(startTime, 1000);
}

function checkTime(i) {
  if (i < 10) {i = "0" + i};  // add zero in front of numbers < 10
  return i;
}
</script>

</body>
</html>

Defina e pare um cronômetro com setInterval() e clearInterval()

<!DOCTYPE html>
<html>
<body>

<p id="demo">Clock</p>

<button onclick="clearInterval(myTimer)">Stop</button>

<script>
var myTimer = setInterval(myClock, 1000);
function myClock() {
  document.getElementById("demo").innerHTML = new Date().toLocaleTimeString();
}
</script>

</body>
</html>

Tempo explicado

Biscoitos

Crie um cookie de boas-vindas

<!DOCTYPE html>
<html>
<head>
<script>
function setCookie(cname,cvalue,exdays) {
  const d = new Date();
  d.setTime(d.getTime() + (exdays*24*60*60*1000));
  let expires = "expires=" + d.toUTCString();
  document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

function getCookie(cname) {
  let name = cname + "=";
  let decodedCookie = decodeURIComponent(document.cookie);
  let ca = decodedCookie.split(';');
  for(let i = 0; i < ca.length; i++) {
    let c = ca[i];
    while (c.charAt(0) == ' ') {
      c = c.substring(1);
    }
    if (c.indexOf(name) == 0) {
      return c.substring(name.length, c.length);
    }
  }
  return "";
}

function checkCookie() {
  let user = getCookie("username");
  if (user != "") {
    alert("Welcome again " + user);
  } else {
     user = prompt("Please enter your name:","");
     if (user != "" && user != null) {
       setCookie("username", user, 30);
     }
  }
}
</script>
</head>

<body onload="checkCookie()"></body>

</html>