Por que três palestras
Por que três palestras? Uma é porque este é realmente um assunto mal falado, e a outra é porque o Mestre Tai escreveu este artigo há n anos para falar sobre a altura adaptativa do iframe . A razão pela qual volto a levantar esta questão é porque de facto encontrei todos os aspectos deste problema em projectos anteriores, e é necessário resumi-lo. Espero que isso ajude você, corrija-me se houver algum erro.
A altura do mesmo domínio e subpáginas não aumentará dinamicamente
Esta situação é a mais simples. Basta obter a altura real da subpágina diretamente através do script e modificar a altura do elemento iframe. Mas há dois pontos que devem ser observados:
Se houver elementos posicionados de forma absoluta na página ou não houver elementos flutuantes, a situação é um pouco complicada. Navegadores diferentes têm resultados de processamento diferentes, mesmo navegadores com kernel Webkit. Então você faz a detecção do navegador, usa Math.max para calcular um valor máximo ou pensa em outra coisa.
A página contida no iframe pode ser muito grande e exigir um longo tempo de carregamento. Ao calcular a altura diretamente, é provável que a página não tenha sido baixada e haja problemas com o cálculo da altura. Portanto, é melhor calcular a altura no evento onload do iframe. Também deve ser observado aqui que o modelo de evento da Microsoft obj.attachEvent deve ser usado para vincular o evento onload no IE. Outros navegadores também podem usar diretamente obj.onload = function(){}.
(função(){
var _reSetIframe = função(){
var frame = document.getElementById("frame_content_parent")
tentar {
var frameContent = frame.contentWindow.document,
Alturacorpo = Math.max
(frameContent.body.scrollHeight,
frameContent.documentElement.scrollHeight);
if (bodyHeight! = frame.height){
frame.height = bodyHeight;
}
}
pegar(ex) {
quadro.altura = 1800;
}
}
if(frame.addEventListener){
frame.addEventListener
("carregar",function(){setInterval(_reSetIframe,200);},false);
}outro{
frame.attachEvent("onload",function(){setInterval(_reSetIframe,200);});
}
})();
No mesmo domínio, a altura das subpáginas aumentará dinamicamente e o script poderá falhar completamente.
No segundo exemplo, os erros de script são levados em consideração, mas se o script não for executado, o conteúdo do iframe não será exibido porque a altura do iframe não é alta o suficiente. Por esse motivo, geralmente definimos uma altura suficiente com antecedência. Para maior comodidade do controle front-end, acho mais apropriado escrevê-lo em um arquivo CSS. Quando for necessária modificação, basta alterar o CSS. Aqui eu defino o seletor{ height:1800px }; Deve-se notar que os estilos escritos na folha de estilos não podem ser recuperados diretamente usando node.style[property]. Para modelos Microsoft, node.currentStyle[property] deve ser usado (digressão: o modelo trágico do IE não suporta pseudo-CSS). classes ), para o modelo W3C, use window.getComputedStyle(node,null)[property] para obtê-lo. Usei o YUI diretamente por uma questão de conveniência.
Há outro problema aqui. Ao definir a altura do iframe para ser maior que a altura da página que ele contém, cada navegador lida com isso de maneira diferente. Por exemplo, no Firefox, a altura do elemento body deve ser calculada e a altura do elemento html é igual à altura do iframe. No entanto, quando a página tem posicionamento absoluto e elementos flutuantes não limpos, isso não pode ser feito. obtido através do elemento body Obviamente, o primeiro método As desvantagens do método são menores. Por favor, veja esta demonstração para obter detalhes.