Criar Web, manuais e recursos para desenvolvimento web
Manuais
Programas
FAQS
Diretório
Comunidade
  Inicio > Manuais > Workshop de Javascript
SEÇÕES
Manuais relacionados
+Workshop de Javascript
Categorias
+Scripts em Javascript

Índice do Manual Workshop de Javascript
+ Efeitos rápidos com Javascript
+ Abertura e configuração de popups com Javascript
+ Acessso por senha Javascript
+ Rollover com Javascript
+ Navegador dinâmico Javascript
+ Navegador desdobrável
+ Navegador desdobrável com frames
+ Texto em movimento na barra de estado
+ Marcar ou desmarcar todos os checkboxes de um formulário com Javascript
+ Desabilitar o menu contextual do navegador com Javascript
+ Relógio em Javascript
+ Scripts diferentes para cada navegador
+ Tamanho dos campos relativo ao navegador
+ Estilos diferentes para cada navegador
+ Tabela de cores com Javascript
+ Sub-menu em outra janela
+ Degradê de cor Javascript
+ Validar inteiro no campo de formulário
+ Exemplos de funcionamento da classe String
+ Exemplo de funcionamento de Date
+ Link aleatório Javascript
+ Geração de números aleatórios Javascript
+ Comprovar se as senhas são iguais
+ Ex. de trabalho com formulários. Calculadora simples
+ Enviar ao navegador a outra página se não tiver Javascript
+ Confirmação de envio de formulário
+ Javascript para se posicionar em um select
+ Inibir um campo texto de formulário com Javascript
+ Camadas com Internet Explorer 5, 6, Netscape 6, 7 e Opera
+ Mostrar e ocultar camadas com IE 5,6 NS 6,7
+ Movimento de Camadas com IE 5,6 NS 6,7
+ Escritura nas Camadas com IE 5, 6, NS 6, 7
+ Como iluminar tabelas, células ou filas
+ Inibir radio button com Javascript
+ Atualizar dois frames com um só link
+ Calcular a idade em Javascript
+ Iluminar formulários com CSS e Javascript
+ Autozoom de texto com Javascript
+ Javascript para evitar que a página se mostre em um frame
+ Elementos de formulário select associados
+ Conta os caracteres escritos em um textarea
+ Passo de parâmetros em HTML com client-side Javascript
+ Moldura dinâmica em Javascript com texto que muda
+ Criação de gráficos de barras com Javascript
+ Jogos em Javascript
+ Cross-Browser. DHTML compatível com todos os navegadores.
+ HTML Area. Editor WYSIWYG
+ Ocultar um e-mail de um link para evitar o spam
+ Função em Javascript para a inserção de datas
+ DHTML Calendar
+ Gerar uma cor aleatória com Javascript
+ A aprendizagem na Internet
+ Menu Dinâmico com Javascript
+ Página que muda aleatoriamente a cor de fundo
+ Script de recarregamento da página com Javascript
+ Mudar a cor às células de uma tabela com Javascript
+ Pop-ups DHTML – OpenPopups
+ Validar a extensão de um arquivo a subir com Javascript
+ Detectar a resolução da tela do usuário com Javascript
+ Esconder a URL de um link na barra de estado
+ Como integrar conteúdo RSS em minha página?
+ Fazer com que um iframe se ajuste à altura de uma janela com Javascript
+ É vantajoso o uso de ParseInt para validar números?
+ Efeito para desabilitar/habilitar o fundo da Página
+ Validar número de checkbox marcados com Javascript
+ Evitar que um textarea supere um número de caracteres permitidos

Descrição dos capítulos

Parceiros
- CSS para Web Design
- S.O.S Designers
- Slackware-Brasil
- Crie seu Web site
- Oficina da Net

Atualizar dois frames com um só link

Exemplo de controle de frames mediante Javascript no qual,clicando um só link, se atualizam duas páginas distintas contidas em dois frames.


Com o que já sabemos sobre o controle de frames, podemos realizar um exemplo para consolidar os conhecimentos. Trata-se de um exercício muito simples para conseguir que, ao clicar um link, se atualize a página contida em dois frames diferentes.

Como um link só serve para atualizar o conteúdo de um frame, necessitaremos executar umas sentenças javascript que sim nos permitam atualizar dois frames de uma vez.

Se não se entende o objetivo perseguido neste exemplo, podemos vê-lo em funcionamento em uma página a parte.

Comecemos vendo a declaração de frames, que não tem nenhuma complicação pois é simplesmente um código HTML que podemos aprender a programar nos artigos dedicados a frames do manual de HTML.

<html>
<head>
    <title>Exemplo de frames numero 1</title>
</head>
<frameset rows="50%,*">
    <frame name="frame1" src="pagina1.html" marginwidth="10" marginheight="10" scrolling="auto" frameborder="0">
    <frame name="frame2" src="pagina2.html" marginwidth="10" marginheight="10" scrolling="auto" frameborder="0">
</frameset>
</html>

Agora vejamos o código do primeiro dos frames, que é o que tem a função Javascript para controlar os frames.

<html>
<head>
    <title>Pagina 1</title>
<script language="JavaScript">
function atualiza_2_frames(){
    window.parent.frames[1].location="http://www.google.com"
    window.location="http://www.yahoo.com"
}
</script>
</head>
<body bgcolor="#ff9999">
<br>
<br>
<a href="javascript:atualiza_2_frames()">Atualiza dois frames com um so link</a>
</body>
</html>

Ao clicar o link se chama a uma função, colocada no cabeçalho da página, por comodidade e para evitar ter que escrever várias sentenças no atributo href do link.

A função, onde verdadeiramente está o miolo do exercício, é extremamente simples. A primeira sentença acessa ao frame colocado em segundo lugar (que tem o índice 1) e atualiza sua propriedade location, que é a URL da página que se está visualizando. Neste caso coloca a web de Google em tal frame, embora seja indiferente o que desejemos colocar e poderíamos ter situado um endereço com um caminho relativo ao documento atual.

Na segunda sentença acessamos diretamente à propriedade location do objeto window, porque desejamos atualizar o mesmo frame onde está colocado o script. Poderíamos ter utilizado uma sentença como a seguinte:

window.parent.frames[0].location=" http://www.yahoo.com "

Porém, neste caso não é necessário acessar à declaração de frames e logo ao frame 0 porque, como dizia, já estamos nele.

Por último vejamos o código do segundo frame, que não tem nada de especial.

<html>
<head>
    <title>Pagina 1</title>
</head>
<body bgcolor="#9999ff">
<br>
<br>
Este é o corpo do frame 2, que tem índice 1 no vetor de frames
</body>
</html>

Pode-se ver o exemplo em funcionamento em uma página a parte.

Autoria e outras referências sobre este artigo

Manuais relacionados com este artigo
Dentro de Workshop de Javascript
Seguinte: Calcular a idade em Javascript
Anterior: Inibir radio button com Javascript
< Índice de Workshop de Javascript

Categorias relacionadas
Através das categorias do nosso diretório podem ser encontrados outros tipos de recursos relacionados com este artigo:
+ Entrar em Scripts em Javascript


Comentário sem rever
Entre os comentários não revistos podem ter alguns interessantes que tenham sido enviado recentemente.
 Foi encontrado um comentário sem rever

VerVer os comentários não revistos

Sobre nós | Copyright | Anuncie | Entrar em contato <criarweb>

Hospedado por Hostnet Hospedagem de Sites