O objeto window é o objeto de nível superior no modelo de objeto do navegador JavaScript e contém vários métodos e propriedades comuns:
1 Abra uma nova janela
Copie o código do código da seguinte forma:
window.open(pageURL,nome,parâmetros)
em:
pageURL é o caminho da janela filha
nome é o identificador da janela filho
Parâmetros são parâmetros de janela (cada parâmetro é separado por vírgulas)
como:
Copie o código do código da seguinte forma:
window.open("http://www.cnblogs.com/zhouhb/","open",'height=100,width=400,top=0,left=0,toolbar=no,menubar=no,scrollbars= não, redimensionável = não, localização = não, status = não');
2 Abra a janela modal
Copie o código do código da seguinte forma:
window.showModalDialog("http://www.cnblogs.com/zhouhb/","open","toolbars=0;width=200;height=200");
3 Feche a janela sem abrir a caixa de prompt
Se a página web não for aberta através de um programa de script (window.open()), antes de chamar o script window.close() para fechar a janela, o objeto window.opener deve ser definido como nulo, caso contrário o navegador (IE7, IE8) irá aparecer um OK Fechar a caixa de diálogo.
Copie o código do código da seguinte forma:
<linguagem script="javaScript">
função fecharJanela()
{
janela.opener = null;
window.open('', '_self', '');
janela.close();
}
</script>
<input type='button' value='Fechar janela' onClick="closeWindow()">
ou
<input type="button" value="Fechar janela" onClick="window.opener = null;
window.open('', '_self', '');window.close()">
Para fechar a janela do quadro
Copie o código do código da seguinte forma:
<linguagem script="javaScript">
função fecharJanela()
{
janela.opener = null;
window.open('', '_top', '');
window.parent.close();
}
</script>
4 uso do objeto de localização
Copie o código do código da seguinte forma:
window.location.reload(); //Atualiza a página atual
window.location.href="http://www.cnblogs.com/zhouhb/"; //Carregar outras páginas
5 Uso do objeto histórico
Copie o código do código da seguinte forma:
window.history.go(1); //Avançar
window.history.go(-1); //Voltar
6 O formulário filho passa valores para o formulário pai
6.1 Método simples
(1) Abra o subformulário no formulário pai
Copie o código do código da seguinte forma:
var str=window.showModalDialog("s.html");
if(str!=nulo)
{
var v=document.getElementById("v");
v.valor+=str;
}
(2) Código do subformulário
Copie o código do código da seguinte forma:
var v=document.getElementById("v");
window.parent.returnValue=v.value;
janela.close();
Além disso, para a janela aberta por showModalDialog, você também pode passar valores através de dialogArguments:
Código da janela pai:
Copie o código do código da seguinte forma:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<cabeça>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sem título</title>
<script type="texto/javascript">
função abrirdialog()
{
window.showModalDialog("child.html",window,"win","resable=false");//Aqui o objeto janela é passado como parâmetro
}
</script>
</head>
<corpo>
<formulário>
<input type="text" id="nome" />
<input type="button" id="open" value="open" onclick="opendialog()"/>
</form>
</body>
</html>
Código da subjanela:
Copie o código do código da seguinte forma:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<cabeça>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sem título</title>
<script type="texto/javascript">
função updateParent()
{
var pwin=window.dialogArguments;//A janela filha obtém os parâmetros passados
if(pwin!=indefinido)
{
pwin.document.getElementById("nome").value=document.getElementById("nome").valor;
}
}
</script>
</head>
<corpo>
<formulário>
<input type="text" id="nome" />
<input type="button" id="update" value="Atualizar janela pai" onclick="updateParent()"/>
</form>
</body>
</html>
Para a janela aberta por showModalDialog, você também pode passar o valor através de window.returnValue:
Janela principal:
Copie o código do código da seguinte forma:
<SCRIPT type="text/javascript">
função openWindow(){
var bankCard=window.showModalDialog("counter.html","","dialogWidth=400px;dialogHeight=200px");
alert("A senha do seu cartão bancário é "+bankCard+"/n");
}
</SCRIPT>
(2) Janela aberta
Copie o código do código da seguinte forma:
<CABEÇA>
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE>Exercícios de janela</TITLE>
<SCRIPT type="text/javascript" idioma="javascript">
função fecharJanela(){
window.returnValue=document.myform.cardPass.value;
janela.close();
}
</SCRIPT>
</HEAD>
<CORPO>
<FORM name="meuform" action="" método="post">
Informações da conta:<BR>
Por favor, guarde as informações da sua conta corretamente para evitar perdas<BR>
Número da conta: <INPUT name="cardNum" type="text" size="40"><BR>
Senha: <INPUT name="cardPass" type="password" size="45"><BR>
<INPUT type="button" name="btn" value="Confirm" onClick="closeWindow()">
</FORM>
</BODY>
6.2 Uma introdução mais detalhada
Como todos sabemos, a função window.open() pode ser usada para abrir uma nova janela, então como passar o valor para o formulário pai no formulário filho. Na verdade, você pode obter a referência do formulário pai através da janela? .abridor.
Por exemplo, se criarmos um novo formulário FatherPage.htm:
Copie o código do código da seguinte forma:
<script type="texto/javascript">
funçãoOpenChildWindow()
{
window.open('ChildPage.htm');
}
</script>
<input type="text" id="txtInput" />
<input type="button" value="OpenChild" onclick="OpenChildWindow()" />
Então, em ChildPage.htm, você pode acessar os elementos no formulário pai por meio de window.opener:
Copie o código do código da seguinte forma:
<script type="texto/javascript">
função SetValue()
{
window.opener.document.getElementById('txtInput').value
=document.getElementById('txtInput').valor;
janela.close();
}
</script>
<input type="text" id="txtInput" />
<input type="button" value="SetFather" onclick="SetValue()" />
Na verdade, ao abrir o subformulário, também podemos atribuir valores aos elementos do subformulário, pois a função window.open também retornará uma referência ao subformulário, então FatherPage.htm pode ser modificado como:
Copie o código do código da seguinte forma:
<script type="texto/javascript">
função OpenChildWindow()
{
var filho = window.open('ChildPage.htm');
filho.document.getElementById('txtInput').valor
=document.getElementById('txtInput').valor;
}
</script>
<input type="text" id="txtInput" />
<input type="button" value="OpenChild" onclick="OpenChildWindow()" />
Ao determinar se a referência do subformulário está vazia, também podemos controlá-lo para abrir apenas um subformulário:
Copie o código do código da seguinte forma:
<script type="texto/javascript">
var filho
funçãoOpenChildWindow()
{
se(!criança)
filho = janela.open('ChildPage.htm');
filho.document.getElementById('txtInput').valor
=document.getElementById('txtInput').valor;
}
</script>
<input type="text" id="txtInput" />
<input type="button" value="OpenChild" onclick="OpenChildWindow()" />
Isso por si só não é suficiente. Ao fechar o formulário filho, a variável filho do formulário pai também deve ser limpa. Caso contrário, o formulário filho não poderá ser reaberto após ser aberto e fechado:
Copie o código do código da seguinte forma:
<body onunload="Descarregar()">
<script type="texto/javascript">
função SetValue()
{
window.opener.document.getElementById('txtInput').value
=document.getElementById('txtInput').valor;
janela.close();
}
funçãoDescarregar()
{
janela.opener.child=null;
}
</script>
<input type="text" id="txtInput" />
<input type="button" value="SetFather" onclick="SetValue()" />
</body>