Esse tutorial tem como objetivo ensinar a você como fazer um iframe de uma página de um site abrir com conteúdo que não é o padrão dele, mas sim é o caminho indicado pelo link de outra página do mesmo site. Útil não? Bem, então vamos lá?
Nota: Agradeço ao meu amigo Rogério Gomes que me ensinou isso.
Certo, abre o seu editor HTML que quiser. Estou no Dreamweaver. Em um documento HTML, vamos criar os links. No caso criarei três links.
<html> <head> <title>Título</title> </head> <body> <a href="iframe.html" target="_self">Link1</a><br/> <a href="iframe.html" target="_self">Link2</a><br/> <a href="iframe.html" target="_self">Link3</a><br/> </body> </html>
Os três links tem o mesmo destino. Porém o que será feito é inserir depois do iframe.html um ? mais um número. Ficando assim:
<a href="iframe.html?1" target="_self">Link1</a><br/> <a href="iframe.html?2" target="_self">Link2</a><br/> <a href="iframe.html?3" target="_self">Link3</a><br/>
Isso irá definir o que abrir na Iframe. Veremos adiante. Salve esse arquivo como links.html. Agora crie um novo HTML e nele insira dentro da tag <body> o código:
<html> <head> <title>Título</title> </head> <body> <div style="width: 180px; height: 500px; float: left; margin-right: 20px;">A iframe ao lado abre o que o link da página anterior pede.<br/><br/> <a href="cont1.html" target="_iframe1">Link1</a><br/> <a href="cont2.html" target="_iframe1">Link2</a><br/> <a href="cont3.html" target="_iframe1">Link3</a><br/> </div> <div style="width: 400px; height: 500px; float: left;"> <script type="text/JavaScript"> validaIFrame1(); </script> </div> </body> </html>
Esse código irá criar duas divs, uma ao lado da outra. Na primeira div há três links que abrem arquivos HTML dentro da futura div que será identificada como _iframe1. Dentro da segunda div, foi inserido um JavaScript que chama uma função chamada ValidaIFrame1. Essa função virá de um arquivo JavaScript que iremos criar. Ainda nesse mesmo arquivo, insira em uma linha acima da linha aonde contém a tag </head> o seguinte:
<script language="JavaScript" type="text/javascript" src="iframe.js"></script>
Isso irá chamar o arquivo iframe.js para dentro do HTML. Iremos criar esse arquivo agora. Salve esse documento HTML como iframe.html. Volte ao arquivo links.html e insira essa linha de código acima da tag </head>. Agora em um novo documento de Javascript, copie e cole o código abaixo.
function CarregaVarsIFrame(){
area = location.search.slice(1);
if (area == "1") {var vPagina = 'cont1.html'}
if (area == "2") {var vPagina = 'cont2.html'}
if (area == "3") {var vPagina = 'cont3.html'}
viFrame1 = "<iframe allowtransparency='yes' frameborder='0' marginheight='0' marginwidth='0' scrolling='auto' id='_iframe1' name='_iframe1' height='405' width='336' src="+vPagina+"></iframe>"
viFrame2 = "<iframe allowtransparency='yes' frameborder='0' marginheight='0' marginwidth='0' scrolling='auto' id='_iframe1' name='_iframe1' height='447' width='363' src="nothing.html"></iframe>"
}
function validaIFrame1(){
CarregaVarsIFrame();
if (area != "") {document.write (viFrame1);}
if (area == "") {document.write (viFrame2);}
}
Explicarei o código:
1 – A função CarregaVarsIFrame() é criada para identificar qual HTML abrir no iframe da página iframe.html. Dentro dessa função é criado a variável “area” que procura um valor para si no endereço do link.
2 – Logo, condições (if) irão verificar o valor da variável area. Dependendo do valor, ele irá definir um valor a outra variável agora criada chamada “vPagina”, que contém o nome do arquivo html que irá abrir dentro da iframe se o valor da variável area for o escolhido.
3 – Depois dos ifs, duas variáveis chamadas de “viFrame1″ e viFrame2″ são criadas. Elas armazenarão a tag de iframe que será aberta na página iframe.html. Repare que na variável viFrame1, a propriedade src puxa o valor da variável vPagina. Já na variável viFrame2, o src dá o nome de um arquivo HTML sem ser as definidas para a variável vPagina. Nas duas tags <iframe> foi declarada as propriedades id e name, ambas com o valor “_iframe1″. Assim, se houver links no arquivo iframe.html, ele irá abri-lo na iframe sem problemas.
4 – Uma segunda função é criada, chamada de validaIFrame1(). Essa função puxa a primeira função e depois verifica com dois ifs se a variável area é diferente (!=) ou se é igual (==) a nada (“”). Se for diferente, ele escreve no HTML o valor da variável viFrame1. Se for igual, será o da variável viFrame2. Ou seja, se o link não tiver nenhum valor para a variável area (?1 ou ?2 por exemplo), ele abrirá a iframe.html com o arquivo nothing.html dentro da iframe. Agora se for definido algum valor, ele verificará o arquivo HTML para aquela variável e a usará para ser o valor da iframe.
Agora salve, esse arquivo Javascript como iframe.js.
OK! Criamos o que queriamos. Agora os links poderão abrir os HTMLs sem problemas. OPA! Só falta algo: precisamos criar quatro arquivos HTML. Então faça isso. Crie quatro arquivos e insira conteúdo neles, menos em um aonde você escreverá algo do tipo “SELECIONE UM LINK A ESQUERDA”. O três com conteúdo salve respectivamente como cont1.html, cont2.html e cont3.html. O quarto com a mensagem em caixa alta salve como nothing.html.
Pronto! Agora é só testar! Espero que tenha gostado!
Meu nome é Diego Alencar, e sou Webdesigner a mais ou menos 5 anos, sendo 2 profissionalmente. Curto rock e eletrônico e gosto de tudo que é moderno, contemporâneo, abstrato, urbano e obscuro.
SIPMA
Oi
foi dez seu tutorial do iframe, por isso peço ajuda a voce.
tenho um site com iframe e quando cai na busca de sites, aparece o endereço do site com a pagina (www.osite.com.br/link.htm) , e ao clicar só aparece a pagina (interna), como faço para redirecionar esta pagina para a principal, mas que apareça o index pois tentei fazer um refresh mas o index abre novamente dentro do iframe.
agradeço muito sua ajuda
Obrigada
SuelySS
me desculpa …. para completar …. o email anterior …
olá…..estou com o mesmo problema da suely. Preciso enviar um e-mail com o link de uma página que nao é a index….mas preciso que ela abra com todo o conteudo e nao somente com a pagina interna. agradeço seu apoio….valeuu
Boa tarde, estou tentando fazer um editor html, e parei na parte de exibir o codigo fonte no iframe, pesquisei bastante e cheguei ao ponto de usar um innerHTML para substituir o iframe por um textarea para me exibir o codigo, até ai tudo bem ele exibiu corretamente, só que eu gostaria de fazer com que ao clicar no botão novamente me mostraria o conteuno no iframe novamente, e eu não sei como jogar o conteudo do textarea para o iframe, poderia me ajudar?
o codigo javascript esta aqui embaixo:
/////////exibir html///////
//////////////////////////
var comparativo = 1;
function html(){
if (comparativo == 1){
comparativo = 2;
conteudo = document.getElementsByTagName(‘iframe’)[0];
document.getElementById(‘teste’).innerHTML = “” + conteudo.contentWindow.document.body.innerHTML; + “”;
}else{
comparativo = 1;
//cont_iframe = window.frames['editor'].document.getElementById(‘editor_html’);
document.getElementById(‘teste’).innerHTML = “”;
//restante = window.frames['editor'].conteudo.contentWindow.document.body.innerHTML;
}
}
é quase isso que preciso só que quero abrir uma url, no lugar onde tem “Link1” ao invés de “iframe.html?1″, seria “iframe.html?url=www.site.com.br” como faço isso? e esse site abriria em um iframe na págima iframe.html
Olá Tarcisio. Para isso, use o arquivo .js que está no link abaixo:
iframe_27052010.js
É isso. Abraço!
Olá Suely. Desculpa eu levar meses para responder.
Pelo que eu entendi, você quer que caso uma página que deveria abrir somente dentro de um iframe seja aberto fora dele como uma página inteira, ele deverá redirecionar para a página principal. É isso?
OK. Eu modifiquei os códigos do tutorial para você poder ver como é feito o redirecionamento. Clique no link abaixo para baixar o zip dos arquivos:
iframe_redirect.zip
Ele continua a usar o javascript do tutorial, mas junto com isso, ele lê mais duas variáveis da barra de endereço: “atual” e “iframe”.
A variável “atual” indica o endereço do arquivo para qual será redirecionado o usuário. Caso essa variável estiver vazia no endereço, ele irá para o endereço indicado no mainframe_redirect.js (no caso está o site da Google).
A variável “iframe” mostra se o redirecionamento deverá ocorrer ou não. Se no endereço estiver indicando 0 ou nada, ele fará o redirecionamento. Se estiver 1 ou qualquer outra coisa, ele não fará nada. Os valores principais, como deu para perceber, é 0 e 1.
Deixei 4 links de teste no index.html. Olhe o href de cada link para poder ver como está funcionando.
Espero que seja útil. Até!