Outra idéia inteligente de realizar a adaptabilidade da altura do iFrame Windows

Autor：Eve Cole Data da Última Atualização：2025-02-23 11:32:01

Existe uma página index.html em domaina, que aninha uma página em outra

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

Devido às limitações da política da mesma origem JavaScript, a operação entre domínios não pode ser realizada, dificultando o problema

Eu me referi à prática on -line e introduzi uma página do agente, ou um agente.html, que pertence ao domaina

Então, em outro.html em domainb, use o iframe para ninho agente.html

Ok, agora a situação é:

Index.html Nesting Outro.html usando iframe

outros.htmlnest agent.html usando iframe

A razão pela qual a terceira página agente.html é cumprir as regras da "política da mesma origem" e completar a passagem de parâmetros sob diferentes domínios!

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

1. Obtenha a altura real do outro.html página

2. Defina a altura para a propriedade SRC do iframe incorporado

3. Em agente.html, corte o valor da altura no atributo src do iframe.

No exemplo a seguir, um truque é usado para evitar o uso de setInterval () para definir continuamente a altura do iframe.

O método é anexar um carimbo de data / hora ao SRC do iframe, para que o navegador recarregue o agente.html sempre

Em seguida, deixe a função js invocarMethIntopWindow () em agente.hml ser executado

2 html em domaina

index.html

A cópia do código é a seguinte:

#{estende 'main.html' /}

#{set title: 'home' /}

<HR>

<div style = "cor: vermelho; peso da fonte: negrito"> Adaptação da janela-bipar as limitações das políticas homólogas e, ao mesmo tempo , para que possa exibir todo o conteúdo da página aninhada </div>

<!-Iframe que requer ajuste dinâmico de altura->

</div>

função redimensiona (altura) {

// alert ("redimensionar");

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

}

</script>

agente.html

A cópia do código é a seguinte:

<! Doctype html>

<html>

<head>

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

</head>

<Body>

Eu sou a página proxy!

window.onload = InvokemethOnTopwindow;

função InvokemethodIntopWindow () {

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

var domaina = document.parentwindow;

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

// Última etapa: chame a função da janela superior para redefinir a altura do iframe

parent.parent.Resize (RealHeight);

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

//alert(document.parentwindow.name)

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

//alert(document.parentwindow.parent.parent.name) ;// A janela de nível superior pertence ao Domaina, para que possa ser acessado

}

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

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

</script>

</body>

</html>

Outros.html no domainb

A cópia do código é a seguinte:

<! Doctype html>

<html>

<head>

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

</head>

<!-página incorporada no domínio a->

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

No JavaScript, existe uma limitação de segurança muito importante chamada "política da mesma origem".

Essa estratégia coloca restrições importantes no conteúdo da página que o código JavaScript pode acessar, ou seja, o JavaScript pode acessar apenas o conteúdo no mesmo domínio que o documento que o contém.