Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Изменить высоту фрейма в зависимости от высоты блока в загружаемом документе (https://javascript.ru/forum/dom-window/52078-izmenit-vysotu-frejjma-v-zavisimosti-ot-vysoty-bloka-v-zagruzhaemom-dokumente.html)

Sigizmund2012 03.12.2014 13:21

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

Что я не так делаю?

danik.js 03.12.2014 13:41

Цитата:

Сообщение от Sigizmund2012
Что я не так делаю?

Может у тебя фрейм не перезагружается? То есть форма аяксом отсылается.

Sigizmund2012 03.12.2014 14:08

Вкладка в браузере перезагружается, вроде не ajax. Вот сайт: http://holy-landstore.ru/ чтобы попап увидеть, нужно плашку справа щёлкнуть "Получить 400 рублей". Вот страница регистрации http://holy-landstore.ru/index.php?r...simpleregister Из всплывающего окна я javascript убрал пока, он всё равно не работает.

danik.js 03.12.2014 14:16

Обработчик onload надо не на document фрейма (который погибает при перезагрузке) вешать, а на сам элемент <iframe>

Sigizmund2012 04.12.2014 18:21

Написал рабочий код с 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? Если не трудно, прокомментируйте код, может я накосячил чего?

danik.js 04.12.2014 18:27

Цитата:

Сообщение от Sigizmund2012
Написал рабочий код с jquery

Там от jQuery х*й да них*я. Если уж делаешь, то делай до конца:
iframe.css('height', 50 + 170);

А зачем тянуть еще и frameblock? Он же сам растянется чтобы вместить в себя фрейм.

Насчет IE - странно. Домен общий? Тогда должно работать.

danik.js 04.12.2014 18:27

Цитата:

Сообщение от Sigizmund2012
как изменять стиль документа внутри фрейма через CSS?

А как его изменять не внутри фрейма?

Sigizmund2012 04.12.2014 20:18

Цитата:

Сообщение от danik.js (Сообщение 344507)
Там от jQuery х*й да них*я. Если уж делаешь, то делай до конца:
iframe.css('height', 50 + 170);

А зачем тянуть еще и frameblock? Он же сам растянется чтобы вместить в себя фрейм.

Насчет IE - странно. Домен общий? Тогда должно работать.

  1. А как сюда iframe.css('height', 50 + 170) добавить высоту формы simpleReg.offsetHeight, тем более если она может динамически изменяться? Я jquery не знаю почти, мне пока ванильный js ближе, это написал потому, что на сайте весь js через библиотеку эту сделан.
  2. Не знаю почему, но у меня фрейм не растягивает родительский блок и всплывающее окно схлопывается.
  3. Выводил в консоль переменные загружаемого во фрейме документа и формы в нём, IE 9 написал, что они не определены. Домен один и тот же.
  4. Я не хочу страницу регистрации изменять, я хочу только, чтобы она во фрейме по-другому выглядела. Это можно сделать через js, но больно геморройно и по-быдлокодерски как-то, да и ишак не даст по вышеизложенной причине. Кроссбраузерно и просто сделать похоже не получится.

danik.js 04.12.2014 21:34

Цитата:

Сообщение от Sigizmund2012
А как сюда добавить высоту формы

Так и добавляй. Я просто для краткости не добавил. И почему высоту формы? Разве не высоту всего <body>?

Цитата:

Сообщение от Sigizmund2012
Я не хочу страницу регистрации изменять, я хочу только, чтобы она во фрейме по-другому выглядела.

А, теперь понял о чем ты. Ну по-моему на css нельзя никак. Хотя в голове что-то всплыло - кажется дефолтные стили какого-то браузера. Вроде бы Opera (или хром) как-то выставляет разные стили для отображения ошибки соединения на основной странице и если она отображается во фрейме. Но наверняка там специфичный для браузера селектор.

А так ты можешь на js проверить условие window.top !== window и добавить особый класс для <html>.

Sigizmund2012 04.12.2014 22:50

Цитата:

Сообщение от danik.js
И почему высоту формы? Разве не высоту всего <body>?

Нет, мне ж не вся страница нужна, а только форма в ней. Весь смысл шаманских плясок вот в чём: если пользователь заполнил форму с ошибками, под инпутами выводятся подсказки "пароль 1234 слишком простой", "введите e-mail" и т.д., которые изменяют высоту формы и кнопка "Зарегистрироваться" уезжает вниз за пределы всплывающего окна. Мой код просто подгоняет высоту окна под новый размер формы.
Цитата:

Сообщение от danik.js
А так ты можешь на js проверить условие window.top !== window и добавить особый класс для <html>

Вот это не совсем понятно. Код window.top !== window проверяет, не является ли верхний фрейм(он у меня один ) текущей страницей? Кстати в справочнике нашёл запись window.top !== window.window, может она более правильная? Далее, что-то типа window.top.head.appendChild( Сгенеренный мной <style>Мои стили</style> ) ?

danik.js 04.12.2014 23:21

Цитата:

Сообщение от Sigizmund2012
может она более правильная?

alert(window === window);

alert(window === window.window);

alert(window === window.window.window.window.window.window.window.window);


Я думаю третий вариант в четыре раза правильней второго и в восемь раз - первого :D

Sigizmund2012 04.12.2014 23:39

Цитата:

Сообщение от danik.js
в четыре раза правильней второго и в восемь раз - первого

Убедил. Вот, на w3scools.com как пишут window.top != window.self, думаю так наиболее правильно.
Ну а что насчёт "window.top.head.appendChild( <style>Мои стили</style> )"? Я в правильном направлении копаю?

danik.js 05.12.2014 00:04

Цитата:

Сообщение от Sigizmund2012
window.top.head.appendChild

Это зачем?

Sigizmund2012 05.12.2014 09:16

Цитата:

Сообщение от danik.js
Это зачем?

Хочу подключить к документу во фрейме свои стили. Как-то так:
if( window.top !== window.self ){
	var style = window.top.document.createElement('style');
	style.innerHTML = '.simple-content{background: green;}';
	window.top.document.head.appendChild( style );
}

Но что-то этот код нихрена не работает.

danik.js 05.12.2014 13:05

Но зачем? Почему бы просто не назначить особый класс?

Sigizmund2012 05.12.2014 13:13

Цитата:

Сообщение от danik.js
Почему бы просто не назначить особый класс?

Потому что я не знаю, что такое особый класс.:-? Да и классов в javascript нет вроде. Если имеется ввиду css класс, то как его назначить? Что-то не догоняю я.

danik.js 05.12.2014 15:28

Цитата:

Сообщение от Sigizmund2012
Если имеется ввиду css класс, то как его назначить? Что-то не догоняю я.

Да. Назначить просто.
element.className += ' special-class';


Чтобы назначить класс, например для <html> пиши document.documentElement.className ...

Sigizmund2012 09.12.2014 10:10

Через jquery получается класс вот так добавить:
iframeDoc.find('.simple-content').addClass('h1backgr');

правда селектор тега в Хроме почему-то не работает, т.е. код:
iframeDoc.find('h1').addClass('h1backgr');

в Хроме не покажет ничего. Всем спасибо за внимание, особенно danik.js

Deff 09.12.2014 18:07

Sigizmund2012,
:write: А зачем Вы кавыряетесь с фреймом имея jQuery ?
Не проще ли данные формы отправлять и получать пост-запросом аяксом из DIV(а), стилизованного под модальное окно, в него же ?
Для отправки формы аяксом существует даж специальный объект FormData()


Часовой пояс GMT +3, время: 03:54.