Ir para conteúdo

POWERED BY:

Arquivado

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

monteirof7

Site como um iframe

Por , em Desenvolvimento frontend

Recommended Posts

L. Henrique    179

L. Henrique
Postado

É bem mais fácil ficar citando as disvantagens do iFrame do que as vantagens. É uma ferramenta que já está sendo descontinuada, até porque, outros codings estão tornando o mesmo esquema bem mais simples e rápido. Não aconselho usar, a não ser que você saiba o que está fazendo e deseja usar um bom tempo em cima disso. O iFrame comumente tem problemas de visualização (responsive) e enche o saco do visitante se usado em excesso (ou não).

Como fazer é simples:
Essa é a forma básica pra se exibir um iFrame (sem click event), no caso, ele ficaria como uma caixa estática e eternamente visível dentro da sua página.

<body>
   <iframe src="linkdapaginaaserexibida.com.br"></iframe>
</body>

Com o click-event ela se torna diferente, é necessário que o usuário clique em um banner ou botão para que o iFrame seja exibido, no caso, também é necessário um JQuery basiquinho.
Segue estrutura HTML abaixo:

<body>
   <iframe id="iframeteste" src="linkdoquedesejaabrir.com.br"></iframe>
</body>

Evento para abrir o iFrame:

document.getElementById("iframeteste").contentWindow.document.body.onclick = 
function() {
  alert("IFrame foi aberto");
}

Ou se tiver ocorrendo alguns problemas em alguns navegadores, utilize a metodologia do JQuery:

$('#iframeteste').bind('click', function(event) { });

Creio ser só isso por enquanto. Abraços e boa sorte!

Compartilhar este post

Link para o post
Compartilhar em outros sites

monteirof7    1

monteirof7
Postado

Obrigado pela ajuda!

 

O site que passei como exemplo deixa o iframe como uma página, parece até que vc esta em um site a parte, só da pra saber quando olha a URL.

 

Vou deixar o código que eles usaram:


	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
	<html>
	
		<head> 
			<title>Baía do João - Buzios</title>
			<meta name="description" content="Baía do João">
			<meta name="keywords" content="buzios, brazil, travel, hotel, inn tourism">
		</head>
		<frameset border="0" frameborder="NO" framespacing="0" rows="0,*">
		  <frame marginheight="0" marginwidth="0" name="branco" noresize scrolling="no" src="about:blank">
		  <frame frameborder="NO" marginheight="0" marginwidth="0" name="conteudopousada" scrolling="auto" src="http://www.baiadojoao.com/">
		<noframes>
        <body bgcolor="#ffffff" text="#000000">
		</body>
		</noframes>
        </frameset>
	
	</html>

Não a vantagens nisso? Nem quando se trata de SEO?

Compartilhar este post

Link para o post
Compartilhar em outros sites

L. Henrique    179

L. Henrique
Postado

Monteiro, eu abri o site novamente do seu comentário anterior. Pra criar aquele efeito, não é necessário o uso de um iFrame, você simplesmente pode adicionar uma Div com altura de 100% e deixar seu position em fixed.

<div class="esquerda"></div>

html, body{
   width: 100%;
   height: 100%;
   margin: 0;
   padding: 0;
}

.esquerda{
   width: 300px; /* exemplo */
   height: 100%;
   background: #000;
   position: fixed;
   float: left;
}

Dessa forma fica bem mais fácil de se trabalhar, ai o que precisaria seria "empurrar" o resto do conteúdo pra direita. Deixo como exemplo um template do Codrops para você analisar: TUTORIAL - DEMO.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

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

  Aceito