Substituir FRAME por DIV. É possível? Como?

[Sergio Portela 0]

Pessoal.Sabemos que alguns navegadores podem apresentar problemas quando se carrega uma página com FRAMES. Gostaria de saber se é possível construir um site abolindo os FRAMES e utilizando apenas as DIV´s.Alguém por favor me diga se isso é possível, e como fazer.Como fazer a página de um link ser carregada dentro de uma DIV (como se fosse "target" de um FRAME) ???Agradeço antecipadamente.Abraços a todos.

[djeco 0]

pode ser feito sim...pra fazer o conteúdo ser carregado em determinada div você pode utilizar o innerHTML do javascript.

[Mr Crowley 0]

pode ser feito sim...pra fazer o conteúdo ser carregado em determinada div você pode utilizar o innerHTML do javascript.

ja aproveitando o post dele...você poderia dar um exemploja testei algumas coisas aqui e nao funcionouFalow

[djeco 0]

Olha o exemplo ai:

 

<style type="text/css">ul{	list-style: none;	margin: 0;	padding: 0;}#menu{	float: left;	width: 100px;}#conteudo{	float: left;	width: 500px;}</style><script type="text/javascript">	function insereTexto(qual){		if(qual == 1)			document.getElementById("conteudo").innerHTML = "Você clicou no link 1";		else if(qual == 2)			document.getElementById("conteudo").innerHTML = "Você clicou no link 2";		else			document.getElementById("conteudo").innerHTML = "Você clicou no link 3";	}</script><div id="menu">	<ul>		<li><a href="java script: insereTexto(1);">Link 1</a></li>		<li><a href="java script: insereTexto(2);">Link 2</a></li>		<li><a href="java script: insereTexto(3);">Link 3</a></li>	</ul></div><div id="conteudo"></div>

[Sergio Portela 0]

Prezado Djeco,Obrigado pelo seu exemplo postado.Era exatamente isso que eu estava buscando.Apesar de estar estudando o CSS com dedicação, não tenho muita intimidade com programação de scripts em java (ou qqr outra linguagem) e pelo que acabei de ver em seu post, sem esse script eu não conseguiria fazer o que estou querendo.Acabo de descobrir que vou precisar aprender alguma coisa de scripts também...MUITO obrigado por sua ajuda e seu exemplo.Tentarei aplicar onde estou precisando e fazer a página que desejo.Grandes abraços,Sergio Portela.

[Giovani 104]

pra fazer o conteúdo ser carregado em determinada div você pode utilizar o innerHTML do javascript.

Apenas para citar, ai vai link que achei...meio sem querer aqui mesmo no forum!!!Eu acho que vale a pena ler!!!![]´s

[tm@r@ 0]

E como faço então, para criar um link usando esta função ? Quero dizer, onde que eu chamo a página index2.html se eu clicar no link1, por exemplo?

[tm@r@ 0]

Alguém sabe como fazer isso? Pode ajudar?

[djeco 0]

pra chamar todo o conteúdo de um outro html eu utilizei ajax. Mas dae fica um pouco mais complexo.Nossa.. eu nao sabia q não era padrão usar o innerHTML... vlw a dica gio! vou dar uma lida lah...

[tm@r@ 0]

Ainda preciso saber como faço para chamar uma página dentro de uma div usando a função postada acima. Como chamo o index2.html se eu clicar no link1 por exemplo ? e que ele seja carregado dentro da div "conteudo".por favor.. help me..

[Giovani 104]

Fale com o pessoal lá de JS, ou pesquise...olha o que eu achei no forum de JS.

 

[]´s

 

tag pesquisada: innerHTML

[Filipe_Ctba 0]

se eu fizer assim será que funciona?

 

if(qual == 1)			document.getElementById("conteudo").innerHTML = <? request("link1.php"); ?>

[Giovani 104]

você perguntou Filipe_Ctba?

Aqui é o fórum de WS! http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[Guilherme Rambo 4]

Nossa.. eu nao sabia q não era padrão usar o innerHTML... vlw a dica gio! vou dar uma lida lah...

Nesse caso que se f** os padrões, pq sem innerHTML eu naum vivo :P^^

[tm@r@ 0]

OkE no link do menu, como eu substituo a variável $pagina pela página que quero carregar, seja uma .html ou .php? Algo semelhante a isso ? como?<li><a href="$pagina: 'index1.html'">Pagina x</a><li>

