Jump to content
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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other 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

Share this post


Link to post
Share on other 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>

Share this post


Link to post
Share on other 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.

Share this post


Link to post
Share on other 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

Share this post


Link to post
Share on other 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?

Share this post


Link to post
Share on other 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...

Share this post


Link to post
Share on other 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..

Share this post


Link to post
Share on other sites

se eu fizer assim será que funciona?

 

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

Share this post


Link to post
Share on other 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^^

Share this post


Link to post
Share on other 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>

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other 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)

Share this post


Link to post
Share on other 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,)
Edited by Dough Lda

Share this post


Link to post
Share on other 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,

  • +1 1

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.