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

Решение адаптивной высоты страницы Iframe Frame

Автор：Eve Cole Время обновления：2010-01-06 17:05:40

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

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

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 = "Нет "style =" Высота: 0; "> </iframe>

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

<mce:script type="text/javascript"><!--
(функция(){
/**
* Получите текущий домен
**/
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];
}
вернуть _hostname;
}
document.domain = _getdomain ();
})();
// --></mce:script>

2. Введите следующий код в подстранию http://www.chinaz.com/xxx.htm. Вот и все


<mce:script type="text/javascript"><!--
(функция(){
/**
* Получите текущий домен
**/
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];
}
вернуть _hostname;
}

окно.онлоад = функция()
{
// Установить домен подпаги
document.domain = _getdomain ();
function_setheight ()
{
if (window.parent! = Window)
{
пытаться
{
// Установить высоту родительского iframe
parent.document.getElementbyId ("j_elfadapting"). style.height = document.body.scrollheight+ 'px';
}
поймать(е)
{
}
}
// Устанавливают каждые 2 с, в основном будут совместимы с изменениями высоты после загрузки подпаги.
setTimeout (_setheight, 2000);
}
// Вызывается один раз после загрузки подпаги
_setheight ();
}
})();
// --></mce:script>

Различные родительские страницы, такие как www.chinaz.com, book.chinaz.com имеют совершенно разные доменные имена. Чтобы внедрить книгу .Chinaz.com/xxxx.htm и XXX.HTM необходимо скрыть и внедрить www.chinaz.com/proxy.htm в качестве прокси. .htm#500 , что означает высоту 500px.

1. Код ключа в www.chinaz.com/index.htm Page:


<iframe id = "j_ selfaDapting" src = "http://www.chinaz.com/xxxx.htm" mce_src = "http://www.chinaz.com/xxxx.htm" frameborder = "0" scolling = "Нет "style =" Высота: 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.          вернуть _hostname;
  14. }
  15. document.domain = _getdomain ();
  16. })();
  17. // --></mce:script>

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


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


<mce:script type="text/javascript"><!--
(функция(){
var pageHeight = document.body.scrollheight;
document.getElementbyId ('taobaoiframe'). src = 'http://www.chinaz.com/proxy.htm#' + pageheight;
})();
// --></mce:script>

3. Все коды в Proxy Page Book.chinaz.com/proxy.htm следующие:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<голова>
<meta http-equiv = "content-type" content = "text /html; charset = gbk" />
</голова>
<тело>
<mce:script type="text/javascript"><!--
(функция(){
/**
* Получите текущий домен
**/
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];
}
вернуть _hostname;
}
document.domain = _getdomain ();
var height = window.location.hash.substring (1);
пытаться{
var el = window.top.document.getElementbyId ('j_elfaDapting');
if (el) {
el.style.height = height + 'px';
}
}
поймать (e) {}
})();
// --></mce:script>
</тело>
</html>

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