Como atribuir âncora entre páginas? (De iframe p/ topo Index)

No index tem um link para iframe¹. Na página que é aberta no iframe¹, tem outro link para outro iframe², também do index (deve ser aberto no mesmo). É isso?

iframe¹ :seta: index

iframe¹ :seta: iframe² :seta: index

Sugiro que utilize QueryString, fica bem mais fácil de "manusear". Mas isso aqui ajuda dependendo do que tu quer:

:seta: http://forum.clubedohardware.com.br/duvida-link-iframe/612299

É assim, tenho a pagina principal "index.html"

=========================

Formato:

header

headerEsquerda

headerCentro

headerDireita

container

sideBarEsquerda

contentCentro

sideBarDireita

footer

footer2

=======================

aí, dentro de contentCentro eu coloquei um iframe que será exibido o conteúdo de praticamente todos os links de produtos e etc.

só que a hora que estou lá embaixo no iframe e clico em um link, ele só sobe até o limite do iframe e não encosta no topo da página.

É isso que estou querendo fazer. Acredito ser simples, mas estou apanhando pra conseguir.

fonte: libazar.hdfree.com.br

Coloque isso dentro do iframe nos links:

target="_top"

Coloque isso dentro do iframe nos links:target="_top"

Mas o target das páginas são para direcionar o conteúdo para o iframe.

Página Institucional por exemplo, que está lá no final da tela, o target tem que estar no iframe, se eu mudar para "_top" ele irá abrir a página inteira lá em cima, e não apenas no local definido como iframe.

Eu coloco target="iframe", ou eu coloco um ou eu coloco o outro, não dá pra ter 2 targets.

Como fazer? :ermm:

>
Sugiro que utilize QueryString, fica bem mais fácil de "manusear". Mas isso aqui ajuda dependendo do que tu quer:

:seta: http://forum.clubedohardware.com.br/duvida-link-iframe/612299

Diéssica, não sei mexer com QueryString, nem JavaScript. O conteúdo deste link que me passou não tem semelhança com aquilo que estou querendo fazer.

Deve haver um meio de eu poder voltar a página para o topo e ao mesmo tempo abrir o link clicado dentro do iframe.

Há sim esse meio. Agora que foi explicado.

