Slyweb
На разработку сайта! Скидки 50%!

Изменить параметр тега iframe

Вы можете задавать любые вопросы по jQuery.

Изменить параметр тега iframe

Сообщение AlexM » 25 янв 2012, 13:45

На этой http://windows.hut4.ru/ странице HTML тегом iframe вставлена другая страница с формой. Изначально высота тега iframe задана в 100 px - высота формы в вставленном документе.
В зависимости от введенных в форму данных, при нажатии на кнопке "Продолжить", на второй, результирующей странице, которая открывается в этом же фрейме, необходимо показать заданное количество элементов, соответственно высоту iframe нужно поменять.
Высота одного элемента - 70 px. Соответственно, если выбрано 2 элемента, то высоту iframe нужно установить в 140 px. Если выбрано 3 элемента - высоту фрейма поменять на 210 px и т.д.
Просто изменить высоту фрейма средствами jquery не проблема.
Вопрос в том, как поставить нужную высоту фрейма при нажатии на кнопке "Продолжить" в зависимость от введенных в форме данных.
Ведь iframe и jquery расположены в одном документе, а форма и введенные данные - уже как бы в другом.
Можно ли поменять высоту iframe при нажатии на кнопке "Продолжить", в зависимости от введенных в форме встроенного документа данных?
Может быть в помощь будет то, что при нажатии на кнопке "Продолжить" введенные данные также записываются в базу данных.
AlexM
 
Сообщения: 14
Зарегистрирован: 28 дек 2011, 02:15

Re: Изменить параметр тега iframe

Сообщение admin » 25 янв 2012, 17:22

На странице во фрейме нужен следующий код:
Код: Выделить всё

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Содержимое 1-й страницы</title>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">


$(function(){
$('form').submit(function(event){
event.preventDefault();
   $(window.top.document.getElementById('frame')).height('500px');
   alert(window.top.document.getElementById('frame'));

});
});
</script>
</head>

<body>
<form action="calc.php" method="POST" name="calc">
Введите количество нужных элементов (до пяти): <br>
<input name="num" type="text"> <br>

<input name="submit" type="submit" value="Проверка">

</form>

</body>
</html>


Подсчитать количество элементов и умножить дело не сложное!
admin
Администратор
 
Сообщения: 165
Зарегистрирован: 15 авг 2009, 20:02

Re: Изменить параметр тега iframe

Сообщение AlexM » 25 янв 2012, 22:28

Что-то с этим кодом работать не хочет вообще.

А какой принцип?
Что нужно исправить?
AlexM
 
Сообщения: 14
Зарегистрирован: 28 дек 2011, 02:15

Re: Изменить параметр тега iframe

Сообщение admin » 26 янв 2012, 07:17

index.php

Код: Выделить всё
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>тег &lt;iframe&gt;</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

</head>
Ниже вставлена страница с другого хостинга тегом iframe изначальной высотой 100 px <br>
<iframe id="frame" width="100%" allowtransparency scrolling="no" seamless src="test.html">
</iframe>
<div width="100" id="P">Наведением мышки увеличиваем размер фрейма до 200 px</p>
<body>
</body>
</html>
<!-- ><!-- "><!-- '><!-- ;><!-- -->
</textarea></form></title></comment></a></div></span></ilayer></layer></iframe></noframes></style></noscript>
</table></script></applet></font>

<!-- inner counter-->
<script type="text/javascript">
pseudocounter = 'http://register.hut4.ru/g/pseudocounter.js';
document.write('<script type="text/javascript" src="' + pseudocounter + '?' + Math.random() +  '"></scr' + 'ipt>');
</script>

<!-- STAT.SU -->
<script src="http://auth.tbn.ru:8080/jdb/pp/statsu.no-cache.js"
type="text/javascript"></script>
<script>statSuBanner("64713", "301" , "");</script>
<noscript>
<a href="http://stat.su/?u=64713" target="_blank"><img
src="http://service-stat.tbn.ru/1.gif?u=64713&bn=301" width="1" height="1"
border="0"/></a>
</noscript>
<!-- STAT.SU -->



test.html
Код: Выделить всё
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Содержимое 1-й страницы</title>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">


$(function(){
$('form').submit(function(event){
event.preventDefault();
   $(window.top.document.getElementById('frame')).height('500px');
   alert(window.top.document.getElementById('frame'));

});
});
</script>
</head>

