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

 


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

Torne-se um DJ - TerminatorX

Instalando Discord no Fedora 40

Monitorando acesso a sites anônimos da Deep Web

Instalando webcam no OpenSuSE 10.2 em menos de 10 segundos

Instalando Bashtop no Ubuntu 20.04 Sem Usar Snaps

Leitura recomendada

Framework Javascript

Editor de HTML5 em tempo real

Upload de múltiplos arquivos com Javascript + Flash

Fullscreen com jQuery e CSS

Instalando Flash Player no Arch Linux

  

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