Então, as âncoras não funcionam com name e sim com id (#). Substituindo name por id, tu pode fazer o seguinte:

de

<a href="bolsas.html#top" target="iframeLink" class="classSB" title="Bolsas">Bolsas</a>

vai para

<a href="#top" onclick="src=bolsas.html" target="iframeLink" class="classSB" title="Bolsas">Bolsas</a>

Não testei, mas deve funcionar. Aí eu linkei a âncora do link, que chamei com onClick (separados).

Ou então faz com Javascript (puro), chamando os links assim:

<a href="#" onclick="top(),document.all.iframeLink.src='bolsas.html'" class="classSB" title="Bolsas">Bolsas</a>

A função:

function top(){
window.scrollBy(0,0);
}

Estava faltando o '' dentro do src.

<a href="#top" onclick="src='bolsas.html'" target="iframeLink" class="classSB" title="Bolsas">Bolsas</a>

Aprendi agora com seu exemplo como usar o onclick, obrigado. Porém testei desta forma usando o "onclick" e não deu certo porque abriu a página inteira dentro do iframe interpretando como se o topo da página, fosse o topo do iframe. Parece que é mais complicado do que imaginei. <_<

Ainda tem outra dúvida que também ainda não consegui descobrir...

Como fazer pra quando eu clicar num link dentro de um iframe abrir o conteúdo na página inteira, sem abrir nova página (target="blank"), usando a mesma página.

Já o modo javascript eu não cheguei a testar.

Quando eu tiver mais tempo vou estudar javascript.

>
Estava faltando o '' dentro do src.

<a href="#top" onclick="src='bolsas.html'" target="iframeLink" class="classSB" title="Bolsas">Bolsas</a>

Aprendi agora com seu exemplo como usar o onclick, obrigado. Porém testei desta forma usando o "onclick" e não deu certo porque abriu a página inteira dentro do iframe interpretando como se o topo da página, fosse o topo do iframe. Parece que é mais complicado do que imaginei. <_<

Viajei, nem sei onde eu tava com a cabeça..

>
Ainda tem outra dúvida que também ainda não consegui descobrir...

Como fazer pra quando eu clicar num link dentro de um iframe abrir o conteúdo na página inteira, sem abrir nova página (target="blank"), usando a mesma página.

Acho que é nesse caso aí que tu usa o _top do iframe, né? Ou não?

>
Já o modo javascript eu não cheguei a testar.

Quando eu tiver mais tempo vou estudar javascript.

Nem precisa estudar, é só implementar. E funciona mesmo, foi o único que eu testei aqui...

Tenta o do JS que dá certo!

... faz com Javascript (puro), chamando os links assim:

<a href="#" onclick="top(),document.all.iframeLink.src='bolsas.html'" class="classSB" title="Bolsas">Bolsas</a>

A função:

function top(){
window.scrollBy(0,0);
}

Diéssica,

Onde eu coloco o function?

O "_top" também não deu certo, ele vai no topo do iframe, não da página.

Acredito ser possível fazer isso usando apenas o html, mas como não achei a solução, então serei obrigado a me render e vou testar o JS que você passou. :ermm:

>
Diéssica,

Onde eu coloco o function?

dentro de <script></script>, antes de </head>

 

<script>

</script>
</head>

Diéssica, não funcionou.

Quando clico no link ele vai para o topo da página mas não abre o objeto linkado dentro do iframe, seria como se eu apenas tivesse pedido ao link para ir ao topo da página em uso, sem atribuir direcionamento ao link a ser aberto dentro do iframe.

posta tudo o que tu fez

Esqueça os iframes, só te trará problemas.

>
Esqueça os iframes, só te trará problemas.

concordo parcialmente..

mas se ele não conhece php, ajax, não é agora — do nada — que ele vai conhecer. nem adianta, mais fácil ele resolver esse problema e depois ir pegando essas outras linguagens

HTML - index

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta name="Description" content="** Lí Bazar ** Bazar de artigos femininos" />
<meta name="keywords" content="mulher, mulheres, feminino, femininos, feminina, femininas, moda, beleza, lí bazar, li Bazar, aline, venda, vendas, compra, compras, comprar, artigo, artigos, artigos femininos, libazar.tk, libazar.blogspot.com, libazar.hdfree.com.br, libazar.com.br, libazar.com, libazar.net, libazar.br, libazar.org.br, libazar.net, libazar.info, blusa, blusas, calça, calças, calçado, calçados, camisa, camisas, camiseta, camisetas, acessório, acessórios, brinco, brincos, colar, colares, pulseira, pulseiras, anel, anéis, corpete, corpetes, bolsa, bolsas, lv, louis vuitton, vh, victor hugo, felix, carteira, carteiras, óculos, escuro, de sol, degradê, d&g, dolce & gabbana, dior, ray-ban, ray ban, rayban, rai-ban, rai ban, raiban, rai-bam, rai bam, raibam, ray-bam, ray bam, raybam, aviador, carrier, cartier, carrera, prada, giorgio armani, police, relógio, relógios, mk, michael kors, champion, tommy hilfiger, guess, quartz, swatch, cinto, cintos, mochila, mochilas, compra segura, reputação, bazarinne, msn, hotmail, kalibne, loja, virtual, loja virtual, postagem em 24 horas úteis, postagens em 24 horas úteis" />
<meta name="author" content="RFR WebDesign Corp." />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title> ** Lí Bazar ** Bazar de acessórios femininos </title>

<link rel="stylesheet" type="text/css" href="estilo.css" media="all" />
 <!--
 <script>
	function top(){
 window.scrollBy(0,0);
	}
</script>
 -->
</head>

<body>

<div class="header">
<div class="headerflt1">
 <a href="index.html" class="classH">
 <img alt="" src="imagens/outros/logo.png" width="50%" title="Lí Bazar" />
	</a>
</div>

<div class="headerflt2">
	<img alt="" src="imagens/outros/frete_desconto.png" width="30%" title="Simule o valor de seu frete." />
</div>

<div class="headerflt3">
	<img alt="" src="imagens/outros/compra_segura.png" style="box-shadow: 5px 5px 5px #5F4141;" width="40%" /> -
</div>
</div>

<div class="tracoheader"> </div>

<div class="container">

<div class="sideBarLeft">
	<!--
 <div class="topicos">Categorias</div>
 -->

 <div class="topicoLink">
 <p><a href="home.html#top" target="iframeLink" class="classSB">Home</a></p>
 <p>
 <!--
 <a href="#" onclick="top(),document.all.iframeLink.src='bolsas.html'" class="classSB" title="Bolsas">Bolsas</a>
 -->
 <a href="bolsas.html#top" target="iframeLink" class="classSB">Bolsas</a></p>
 <p><a href="bones.html#top" target="iframeLink" class="classSB">Bonés</a></p>
 <p><a href="carteiras.html#top" target="iframeLink" class="classSB">Carteiras</a></p>
 <p><a href="cintos.html#top" target="iframeLink" class="classSB">Cintos</a></p>
 <p><a href="colares.html#top" target="iframeLink" class="classSB">Colares</a></p>
 <p><a href="cosmeticos.html#top" target="iframeLink" class="classSB">Cosméticos</a></p>
 <p><a href="informatica.html#top" target="iframeLink" class="classSB">Informática</a></p>
 <p><a href="lencos.html#top" target="iframeLink" class="classSB">Lenços</a></p>
 <p><a href="mochilas.html#top" target="iframeLink" class="classSB">Mochilas</a></p>
 <p><a href="necessaires.html#top" target="iframeLink" class="classSB">Necessaires</a></p>
 <p><a href="oculos.html#top" target="iframeLink" class="classSB">Óculos</a></p>
 <p><a href="pastas.html#top" target="iframeLink" class="classSB">Pastas</a></p>
 <p><a href="prendedores.html#top" target="iframeLink" class="classSB">Prendedores</a></p>
 <p><a href="pulseiras.html#top" target="iframeLink" class="classSB">Pulseiras</a></p>
 <p><a href="relogios.html#top" target="iframeLink" class="classSB">Relógios</a></p>
 <p><a href="vestimentas.html#top" target="iframeLink" class="classSB">Vestimentas</a></p>
 <p><a href="institucional.html#top" target="iframeLink" class="classSB">Institucional</a></p>
	</div>

	<br />
	<br />
	<div class="topicos"> Depoimentos </div>

	<div class="depoimento">
 <div class="aliDepoimento">
 <p> "Li, chegaram as bolsas e eu amei. Mesmo. Parabéns pelo bom gosto. Um bjo, Júlia." Júlia Uzun - SP (25/04/11) </p>
 <p> "Eu provei o óculos prada!!! ficou muito lindo...você eh muito simpática" Mara Lopes - SP (23/04/11) </p>
 <p> "Liii, ficou perfeito, amei, lindo... adorei te conhecer e fazer negocio...kkk até a px, bj" Babi Caranatti - SP (18/04/11) </p>
 <p> "Liii... recebi os lençosss e ameiiii!!! São lindos!!! Obrigada flor!!" Priscila Calegari - SP (16/04/11) </p>
 <p> "Lí, chegou ontem a carteira ADOREIIIIIIIIIIIII... vou procurar uma bolsa agora" Simone Manechini - SP (13/04/11) </p>
 <p> "Oi, recebi a bolsa e a carteira... são lindas... obrigada" Ana Lídia - SP (12/04/11) </p>
 <p> "gostaria de recomendar a Lí Bazar que tem um site exclusivo para venda de bolsas lindas! Comprei um modelinho réplica da LV e amei! Fora que ela é muito ágil e atenciosa! Recomendo pra quem ama bolsas!" Vanessa Meirelles - SP (04/04/11) </p>
 </div>
	</div>

	<!--
	<div class="topicos"> Visitantes </div>

	<div class="visita">
 <script type="text/javascript" src="http://widgets.amung.us/map.js"></script>
 <script type="text/javascript">WAU_map('b4teaujqoyiv', 227, 150, 'neosat', 'star-blue')</script>
	</div>

	<div class="MSN-Stat">
 <form action="mailto:kalibne@hotmail.com" method="get">
 <input value="E-mail Me!" type="submit"/>
 </form>
	</div>
	-->
</div>

<div class="content">
	<iframe src="home.html" name="iframeLink" frameborder="0" width="100%" height="100%"></iframe>
</div>

<div class="sideBarRight"></div>

<div class="footer"></div>

</div>

<div class="footer2">

	<div class="validator">
	<a href="http://validator.w3.org/check?uri=referer">
 <img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Transitional" height="31" width="88" />
	</a>
</div>	-->

<div class="footer2-text">
	<br />Copyright© 2011-2012
	<a href="index.html#top" title="Todos os direitos reservados."><b>Lí Bazar</b></a> |
	<a href="mailto:vendas.libazar@gmail.com" title="Mande-me um e-mail."><b>E-mail</b></a> |
	<a href="institucional.html#top" target="iframeLink" title="Fale Conosco"><b>Institucional</b></a> | WebDeveloper
 <a href="mailto:consultoria24horas@gmail.com" title="Entre em contato com o WebDesigner."><b>RFR WebDesign Corp</b></a>.
	<br />
	<br />
</div>
</div>

</body>

</html>

CSS - Estilo

@charset "utf-8";
/ CSS Document /

/url(imagens/fundos/fundo4.png) #FCC/
body {

margin: 0;
background-repeat: no-repeat;
background-position: top;
background-color: #FFF;
background-image: url(imagens/fundos/header.png);
}

/ ~~ This fixed width container surrounds all other divs ~~ /

.container {
clear: both;

overflow: hidden;
background-color: transparent;

border: none;
text-align: center;
height: 1900px;
}

/ ~~ The header is not given a width. It will extend the full width of your layout. It contains an image placeholder that should be replaced with your own linked logo. ~~ /

.header {
margin: 0 auto;
overflow: hidden;
background-color: transparent;

border: none;
text-align: center;
height: 86px;
}

/ this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link /
a img {

border: none;
}

/**/

.container1 {
margin: 0 auto;
overflow: hidden;
background-color: transparent;

border: none;
text-shadow: 1px 1px 1px #999;
text-align: left;
font-family: Georgia;
font-size: 48px;
color: #F0F;
}

/**/

.container2 {
margin: 0 auto;
overflow: hidden;
background-color: transparent;

border: none;
text-shadow: 1px 1px 1px #999;
text-align: left;
font-family: Georgia;
font-size:20px;
color: #FFF;
}

/**/

.container3 {
margin: 0 auto;
overflow: hidden;
background-color: transparent;

border: none;
text-shadow: 1px 1px 1px #999;
font-family: Times New Roman;
font-size:24px;
color:#600;
}

/**/

.desconto {
margin: 0 auto;
overflow: hidden;
background-color: transparent;

border: none;
font-family: Times New Roman;
font-weight: normal;
font-size:16px;
color: #999;
}

.fltSpace {
float: left;
width: 2%;
background-color: transparent;

/**/

.headerflt1 {
float: left;
margin: 0 auto;
overflow: hidden;
background-color: transparent;

border: none;
text-align: center;
margin-top: 8px;
width: 12%;
height: 100%;
}

/**/

.headerflt2 {
float: left;
margin: 0 auto;
overflow: hidden;
background-color: transparent;

border: none;
text-align: center;
margin-top: 25px;
width: 76%;
height: 100%;
}

/**/

.headerflt3 {
float: left;
margin: 0 auto;
overflow: hidden;
background-color: transparent;

border: none;
text-align: right;
font-family: Verdana;
font-weight: bold;
font-size: 11px;
color: #999;
margin-top: 25px;
width: 12%;
height: 100%;
}

/**/

.tracoheader {
clear: both;
font-size: 1px;
background-color: #D00;
line-height: 1px;
}

/**/

.content {
float: left;
margin: 0 auto;
overflow: hidden;
background-color: transparent;

border: none;
width:76%;
height: 100%;
}

/**/

.sideBarRight {
float: left;
margin: 0 auto;
overflow: hidden;
background-color: transparent;

border: none;
text-align: right;
width: 12%;
height: 100%;
}

/**/

.sideBarLeft {
float: left;
margin: 0 auto;
overflow: hidden;
background-color: transparent;

border: none;
text-align: left;
width: 12%;
height: 100%;
}

/**/

.topicos {
overflow: hidden;
padding-left: 5px;
background-color: transparent;
text-shadow: 1px 1px 1px #999999;

border: none;
font-family: Times New Roman;
font-size:24px;
color: #600;
}

/**/

.topicoLink {
overflow: hidden;
padding-left: 5px;
background-color: transparent;

border: none;
font-family: Verdana;
font-size: 12px;
}

/**/
a.classH:link, a.classH:visited, a.classH:hover, a.classH:active {

text-decoration: none;
color: #FFF;
}

/**/
a.classSB:link {

color: #300;
text-decoration: none;
}

/**/
a.classSB:visited {

color: #600;
text-decoration: none;
}

/**/
a.classSB:hover {

text-decoration: none;
color:#F33;
}

/**/
a.classSB:active {

font-weight: bold;
}

/**/
hr {
background-color: transparent;
position: relative;/ this gives IE6 hasLayout to properly clear /

border-style: inset;
border-width: thin;
width: 100%;
}

/**/

.chat {
margin: 0 auto;
background-color: transparent;
box-shadow: 5px 5px 5px #5F4141;

border: none;
text-align: center;
}

/**/

.imgLogo {
margin: 0 auto;
overflow: hidden;
background-color: transparent;

border: none;
text-align: center;
}

/**/

.depoimento {
overflow: auto;
margin: 0 auto;
background-color: transparent;
box-shadow: 5px 5px 5px #5F4141;

border-top: 1px #EEE;
border-left: 1px #EEE;
text-align: left;
height: 500px;
width: 90%;
}

.aliDepoimento {
background-color: transparent;

text-align: justify;
font-size:11px;
height: 100%;
width: 95%;
}

/**/

.visita {
margin: 0 auto;
overflow: hidden;
background-color: transparent;
box-shadow: 5px 5px 5px #5F4141;

border: none;
text-align: center;
}

/**/

.MSN-Stat {
margin: 0 auto;
overflow: hidden;
background-color: transparent;

border: none;
text-align:center;
}

/**/

.On-Off {
float:left;
}

/**/

.IndMSN {
float:left;
}

/**/

.OnMSN {
float:left;
color: #6C6;
}

/**/

.barMSN {
float:left;
}

/**/

.OffMSN {
float:left;
color: #CCC;
}

/ ~~ The footer styles ~~ /
.footer {
clear: both; / this clear property forces the .container to understand where the columns end and contain them /

margin: 0 auto;
overflow: hidden;
background-color: transparent;

border: none;
width: 100%;
}

/**/
.footer2 {
clear: both; / this clear property forces the .container to understand where the columns end and contain them /

margin: 0 auto;
overflow: hidden;
background-color: transparent;

border: none;
width: 100%;
}

/**/

.footer-img {
margin: 0 auto;
overflow: hidden;
background-color: transparent;

border: none;
text-align:right;
}

/**/

.validator {
margin: 0 auto;
background-color: transparent;

border: none;
text-align: center;
}

/**/

.footer2-text {
margin: 0 auto;
overflow: hidden;
background-color: transparent;

border: none;
font-family: Verdana;
font-weight: none;
text-align: center;
font-size: 10px;
color:#666;
}

Por enquanto está assim.