[Giovani 104]

Pessoal,Dúvida em PHP...fale com o pessoal de PHP.Dúvida em JS....fale com o pessoal de JS.[]'s

[micox 2]

Uma forma seria com o ajax né, mas como já falaram: não fique inventando moda, siga os padrões normais, não complique a vida do seu usuário.

 

Mas, se ainda assim você quiser fazer esse esquema de abrir uma página em div você pode usar ajax e minha função simples pra AJAX.

 

Ficaria:

ajaxGet("seuarquivo.htm",document.getElementById("conteudo"),true)

[Dough Lda 0]

Caso vc queira substituir frames por divs com javascript da pra usar essa parada aqui:

<html>
<head>
<script type="text/javascript">
try{
xmlhttp = new XMLHttpRequest();
}
catch(ee){
try{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e){
try{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(E){
xmlhttp = false;
}
}
}
div_base = "";
function abre(arquivo,metodo,div){
div_base = div;
xmlhttp.open(metodo,arquivo);
xmlhttp.onreadystatechange=conteudo
xmlhttp.send(null)
}
function conteudo() {
nova_div = div_base;
document.getElementById(nova_div).innerHTML="<div style='top:50%;left:50%;position:absolute;'>carregando...</div>"
if (xmlhttp.readyState==4){
document.getElementById(nova_div).innerHTML=xmlhttp.responseText
}
}
</script>
</head>

<body>
<a href="javascript: abre('contato.html','GET','conteudo');">Link 1</a>
<a href="javascript: abre('coisa.html','GET','conteudo');">Link 2</a>
<a href="javascript: abre('seila.html','GET','conteudo');">Link 3</a>

<div id="conteudo">

Aqui vc coloca as coisas da página inicial, quando clicar no l-i-n-k do menu(que está ali em cima), 
a página que que está no l-i-n-k abre nesse lugar. Pronto , frame substituído.

</div>
</body>
</html>

 

 

Depois é so estilizar com css o menu e onde está escrito carregando... pode ser substituido por um gif <img src="carregando.gif" border="0">

Antes tarde do que nunca :)

Esqueci de dizer que se for testar em navegador webkit (chrome, canary, maxthon, coolnovo) não vai funfar, ele só funcionará quando estiver hospedado.

Para resolver isso teste com xampp em localhost ou com navegador firefox ou parentes dele(seamonkey, cometbird,)

[alexsouzaweb 2]

Sergio,

 

Existem diversas formas para fazer isso como citadas acima. Porém eu uso uma forma que achei a mais simples de todas.

 

Hoje, muitos sites estão sendo desenvolvidos como (Single Pages). E uma forma de fazer isso, é trazer o código da sua página a ser aberta para a página principal, e simplesmente inseri-la em uma DIV oculta através de um simples script. E exibi-la assim que clicar em algum link no menu por exemplo.

 

Por exemplo:

 

Código do menu:

<ul class="menu">
     <li class="option">
          <span onclick="javascript:sub1_abre('pagina01');"style="cursor:pointer;">
           Abre pagina01
          </span>    
     </li>
</ul>

Função em JavaScript que faz a DIV ficar Visível ou Oculta:

 

function sub1_abre(tabela){
        tabela=document.getElementById(tabela);
                if(tabela.style.display=="none"){
                        tabela.style.display="block";
                }
                else{
                        tabela.style.display="none";
                }
}

 

Página a ser exibida após clicar no menu:

<div id="pagina01" style="display: none;">
Aqui vai o conteúdo da página 01 que quer exibir após o click. 
</div>

 

Funcionamento:

 

Você tem o link no menu "Abre pagina01" que após clicado, aciona a função "sub1_abre" que deixa visivel a "<div id="pagina01">.

Então, se a opção está como "style="display: none" a div está oculta, se estiver "style="display: block" ela está visível.

Simples assim.

 

Como você não tem pouco conhecimento por enquanto pode ser dificil assimilar, porém quando entende, você vê a maravilha que é trabalhar com Single Page.

 

Segue o exemplo de um site que estou desenvolvendo: www.valuti.com.br/teste

 

Qualquer duvida, me avisa que explico melhor.

 

Abs,

[André do Vale 76]

Gente. 2006. :lock: