Главная страница>Учебник по веб-дизайну>ВЕБ-стандартизация

Страница Framework Iframe для реализации адаптивного высокого решения

Автор：Eve Cole Время обновления：2025-02-05 14:05:58

Часто существуют родительские страницы, которые необходимо встроить в другую подпадку через iframe, и своевременно отрегулировать высоту iframe на родительской странице на основе высоты страницы ребенка. Адаптивные идеи относительно просты: высота iframe на родительской странице должна быть скорректирована в соответствии с высотой суб -страницы своевременно. Поскольку операции JS задействованы, адаптивные решения разных доменных имен различны, главным образом для решения проблем перекрестных доменов.

Для адаптивной высоты под той же родительской доменной именем: www.chinaz.com/index.html страница, встроенная в страницу www.chinaz.com/xxx.html

1.0 http://jipiao.taobao.com/index.htm код ключа

<iframe id = "j_elfadapting" src = "http://www.chinaz.com/xxx.htm" mce_src = "http://www.chinaz.com/xxx.htm" frameborder = "0" Scrolling = "Нет "Стиль =" Высота: 0; "> </iframe>

Страница добавлена ​​следующим образом JS:

<MCE: Script Type = "Text/JavaScript"> <!-
(Function () {)
/**
* Получите текущий домен
**/
Function _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. Следующий код встроен в суб -страница http://www.chinaz.com/xxx.htm. К


<MCE: Script Type = "Text/JavaScript"> <!-
(Function () {)
/**
* Получите текущий домен
**/
Function _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 () ()
{{
// Установить домен страницы ребенка
document.ndsain = _getdomain ();
Function_setheight ()
{{
if (window.parent! = Window)
{{
пытаться
{{
// Установите высоту родительского iframe iframe
Parent.document.getElementById ("J_ElchAdapting").
}
поймать (e)
{{
}
}
// Настройка каждые 2 с, в основном для изменения высоты после загрузки страницы страницы
setTimeout (_setheight, 2000);
}
// после загрузки суб -страницы назовите его один раз
_Setheight ();
}
}) ();
// -> </mce: script>

Различные страницы -линии, такие как доменное имя www.chinaz.com, book.chinaz.com совершенно другое. htm 1. Код ключа в коде ключа в www.chinaz.com/index.htm:


<iframe id = "j_elfadapting" src = "http://www.chinaz.com/xxxx.htm" mce_src = "http://www.chinaz.com/xxxx.htm" frameborder = "0" scolling = "Нет "Стиль =" Высота: 0; "> </iframe>

Добавьте следующее JS:


  1. <MCE: Script Type = "Text/JavaScript" > <!-

  2. ( Function () {)

  3. /**

  4. * Получите текущий домен

  5. **/

  6. Function _getdomain () {

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

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

  9. var _len = _hosts.length;

  10. if (_len> 2) {{

  11. Вернуть _hosts [_len-2] + "." + _Hosts [_len-1];

  12. }

  13. Return_hostname ;

  14. }

  15. document.ndsain = _getdomain ();

  16. }) ();

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

2. Код ключа в www.chinaz.com/xxxx.htm:


<iframe scolling = "no" frameborder = "0" style = "Display: none;" http://www.chinaz.com/proxy.htm#597 "id =" taobaoiframe ">
</iframe>


<MCE: Script Type = "Text/JavaScript"> <!-
(Function () {)
var pageHeight = document.body.scrollheight;
document.getElementById ('taobaoiframe').
}) ();
// -> </mce: script>

3. Все код в Proxy Page Book.chinaz.com/proxy.htm выглядит следующим образом: следующее:


<!
<html xmlns = "http://www.w3.org/1999/xhtml">
<голова>
<meta http-equiv = "content-type" content = "text /html; charset = gbk" />
</head>
<тело>
<MCE: Script Type = "Text/JavaScript"> <!-
(Function () {)
/**
* Получите текущий домен
**/
Function _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 height = window.location.hash.substring (1);
пытаться {
var = window.top.document.getElementByid ('j_elfaDapting');
if (el) {{
el.style.height = height + 'px';
}
}
поймать (e) {}
}) ();
// -> </mce: script>
</body>
</html>

Связанные статьи