Como ajustar o tamanho do iframe pelo tamanho da tela e mudar o target de uma página depois dela aberta

Publicado por Perfil removido em 10/03/2010

[ Hits: 35.436 ]

 


Como ajustar o tamanho do iframe pelo tamanho da tela e mudar o target de uma página depois dela aberta



No processo de reformulação do meu site eu descobri funções muito legais do JavaScript que realmente fizeram tudo o que eu queria.

No primeiro caso eu coloquei um iframe num espaço da tela e queria que ele preenchesse todo o espaço vazio que estava sobrando proporcional ao tamanho da tela. Como? A gente descobre o tamanho da tela, desconta a área que já foi preenchida e redimensiona o iframe pro tamanho restante. Fazemos isso no onload da página e no onresize (esse por JavaScript pra obedecer as regras do HTML 4.01 e ser compatível com todos os navegadores). Nesse exemplo vamos redimensionar a altura.

<script language="JavaScript" type="text/javascript">
  window.onresize = AjustarIFrame;

  function AjustarIFrame()
  {
    //Identifica navegador
    var TamanhoTopo;
    TamanhoTopo = 113;

    if (navigator.appName.indexOf("Microsoft") != -1)
    {
      document.getElementById('meuiframe').height = document.documentElement.clientHeight - TamanhoTopo;
    }
    else
    {
      document.getElementById('meuiframe').height = window.innerHeight - TamanhoTopo;
    }
  }
</script>

Esse script fica no head e chamamos ele ao carregar a página.

<body onload="JavaScript:AjustarIFrame();">

E esse é o nosso iframe que será redimensionado. Foi o que eu fiz no meu site em http://pedro-araujo.com/blog.

<iframe id="meuiframe" height="0" src="minhaurl" frameborder="0" width="100%" scrolling="auto"></iframe>

Por fim, algo que pode ser associado a isso é mudar o target da página depois que ela já foi aberta. Um exemplo: alguém chama o seu site dentro de um iframe na página dele, mas você não quer que seu site apareça 'encaixotado', então você força ela a ocupar toda a janela do navegador no onload, ou seja, ele não vai ficar 'preso' no iframe e vai automaticamente abrir na área de navegação principal, ela nunca vai ser filha de uma outra janela, sempre vai forçar a ter o target como parent. Eis o JavaScript:

if(window.top != window.self) window.open(document.location, '_parent');

Um exemplo disso é a tela de login do Twitter (http://twitter.com/login) - tente 'prendê-la' num iframe e você vai ver que ela irá tomar a janela principal do navegador.

Outras dicas deste autor

Baixou o Ubuntu 14.10 Utopic [sem suporte] no Site Oficial? Relaxe, temos a solução pra você!

Novo "estilo" do Python 2.6 e 3.0 para formatar strings

Mudando o Splash Screen do KDE

Problema com o TLS no aMSN 0.97RC1

Atom - O editor deste e do próximo milênio!

Leitura recomendada

Programação orientada à objetos em JavaScript

Copiando imagens bloqueadas

Editor de HTML5 em tempo real

Resolvendo erro de atualização do firmware do modem DSL2640t

Fullscreen com jQuery e CSS

  

Comentários
[1] Comentário enviado por vmaia em 10/03/2010 - 19:47h

cool!!!!!!!



Contribuir com comentário




Patrocínio

Site hospedado pelo provedor RedeHost.
Linux banner

Destaques

Artigos

Dicas

Tópicos

Top 10 do mês

Scripts