Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Sergio Portela

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

Recommended Posts

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.

Compartilhar este post


Link para o post
Compartilhar em outros sites

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

Compartilhar este post


Link para o post
Compartilhar em outros sites

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

Compartilhar este post


Link para o post
Compartilhar em outros sites

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>

Compartilhar este post


Link para o post
Compartilhar em outros sites

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.

Compartilhar este post


Link para o post
Compartilhar em outros sites

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

Compartilhar este post


Link para o post
Compartilhar em outros sites

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?

Compartilhar este post


Link para o post
Compartilhar em outros sites

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...

Compartilhar este post


Link para o post
Compartilhar em outros sites

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..

Compartilhar este post


Link para o post
Compartilhar em outros sites

se eu fizer assim será que funciona?

 

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

Compartilhar este post


Link para o post
Compartilhar em outros sites

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^^

Compartilhar este post


Link para o post
Compartilhar em outros sites

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>

Compartilhar este post


Link para o post
Compartilhar em outros sites

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

Compartilhar este post


Link para o post
Compartilhar em outros sites

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)

Compartilhar este post


Link para o post
Compartilhar em outros sites
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,)

Compartilhar este post


Link para o post
Compartilhar em outros sites

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,

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.