Tutorial de habilidades de produção de página da web: Altura adaptativa do iframe

Autor：Eve Cole Data da Última Atualização：2025-04-21 07:48:02

Artigo Introdução de wulin.com (www.vevb.com): Alguém ainda não encontrou esse problema. Vamos primeiro explicar o que é altura adaptativa. A chamada altura adaptativa do iframe significa que, com base na beleza da interface e interação, a borda e a barra de rolagem do iframe estão ocultas, tornando impossível ver que é um iframe. Se o iframe sempre chamar a mesma página de altura fixa, precisamos apenas escrever a altura do iframe até a morte. E

Pesquise a altura adaptativa do iframe através do Google, com mais de resultados de 5W, procure a altura adaptativa da altura do iframe, com mais de 2W resultados.

Eu li as dezenas de artigos nos artigos anteriores e cavei um grande número de reimpressões. Existem três ou cinco artigos originais. Nesses artigos originais, eles basicamente falam apenas sobre como se adaptar às coisas estáticas, mas não consideram como fazer a sincronização dinâmica após o JS opera DOM. Além disso, em termos de compatibilidade, a pesquisa também foi incompleta.

Espero fazer algumas pesquisas detalhadas nesses dois aspectos.

Talvez alguém ainda não tenha entrado em contato com esse problema. Vamos explicar primeiro o que é altura adaptativa. A chamada altura adaptativa do iframe significa que, com base na beleza da interface e interação, a borda e a barra de rolagem do iframe estão ocultas, tornando impossível ver que é um iframe. Se o iframe sempre chamar a mesma página de altura fixa, precisamos apenas escrever a altura do iframe até a morte. Se o iframe quiser alternar as páginas ou a página incluída precisar executar operações dinâmicas do DOM, o programa precisará sincronizar a altura do iframe e a altura real da página incluída.

A propósito, se você precisar usar o iframe, causará muitos problemas para o desenvolvimento do front-end.

Existem aproximadamente duas práticas tradicionais:

Método 1: Depois que cada página incluída foi carregada carregando seu próprio conteúdo, execute o JS para obter a altura desta página e, em seguida, sincronizar a altura do iframe da página pai.

Método 2: Execute o JS no evento OnLoad do iFrame principal, obtenha o conteúdo da altura da página incluída e sincronize a altura.

Do ponto de vista da manutenção do código, o método dois é melhor que o método um, porque o método um, cada uma incluída, a página deve introduzir uma parte do mesmo código para fazer isso, e muitas cópias foram criadas.

Ambos os métodos lidam apenas com coisas tranquilas, ou seja, elas são executadas apenas quando o conteúdo é carregado. Se o JS operar as alterações de altura causadas pelo DOM, não será muito conveniente.

Se você fizer um intervalo na janela principal, obtenha constantemente a altura da página incluída e, em seguida, a sincronização, ela é conveniente e resolva o problema do JS operando o DOM? A resposta é sim.

Página de demonstração: página principal iframe_a.html, contendo páginas iframe_b.htm e iframe_c.html

Exemplo de código da página principal:

função reinitiframe () {

var iframe = document.getElementById (frame_content);

tentar{

iframe.Height = iframe.contentWindow.document.documentElement.scrolHeight;

} catch (ex) {}

}

window.setInterval (reinitiframe (), 200);

< /script> Haverá algum problema com a eficiência?

Fiz o teste e abri 5 Windows (IE6, IE7, FF, Opera, Safari) para executar esse código, que não terá nenhum impacto na CPU, e ela será ajustada a 2ms, sem nenhum impacto (basicamente mantido em 0% de ocupação).

Vamos falar sobre os problemas de compatibilidade de cada navegador. Como chegar à altura correta. Vale a pena comparar principalmente os dois corpos. Observe que este artigo usa este doctype. Diferentes docttypes não devem afetar o resultado, mas se sua página não declarar Doctype, adicione um primeiro.

<! Doctype html public -// w3c // dtd html 4.01 // pt> anexar o seguinte código de teste à página principal para produzir esses dois valores, exemplo de código:

<div> <button> Verifique a altura </butut> </div> <script type = text/javascript>

