Método de implementação adaptativa da altura da janela iframe

Autor：Eve Cole Data da Última Atualização：2025-02-22 14:16:01

Há uma página em domaina index.html, aninhada com um outro.html em uma página no domainb através do iframe

Como a página outro.html é exibida no iframe e o conteúdo da página aumentará ou diminuirá dinamicamente, agora a barra de rolagem do iframe precisa ser removida

Devido às limitações das estratégias homólogas de JavaScript, as operações cruzadas não podem ser realizadas, o que torna o problema mais difícil

Consulte a abordagem da Internet, introduza uma página da agência ou o agente.html, que pertence ao domaina

Então, no outro.html no domainb, use o iframe para o agente aninhado.html para aninhado

Ok, esse é o caso agora:

Index.html usa iframe aninhado outros.html

Other.html usa iframe nesting agent.html

O motivo da introdução do 3º agente de página.html é cumprir as regras de "estratégia homogênea" e concluir a transferência de parâmetros sob diferentes domínios!

Nosso objetivo final é remover a barra de rolamento e garantir que todo o conteúdo da página incorporado seja exibido

1. A altura real da altitude real de outros.html página

3. Interceita o valor da altura no atributo SRC do iframe em agente.html

No exemplo a seguir, uma técnica é usada para evitar o uso do setInterval () para definir constantemente a altura do iframe

O método é adicionar um registro de data e hora no SRC do Iframe, permitindo ao navegador recarregar o agente.html sempre

Em seguida, deixe o JS funcione em agente.hml InvokemethOnTopwindow () ser executado

2 html em domaina

index.html

Copie o código do código da seguinte forma:

#{Estende 'main.html' /}

#{Set title: 'home' /}

<HR>

<div style = "cor: vermelho; peso da fonte: negrito"> 窗口自适应 --- 绕开同源策略的限制，同时又利用同源策略，去掉 iframe 的滚动条，动态调整窗口的高度，让Ele pode exibir todo o conteúdo da página aninhada </div>

<!-você precisa ajustar dinamicamente a altura do iframe->

</div>

Função redimensiona (altura) {

// alert ("redimensionar");

document.getElementsByName ("domainb") [0] .Height = Height;

}

</script>

agente.html

Copie o código do código da seguinte forma:

<html>

<head>

<Título> Insira o título aqui </title>

</head>

<Body>

Eu sou uma página de proxy!

Window.onload = InvokemethOnTopwindow;

função invokemethodintopwindow () {) {

// alert ("Chame a função no mesmo domínio, redefina a altura do iframe");

var domain = document.parentwindow;

var realHeight = domaina.location.hash.split ("#") [1];

// Última etapa: chame a função da janela da camada superior e redefina a altura do iframe

Parent.parent.Resize (RealHeight);

// alert ("RealHeight:"+RealHeight);

// alert (document.parentwindow.name); // Obtenha o nome da janela onde o contêiner está localizado domina

// error: // alert (document.parentwindow.parent.name);

// alert (document.parentwindow.parent.parent.name); // A camada superior da janela pertence ao domaina, para que você possa visitá -lo

}

// Depois de definir o atributo src do iframe com diferentes registros de data e hora, não precisa usar o setInterval ()

// setInterval ("InvokemethOnTopwindow ()", 100);

</script>

</body>

</html>

Outros.html no domainb

Copie o código do código da seguinte forma:

<html>

<head>

<Título> Insira o título aqui </title>

</head>

<!-página incorporada em um domínio->

<button type = "button" onclick = "btnClick ()"> exibição de switch </botão>