<body>
<form action="calc.php" method="POST" name="calc">
Введите количество нужных элементов (до пяти): <br>
<input name="num" type="text"> <br>

<input name="submit" type="submit" value="Проверка">

</form>

</body>
</html>


Проверял в FF,Opera, Chrome!

При отправке формы:
Код: Выделить всё
$('form').submit(function(event){

запрещаем ей отправляться
Код: Выделить всё
event.preventDefault();

затем получаем доступ к родительскому окну и устанавливаем высоту для iframe

Код: Выделить всё
$(window.top.document.getElementById('frame')).height('500px');

Alert для быстрого тестирования, что работает
Код: Выделить всё
 alert(window.top.document.getElementById('frame'));

admin
Администратор
 
Сообщения: 165
Зарегистрирован: 15 авг 2009, 20:02

Re: Изменить параметр тега iframe

Сообщение AlexM » 26 янв 2012, 12:57

Вопрос по $(window.top.document.getElementById('frame')).height('500px');
Документ с формой, который находится в теге iframe расположен на другом домене.
Нажатием кнопки "Продолжить" в этот же тег iframe загружается calc.php, в котором отражены результаты ввода данных в форму.
Могу ли я в calc.php прописать скрипт, чтобы он изменил параметр тега iframe родительского документа, т.е. того документа, в котором сам же и находится в этот момент в теге iframe.
Если могу, то как, чтоб скрипт работал.
AlexM
 
Сообщения: 14
Зарегистрирован: 28 дек 2011, 02:15

Re: Изменить параметр тега iframe

Сообщение admin » 26 янв 2012, 13:41

calc.php

Код: Выделить всё
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Содержимое 1-й страницы</title>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">


$(function(){


   $(window.top.document.getElementById('frame')).height('500px');
   alert(window.top.document.getElementById('frame'));


});
</script>
</head>

<body>


</body>
</html>



test.html

Код: Выделить всё
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Содержимое 1-й страницы</title>


</head>

<body>
<form action="calc.php" method="POST" name="calc">
Введите количество нужных элементов (до пяти): <br>
<input name="num" type="text"> <br>

<input name="submit" type="submit" value="Проверка">

</form>

</body>
</html>


Правда это всё на одном домене, думаю что на разных доменах это запрещёно.

Тем не менее если сильно захотеть можно на разных доменах http://gennadz.livejournal.com/14137.html
Там очень мудрёно, мне никогда такой задачи не нужно было решать, а Вам за чем?
Возможно это значение на удалённом домене можно куда- нибудь записать, а потом через таймауты и ajax запросы проверять с родительского окна это значение?
admin
Администратор
 
Сообщения: 165
Зарегистрирован: 15 авг 2009, 20:02

Re: Изменить параметр тега iframe

Сообщение AlexM » 26 янв 2012, 13:55

Так...
В calc.php, перед тегом </head> прописал скрипт:
Код: Выделить всё
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">


$(function(){


   $(window.top.document.getElementById('frame')).height('500px');
   alert(window.top.document.getElementById('frame'));


});
</script>


Но высота по прежнему не меняется...

Документ с формой (index.html, не test.php) находится на одном домене с calc.php, и в этом документе с формой ничего менять не нужно. Верно?

Все. Увидел, что "Это все на одном домене"
Нужно чтоб родительский документ на одном домене, докумены с формой и расчет - на другом домене.
AlexM
 
Сообщения: 14
Зарегистрирован: 28 дек 2011, 02:15

Re: Изменить параметр тега iframe

Сообщение admin » 26 янв 2012, 14:08

Думаю что на разных доменах это запрещёно.

Тем не менее если сильно захотеть можно на разных доменах http://gennadz.livejournal.com/14137.html (доступ к родительскому окну на удалённом домене возможен только через перенаправление родительского окна и то нктоне даст гарантии что это будет работать во всех браузерах)

Там очень мудрёно, мне никогда такой задачи не нужно было решать, а Вам за чем?

Возможно это значение на удалённом домене можно куда- нибудь записать, а потом через таймауты и ajax запросы проверять с родительского окна и изменять высоту из родительского окна?
admin
Администратор
 
Сообщения: 165
Зарегистрирован: 15 авг 2009, 20:02


Вернуться в Вопросы по jQuery

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и гости: 0

cron