<iframe> - Como mostrar a toda a altura do referenciado página?

StackOverflow https://stackoverflow.com/questions/58543

  •  09-06-2019
  •  | 
  •  

Pergunta

Eu tenho um pedido que eu gostaria de incorporar dentro de nossas empresas CMS.A única maneira de fazer isso (tenho dito), é para carregá-lo em um <iframe>.

Fácil:basta definir height e width para 100%!Exceto, ele não funciona.

Eu consegui descobrir sobre a definição de frameborder para 0, para que ele, pelo menos, procura como parte do site, mas eu prefiro não ter um feio barra de rolagem dentro uma página que já tem um.

Você conhece todos os truques para fazer isso?

EDITAR: Eu acho que eu preciso esclarecer a minha pergunta um pouco:

  • a empresa CMS apresenta o buço e outras coisas para o nosso site todo
  • a maioria das páginas criadas através de CMS
  • a minha candidatura não é, mas eles vão deixar-me lightbox-lo em um <iframe>
  • Eu não tenho nenhum controle sobre o iframe, assim , qualquer solução deve funcionar de referência página (de acordo com o src atributo do iframe tag)
  • o CMS apresenta um rodapé, assim, definir a altura para 1 milhão de pixels não é uma boa idéia

Posso acessar as páginas pai DOM de referência página?Isso pode ajudar, mas eu posso ver que algumas pessoas podem não quero que isso seja possível...

Esta técnica parece funcionar (adquirida a partir de várias fontes, mas inspirada pelo link a partir do aceite resposta:

No documento principal:

<iframe id="MyIFRAME" name="MyIFRAME" 
    src="http://localhost/child.html"
    scrolling="auto" width="100%" frameborder="0">
    no iframes supported...
</iframe>

Na criança:

<!-- ... -->
<body>
<script type="text/javascript">
    function resizeIframe() {

        var docHeight;
        if (typeof document.height != 'undefined') {
            docHeight = document.height;
        }
        else if (document.compatMode && document.compatMode != 'BackCompat') {
            docHeight = document.documentElement.scrollHeight;
        }
        else if (document.body 
            && typeof document.body.scrollHeight != 'undefined') {
            docHeight = document.body.scrollHeight;
        }

        // magic number: suppress generation of scrollbars...
        docHeight += 20;

        parent.document.getElementById('MyIFRAME').style.height = docHeight + "px";    
    }
    parent.document.getElementById('MyIFRAME').onload = resizeIframe;
    parent.window.onresize = resizeIframe;
</script>               
</body>

BTW: Isto só irá funcionar se pai e filho estão no mesmo domínio, devido a uma restrição em JavaScript por motivos de segurança...

Foi útil?

Solução

Você pode apenas usar uma linguagem de script para incluir a página para a página principal, de outra forma, você pode querer tentar um destes métodos de javascript:

http://brondsema.net/blog/index.php/2007/06/06/100_height_iframe http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/PHP/Q_22840093.html

Outras dicas

Desde que o iframe está hospedado no mesmo servidor como o que contém a página, você pode o acesso é através de javascript.

Há uma série de sugestões de métodos para a definição do iframe para a altura total do conteúdo, cada um com diferentes graus de sucesso - google por este problema mostra que é bastante comum, com nenhum real, one-size-fits-all consenso solução que eu tenho medo!

Várias pessoas relataram que este script faz o truque, mas podem precisar de algumas modificações para o seu caso específico (novamente, supondo que o iframe e página principal estão no mesmo domínio).

Eu poderia estar faltando alguma coisa aqui, mas a adição de scrolling=no como um atributo para o iframe tag normalmente se livrar das barras de rolagem.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top