Página Inicial>Tutorial de web design>Normalização WEB

As páginas do quadro iframe implementam soluções de altura adaptativa

Autor：Eve Cole Data da Última Atualização：2025-02-05 14:05:58

Muitas vezes, existem páginas pais que precisam ser incorporadas em outra subpagem através do IFRAME e ajustar a altura do iframe na página pai em tempo hábil, com base na altura da página da criança. A idéia adaptativa é relativamente simples: a altura do Iframe na página dos pais deve ser ajustada de acordo com a altura da página da criança em tempo hábil. Como as operações de JS estão envolvidas, as soluções adaptativas de diferentes nomes de domínio são diferentes, principalmente para resolver problemas de domínio cruzado.

Para altura adaptativa sob o mesmo nome de domínio pai: www.chinaz.com/index.html página incorporada em www.chinaz.com/xxx.html página

1.0 http://jipiao.taobao.com/index.htm Código de chave

<iframe id = "j_selfadapting" src = "http://www.chinaz.com/xxx.htm" mce_src = "http://www.chinaz.com/xxx.htm" frameborder = "0" " "style =" altura: 0; "> </frame>

A página é adicionada da seguinte maneira JS:

<MCE: script type = "text/javascript"> <!-
(função(){
/**
* Obtenha o domínio atual
**/
Função _getDomain () {
var _hostname = window.Location.hostname.tostring ();
var _Hosts = _Hostname.split (".");
var _len = _hosts.length;
if (_len> 2) {{
Retornar _hosts [_len-2]+"."+_ Hosts [_len-1];
}
Return_hostname;
}
document.Domain = _getDomain ();
}) ();
// -> </mce: script>

2. O código a seguir é incorporado na sub -página http://www.chinaz.com/xxx.htm. Para


<MCE: script type = "text/javascript"> <!-
(função(){
/**
* Obtenha o domínio atual
**/
Função _getDomain () {
var _hostname = window.Location.hostname.tostring ();
var _Hosts = _Hostname.split (".");
var _len = _hosts.length;
if (_len> 2) {{
Retornar _hosts [_len-2]+"."+_ Hosts [_len-1];
}
Return_hostname;
}

Window.onload = function () ()
{{
// Defina o domínio da página infantil
document.ndsAin = _getDomain ();
função _setHeight ()
{{
if (window.parent! = janela)
{{
tentar
{{
// Defina a altura do Iframe de nível pai
parent.document.getElementById ("J_SESELAPTING"). style.height = document.body.scrolHeight+ 'px';
}
captura (e)
{{
}
}
// configurado a cada 2s, principalmente para alterar a altura após o carregamento da página
setTimeout (_setheight, 2000);
}
// Depois de carregar a sub -página, chame uma vez
_SethEight ();
}
}) ();
// -> </mce: script>

Diferentes páginas para pais, como www.chinaz.com, book.chinaz.com O nome do domínio é completamente diferente. htm 1. Código da chave no código -chave em www.chinaz.com/index.htm:


<iframe id = "j_selfadapting" src = "http://www.chinaz.com/xxxx.htm" mce_src = "http://www.chinaz.com/xxxx.htm" estrutura = "0" scrolling = "não "style =" altura: 0; "> </frame>

Adicione o seguinte JS:


  1. <MCE: script type = "text/javascript" > <!-

  2. ( Function () {)

  3. /**

  4. * Obtenha o domínio atual

  5. **/

  6. Função _getDomain () {

  7. var _hostname = window.Location.hostname.tostring ();

  8. var _Hosts = _Hostname.split ( "." );

  9. var _len = _hosts.length;

  10. if (_len> 2) {{

  11. Retornar _hosts [_len-2] + "." + _Hosts [_len-1];

  12. }

  13. Return_hostname ;

  14. }

  15. document.Domain = _getDomain ();

  16. }) ();

  17. // -> </mce: script>

2. Código -chave em www.chinaz.com/xxxx.htm:


<iframe scrolling = "no" framebring = "0" style = "display: nenhum;" http://www.chinaz.com/proxy.htm#597 "id =" taobaoiframe ">
</frame>


<MCE: script type = "text/javascript"> <!-
(função(){
var pageHeight = document.body.scrolHeight;
Document.getElementById ('TaobaoIframe').
}) ();
// -> </mce: script>

3. Todo o código no proxy Page Book.chinaz.com/proxy.htm é o seguinte: da seguinte forma:


<!
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text /html; charset = gbk" />
</head>
<Body>
<MCE: script type = "text/javascript"> <!-
(função(){
/**
* Obtenha o domínio atual
**/
Função _getDomain () {
var _hostname = window.Location.hostname.tostring ();
var _Hosts = _Hostname.split (".");
var _len = _hosts.length;
if (_len> 2) {{
Retornar _hosts [_len-2]+"."+_ Hosts [_len-1];
}
Return_hostname;
}
document.Domain = _getDomain ();
var a altura = window.Location.hash.substring (1);
tentar{
var = window.top.document.getElementById ('J_SESESTAPTING');
if (el) {{
el.style.head = altura + 'px';
}
}
Catch (e) {}
}) ();
// -> </mce: script>
</body>
</html>

Artigos Relacionados