Изменить высоту фрейма в зависимости от высоты блока в загружаемом документе
Здравствуйте. На сайте есть всплывающее окно и страница с формой регистрации. Через фрейм во всплывающем окне показываю эту форму посетителям с предложением зарегистрироваться. Если форма заполнена некорректно, появляются ошибки с указанием, что делать, при этом высота формы становится больше и кнопка "Зарегистрироваться" уезжает за пределы фрейма. Можно как-то динамически менять высоту фрейма в зависимости от высоты блока формы? Код:
<div id="frameblock-simple">
<iframe id="frame-simplereg" frameborder="0" src="/index.php?route=account/simpleregister" >
Ваш браузер не поддерживает плавающие фреймы!
</iframe>
</div>
javascript:
var iframe = document.getElementById('frame-simplereg'); // фрейм
var iframeDoc = iframe.contentWindow.document; // загружаемый во фрейме документ
iframeDoc.onload = function(){ // ждём загрузки документа во фрейме
var simpleReg = iframeDoc.getElementsByClassName('simple-content')[0]; // блок внутри загружаемого во фрейме документа. Эту строку браузер пропускает без объяснения причин.
iframe.style.height = simpleReg.offsetHeight + 'px'; // изменяем высоту фрейма в зависимости от высоты блока во внутреннем документе
}
Что я не так делаю? |
Цитата:
|
Вкладка в браузере перезагружается, вроде не ajax. Вот сайт: http://holy-landstore.ru/ чтобы попап увидеть, нужно плашку справа щёлкнуть "Получить 400 рублей". Вот страница регистрации http://holy-landstore.ru/index.php?r...simpleregister Из всплывающего окна я javascript убрал пока, он всё равно не работает.
|
Обработчик onload надо не на document фрейма (который погибает при перезагрузке) вешать, а на сам элемент <iframe>
|
Написал рабочий код с jquery, если нужен кому, пользуйтесь, прокомментировал подробно:
$(document).ready( function(){
/* Мозилла и старая Опера не показывают фрейм на той же странице, которая загружается через него, т.е. на странице регистрации, поэтому на ней мы удаляем код всплывающего окна из DOM */
var hostLength = window.location.hostname.toString().length + 7; // находим длину начальной части url: http:// + domain
var windowLock = window.location.href.toString().slice(hostLength); // отсекаем начальную часть url, оставляем "хвост"
if( windowLock === '/index.php?route=account/simpleregister' ){ // если это страница регистрации
$('#showarcticmodal').remove(); // удаляем код плашки
$('#arcticmodal').remove(); // удаляем код всплывающего окна
return;
}
var iframe = $('#frame-simplereg'); // фрейм
var frameblock = $('#frameblock-simple'); // блок, обрамляющий фрейм
iframe.load( function(){
var iframeDoc = iframe.contents(); // загружаемый во фрейме документ
var simpleReg = iframeDoc.find('.simple-content').get(0); // блок внутри загружаемого во фрейме документа(форма регистрации).
if( !iframeDoc || !simpleReg ){ // IE не даёт доступ к содержимому фрейма, поэтому ставим размеры с запасом
frameblock.get(0).style.height = '600px';
iframe.get(0).style.height = '770px';
}
else{ // изменяем размер блока с фреймом, в зависимости от высоты формы
frameblock.get(0).style.height = 50 + simpleReg.offsetHeight + 'px';
iframe.get(0).style.height = 50 + 170 + simpleReg.offsetHeight + 'px';
}
})
});
Кто-нибудь знает, как изменять стиль документа внутри фрейма через CSS? Если не трудно, прокомментируйте код, может я накосячил чего? |
Цитата:
iframe.css('height', 50 + 170); А зачем тянуть еще и frameblock? Он же сам растянется чтобы вместить в себя фрейм. Насчет IE - странно. Домен общий? Тогда должно работать. |
Цитата:
|
Цитата:
|
Цитата:
Цитата:
А так ты можешь на js проверить условие window.top !== window и добавить особый класс для <html>. |
Цитата:
Цитата:
|
| Часовой пояс GMT +3, время: 20:39. |