função checkHeight () {

var iframe = document.getElementById (frame_content);

var bHeight = iframe.contentWindow.document.body.scrolHeight;

var dHeight = iframe.contentWindow.document.documentElement.scrolHeight;

alerta (BHEight: + bHeight +, dHeight: + dHeight);

}

< /script> é carregado e uma camada absolutamente posicionada pode ser alterada para alterar a altura da página dinamicamente. Se a camada for expandida, a altura da página será suportada. Exemplo de código:

<div> <butão> Alternar a sobreposição </botão>

</div>

</div>

função TogGleOverlay () {

var overlay = document.getElementById ('sobreposição');

Sobreplay.style.display = (sobrever.style.display == 'None')? 'Block': 'Nenhum';

}

< /script> Os seguintes listam os valores de teste do código acima em cada navegador:

(bHeight = body.scrolHeight, dHeight = documentElement.ScrolHeight, vermelho = valor de erro, verde = valor correto)

/ Camada está escondida quando a camada é expandida

BHEight dheight bheight

IE6 184 184 184 303

IE7 184 184 184 303

FF 184 184 184 303

Opera 181 181 300 300

Safari 184 184 303 184

Vamos ignorar o problema de que a ópera é de 3 pixels a menos que outros ... pode -se ver que, se não houver posicionamento absoluto, os dois valores são iguais e não importa qual deles você toma.

Mas, se houver, o desempenho de cada navegador é diferente e é errado tomar qualquer valor sozinho. Mas uma regra pode ser encontrada, ou seja, pegue dois valores máximos e seja compatível com cada navegador. Portanto, nosso código de página principal precisa ser transformado nisso:

function reinitiframe () {var iframe = document.getElementById (frame_content);

tentar{

var bHeight = iframe.contentWindow.document.body.scrolHeight;

var dHeight = iframe.contentWindow.document.documentElement.scrolHeight;

var em altura = math.max (BHEight, DHEight);

iframe.Height = altura;

} catch (ex) {}

}

window.setInterval (reinitiframe (), 200); Dessa maneira, o problema de compatibilidade é basicamente resolvido. A propósito, a camada absolutamente posicionada não apenas afeta o valor, mas também causará a diferença entre os dois valores.

Se você demonstrar a demonstração, descobrirá que em outros navegadores, exceto o IE, quando a camada for expandida e depois oculta, o valor da altura obtido ainda é mantido na altura expandida de 303, em vez do valor verdadeiro escondido de volta 184, o que significa que ele não pode encolher depois de ficar mais alto. Esse fenômeno também pode ocorrer ao alternar entre diferentes páginas incluídas. Ao mudar de uma página alta para uma página baixa, a altura obtida ainda é o mesmo valor alto.

Ele pode ser resumido como: quando a altura do formulário IFRAM é maior que a altura real do documento, a altura é tomada como a altura da forma e quando a altura da forma é menor que a altura real do documento, a altura real do documento é tomada como a altura real do documento. Portanto, é necessário encontrar uma maneira de definir a altura como um valor mais baixo que o documento real antes de sincronizá -lo. Portanto, adicione onLload = this.Height = 100 ″ ao iframe, para que a página seja curta o suficiente ao carregar e depois sincronize com a mesma altura.

Esse valor é determinado em aplicações reais e é curto o suficiente, mas não muito curto; caso contrário, haverá uma fila óbvia em navegadores como FF. Quando o DOM é operado, a página principal não pode ser monitorada; portanto, a altura pode ser reduzida após a operação do DOM.

Em um dos meus projetos reais, não fiz isso em termos de pesagem de custos e benefícios, porque tenho que inserir esse código em cada função DOM, o que é muito caro e, de fato, não é tão fatal encolher a camada ou não a encolher. Incluindo na demonstração, essa coisa não foi feita. Se o leitor tiver uma maneira melhor, entre em contato.

Aqui está o código da página principal final:

função reinitiframe () {

var iframe = document.getElementById (frame_content);

tentar{

var bHeight = iframe.contentWindow.document.body.scrolHeight;

var dHeight = iframe.contentWindow.document.documentElement.scrolHeight;

var em altura = math.max (BHEight, DHEight);

iframe.Height = altura;

} catch (ex) {}

}

window.setInterval (reinitiframe (), 200);

< /script>