Inicio>Tutorial de diseño web>estandarización WEB

Página de marco de iframe para implementar una solución adaptativa alta

Autor：Eve Cole Fecha de actualización：2025-02-05 14:05:58

A menudo hay páginas principales que deben ser incrustadas en otra subpágina a través de iframe, y ajustar la altura del nombre en la página principal de manera oportuna en función de la altura de la página del niño. Las ideas adaptativas son relativamente simples: la altura de iframe en la página principal debe ajustarse de acuerdo con la altura de la página subterránea de manera oportuna. Dado que las operaciones JS están involucradas, las soluciones adaptativas de diferentes nombres de dominio son diferentes, principalmente para resolver problemas de dominio cruzado.

Para una altura adaptativa bajo el mismo nombre de dominio principal: www.chinaz.com/index.html página incrustada en www.chinaz.com/xxx.html página

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

<iframe id = "j_selfadapting" src = "http://www.chinaz.com/xxx.htm" mce_src = "http://www.chinaz.com/xxxx.htm" frameborder = "0" Scrolling = "No "Style =" Altura: 0;

La página se agrega de la siguiente manera JS:

<mce: script type = "text/javaScript"> <!-
(función(){
/**
* Obtenga el dominio actual
**/
Función _getdomain () {
var _hostname = window.location.hostname.ToString ();
var _hosts = _hostname.split (".");
var _len = _hosts.length;
if (_len> 2) {{
Return _hosts [_len-2]+"."+_ Hosts [_len-1];
}
Return_hostname;
}
document.ndsain = _getDomain ();
}) ();
// -> </mce: script>

2. El siguiente código está incrustado en la sub -page http://www.chinaz.com/xxx.htm. A


<mce: script type = "text/javaScript"> <!-
(Función () {)
/**
* Obtenga el dominio actual
**/
Función _getdomain () {
var _hostname = window.location.hostname.ToString ();
var _hosts = _hostname.split (".");
var _len = _hosts.length;
if (_len> 2) {{
Return _hosts [_len-2]+"."+_ Hosts [_len-1];
}
Return_hostname;
}

Window.onload = function () ()
{{
// Establecer el dominio de la página del niño
document.ndsain = _getDomain ();
Function_setheight ()
{{
if (window.parent! = Window)
{{
intentar
{{
// Establecer la altura de los padres de nivel principal
Parent.document.getElementById ("J_SelfAdapting").
}
captura (e)
{{
}
}
// Configurar cada 2, principalmente para cambiar la altura después de la carga de la página de la página
setTimeOut (_setheight, 2000);
}
// Después de cargar la página subterránea, llámelo una vez
_Setheight ();
}
}) ();
// -> </mce: script>

Diferentes páginas de matriz, como www.chinaz.com, book.chinaz.com El nombre de dominio es completamente diferente. Htm. 1. Código clave en el código clave en www.chinaz.com/index.htm:


<iframe id = "j_SelfAdapting" src = "http://www.chinaz.com/xxxx.htm" mce_src = "http://www.chinaz.com/xxxxx.htm" frameborder = "0" Scrolling = "No "Style =" Altura: 0;

Agregue de la siguiente manera JS:


  1. <mce: script type = "text/javaScript" > <!-

  2. ( Función () {)

  3. /**

  4. * Obtenga el dominio actual

  5. **/

  6. Función _getdomain () {

  7. var _hostname = window.location.hostname.ToString ();

  8. var _hosts = _hostname.split ( "." );

  9. var _len = _hosts.length;

  10. if (_len> 2) {{

  11. Return _hosts [_len-2] + "."

  12. }

  13. Return_hostname ;

  14. }

  15. document.ndsain = _getDomain ();

  16. }) ();

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

2. Código clave en www.chinaz.com/xxxx.htm:


<Iframe Scrolling = "No" FrameBorDer = "0" Style = "Display: None;" http://www.chinaz.com/proxy.htm#597 "id =" taobaoiframe ">
</iframe>


<mce: script type = "text/javaScript"> <!-
(función(){
var pageHeight = document.body.scrollHeight;
document.getElementById ('taobaoiframe').
}) ();
// -> </mce: script>

3. Todo el código en la página Proxy book.chinaz.com/proxy.htm es el siguiente: como sigue:


<!
<html xmlns = "http://www.w3.org/1999/xhtml">
<Evista>
<meta http-equiv = "content-type" content = "text /html; charset = gbk" />
</ablo>
<Body>
<mce: script type = "text/javaScript"> <!-
(Función () {)
/**
* Obtenga el dominio actual
**/
Función _getdomain () {
var _hostname = window.location.hostname.ToString ();
var _hosts = _hostname.split (".");
var _len = _hosts.length;
if (_len> 2) {{
Return _hosts [_len-2]+"."+_ Hosts [_len-1];
}
Return_hostname;
}
document.ndsain = _getDomain ();
var altura = window.location.hash.substring (1);
intentar {
var = window.top.document.getElementById ('J_SelfAdapting');
if (el) {{
el.style.Height = altura + 'Px';
}
}
Catch (e) {}
}) ();
// -> </mce: script>
</body>
</html>

Artículos relacionados