Изменить высоту фрейма в зависимости от высоты блока в загружаемом документе
Здравствуйте. На сайте есть всплывающее окно и страница с формой регистрации. Через фрейм во всплывающем окне показываю эту форму посетителям с предложением зарегистрироваться. Если форма заполнена некорректно, появляются ошибки с указанием, что делать, при этом высота формы становится больше и кнопка "Зарегистрироваться" уезжает за пределы фрейма. Можно как-то динамически менять высоту фрейма в зависимости от высоты блока формы? Код:
<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, время: 01:54. |