[ Поиск ] - [ Пользователи ] - [ Календарь ]
Полная Версия: Использование iframe для асинхронного обмена
sergeiss
Цитата (Zzepish @ 21.06.2012 - 01:45)
сейчас тож JS учу потихоньку, ибо Ajax-технология нужна

Я тут одну феньку делаю, сейчас как раз отлаживаю. С использованием iframe вместо ajax. Прикольно smile.gif Но у меня нету активного обмена данными. Юзер нажал кнопку - получил данные.

Зато реализовать проще намного, чем аякс - с ним тоже кое-что делал, так что могу сравнить.

Тема выросла в другой теме http://phpforum.ru/index.php?showtopic=62384&st=0
Дискуссию про айфреймы вынес в эту тему, а там оставил всё остальное.



Спустя 32 минуты, 29 секунд (21.06.2012 - 08:29) Michael написал(а):
iframe - это больше раньше использовался, когда с аяксом были у браузеров проблемы. Но сейчас то...
Если использовать современные методы, типа использования jQuery, аякс очень просто реализовывается несколькими строками. Хотя и без библиотек не сложно, если есть заготовки кода.

Спустя 22 минуты, 39 секунд (21.06.2012 - 08:52) sergeiss написал(а):
Цитата (Michael @ 21.06.2012 - 09:29)
iframe - это больше раньше использовался, когда с аяксом были у браузеров проблемы. Но сейчас то...

А чем плох iframe? Вот у меня юзер нажал кнопку/ссылку, надо подгрузить данные. Да не просто подгрузить, а еще и нарисовать. Заранее не известно, что именно он выберет, а данные могут быть в одном из нескольких разных форматов.
Так мне проще передать в айфрейм определенные ГЕТ-параметры и показать там то, что надо. Указанная страница сама знает, что и как нарисовать у себя же. Плюс к этому, заодно меняю некоторые данные в основной странице. И кода писать много не надо, вобщем-то.

Спустя 2 минуты, 44 секунды (21.06.2012 - 08:54) Michael написал(а):
И пользователи получается видят этот твой ифрейм и возможно в нем работают?

Спустя 10 минут, 39 секунд (21.06.2012 - 09:05) sergeiss написал(а):
Цитата (Michael @ 21.06.2012 - 09:54)
И пользователи получается видят этот твой ифрейм и возможно в нем работают?

Да, он не скрытый. То, что в нем показано, очень даже хорошо видно. Вверху страницы есть меню выбора объектов и их параметров, а ниже (как раз в айфрейме, о котором идет речь) показывается то, что соответствует запросу. Раньше грузилась вся страница, теперь - только часть. Визуально стало намного лучше.

Потому и говорю, что айфрейм - не так и плохо. А в моем случае даже очень хорошо smile.gif

PS. Юзеры у меня не работают в айфреме. Только данные оттуда могут забрать.

Спустя 8 минут, 32 секунды (21.06.2012 - 09:14) Michael написал(а):
я не говорю, что это как то особо плохо, работает и ладно.
Но идея какая?:
Есть страница, работает без перезагрузки, и ей нужны некие дополнительные данные с сервера.
Для получения данных - хорошо подходит аякс.
А ифрейм что возвращает - html разметку(включая <html></html> и т.д.), т.е. это не данные, а уже какой то результат.

Спустя 9 минут, 21 секунда (21.06.2012 - 09:23) sergeiss написал(а):
Цитата (Michael @ 21.06.2012 - 10:14)
А ифрейм что возвращает - html разметку(включая <html></html> и т.д.), т.е. это не данные, а уже какой то результат.

Ну, во-первых.. Как я уже сказал, данные могут быть разноплановые. Поэтому в зависимости от запроса подключаются те или иные обработчики. Могут выдаваться таблицы, картинки - каждый раз по-разному. Поэтому и разметка, и данные могут быть разными. Лучше на сервере это всё делать, чем передавать клиенту всю эту логику.
А во-вторых, не обязательно разметку возвращать. Можно и только данные. И самое главное!!!Когда аяксом передаешь что-то, то передаешь не чистые данные, а все равно какая-то разметка (обёртка) для них есть. Поэтому объем переданной информации все равно не равен объему данных smile.gif
И что самое главное - аяксом тоже можно передавать данные вместе с разметкой.

Поэтому я и подчеркнул, что в моем случае айфрейм заведомо лучше. Да, где-то лучше будет аякс. Но если мне все равно нужно передавать и данные, и разметку для их показа... Зачем изобретать велосипед?

Спустя 12 минут, 23 секунды (21.06.2012 - 09:35) Michael написал(а):
Цитата (sergeiss)
Когда аяксом передаешь что-то, то передаешь не чистые данные, а все равно какая-то разметка (обёртка) для них есть

с чего бы это? Я могу передать чистую json-строку. Никакой html разметки.
Цитата (sergeiss)
И что самое главное - аяксом тоже можно передавать данные вместе с разметкой.

вот именно, аяксом можно сделать все, это более общее решение. А нужные данные, в том числе и готовую разметку(если она нужна), естественно на сервере формировать.

iframe-ы, они как отдельные окна, не вписанные в dom документа. Некрасивое решение.

Спустя 16 минут, 21 секунда (21.06.2012 - 09:52) redreem написал(а):
Michael
sergeiss

я может че-то не понимаю конечно, но как чистым или jQuery ajax'ом отправить к примеру файл на сервер? помоему никак. вроде как во всех современных библиотеках файлы без перезагрузки страницы продолжают отправляться именно через iframe и именно для этого он и нужен в плане ajax-технологии. не?

Спустя 2 минуты, 43 секунды (21.06.2012 - 09:54) sergeiss написал(а):
Когда работаешь с аяксом, то, еще раз повторю, всякие хедеры все равно передаются. И, если не ошибаюсь, то и куки тоже. Так что там не только "чистые" данные бегают.
Далее - в айфрейме тоже не обязательно разметку передавать :) Можно тот же json использовать.

Цитата (Michael @ 21.06.2012 - 10:35)
iframe-ы, они как отдельные окна, не вписанные в dom документа.

А вот тут поподробнее... Как это афйрейм не вписан в ДОМ? А как же я тогда "умудряюсь" получать данные о нем с вызывающей страницы? Например,
<iframe id="iframe_data" 
onload=
"document.getElementById( 'iframe_data' ).style.height =
document.getElementById( 'iframe_data' ).contentWindow.document.body.scrollHeight + 'px';
show_loading( false ); "
></iframe>


И из него я могу устанавливать любые свойства в основной странице
<script language="javascript">parent.document.getElementById( 'menu_days' ).innerHTML='<?php echo $table_day_menu; ?>'</script>

Спустя 2 минуты, 18 секунд (21.06.2012 - 09:57) Michael написал(а):
redreem, да, вот именно для таких специфичных вещей ифреймы и используются. Когда форма с файлами сабмитится в ифрейм. Может и еще для чего то.

Спустя 11 минут, 20 секунд (21.06.2012 - 10:08) Michael написал(а):
при чем тут хедеры и куки? blink.gif

Цитата (sergeiss)
Далее - в айфрейме тоже не обязательно разметку передавать smile.gif Можно тот же json использовать

ты - проверял? Есть рабочий тестовый код? Я сам просто не помню, без проблем получаем эту строку из основного окна если в ифрейме нет никакой разметки.

Цитата (sergeiss)
А как же я тогда "умудряюсь" получать данные

ну причем тут то, что ты в конкретной своей задаче можешь сделать? Есть куча задач, в которых этого будет недостаточно или код будет не очень.
Обычное дело - подгружаешь новые данные и на них должны отработать существующие обработчики событий. А они отрабатывают на dom-e, а не каких то внедренных страницах.


Спустя 35 минут, 7 секунд (21.06.2012 - 10:43) sergeiss написал(а):
Цитата (Michael @ 21.06.2012 - 11:08)
при чем тут хедеры и куки?

При том, что они тоже создают определенный трафик. Только поэтому их упомянул.

Цитата (Michael @ 21.06.2012 - 11:08)
Обычное дело - подгружаешь новые данные и на них должны отработать существующие обработчики событий. А они отрабатывают на dom-e, а не каких то внедренных страницах.

И... В чем проблема? Я привел пример из своего "живого" кода. Подчеркиваю еще раз: я изменяю содержимое ОСНОВНОЙ страницы, но при этом код находится внутри айфрейма.
Точно также я могу вызвать любой обработчик с основной страницы, передав ему нужные данные. Нету никаких ограничений. Объясни, плз, где ты видишь эти ограничения?

ОК, попробуй запустить такой код:
main.php (тут еще надо добавить стандартные хедеры и тэги html и body)
Свернутый текст

<iframe id="ifr1" style="display:block; width:300px; height:200px" scrolling="yes" onload="alert('Timer stopped')" ></iframe><br>

<input
type="text" id="main_info" value="" />
<br /><br />
<input
type="button" onclick="document.getElementById( 'ifr1' ).src='info_exchange.php?'+Math.random();" value="Show server time!" />


info_exchange.php (это весь код скрипта, ничего больше не добавляй!!!)
Свернутый текст
<?php
for( $i=1; $i<=10; $i++)
{
// передача информации на основную страницу
echo "<script language=\"javascript\">parent.document.getElementById('main_info').value='".date( 'H:i:s' )."'</script>";

// вывод данных в айфреме, чтобы видеть его содержимое и сравнить с тем, что на основной странице
echo date( 'H:i:s' ).'<br>';

flush();
ob_flush();
sleep( 1 );
}
?>


Жмякаем по кнопке и видим время сервера. Показывается в 2-х местах, для большей наглядности.

А теперь напиши, плз, код аякса для выполнения этой же задачи и мы сравним "прозрачность" (понятность) кода и его объем :)

Спустя 30 минут, 3 секунды (21.06.2012 - 11:13) Michael написал(а):
Цитата (sergeiss)
При том, что они тоже создают определенный трафик. Только поэтому их упомянул.

я о трафике ничего не говорил, а о форматах данных. А хидеры и куки и там и там передаются, без разницы.
Цитата (sergeiss)
ОК, попробуй запустить такой код

Код у тебя какой то смешной. smile.gif
Особенно info_exchange.php - вывод тега <script> в цикле... Это же сколько кода. Плюс обработка события получения данных у тебя обрабатывается в получаемом коде, а должна в вызываемом. Это как раз и есть кривизна, которая не радует.

И мы говорили о json, вот info_exchange.php и должен возвращать чистый json, а не кучу скриптов.

В аяксе для этого достаточно только load использовать.


Цитата (sergeiss)
И... В чем проблема? Объясни, плз, где ты видишь эти ограничения?

Ты меня не понимаешь. Этот html и его объекты раскиданы по iframe-ам, и обработчики СОБЫТИЙ основного окна на нем не отработают. Да и манипулирование ими намного сложнее чем эл-тами одного документа. Например подсчет всех тегов <a>.

Спустя 13 минут, 30 секунд (21.06.2012 - 11:27) sergeiss написал(а):
Не знаю уж, чего ты тут смешного увидел smile.gif

Кстати говоря, плюсом такого подхода (с айфреймом) является возможность получать данные с сервера в течение очень длительного времени, не создавая новых запросов!!! Но зато при появлении данных в скрипте он их тут же передаст клиенту, без отдельного запроса со стороны клиента.
В "тестовом" коде это хорошо заметно: данные валятся и валятся на сервер, хотя он ничего не спрашивает smile.gif Айфрейм может "флудить" столько времени, сколько сервер его будет слушать.

Я эту возможность не использую на реальном сайте, но она существует.

Цитата (Michael @ 21.06.2012 - 12:13)
Плюс обработка события получения данных у тебя обрабатывается в получаемом коде, а должна в вызываемом.

Не совсем понял, что ты имел ввиду.

Цитата (Michael @ 21.06.2012 - 12:13)
Этот html и его объекты раскиданы по iframe-ам, и обработчики СОБЫТИЙ основного окна на нем не отработают. Да и манипулирование ими намного сложнее чем эл-тами одного документа. Например подсчет всех тегов <a>.

И тут тоже не понял. Я говорю про айфрейм как про транспорт передачи информации в основное окно. Как достаточно "чистой", так и с разметкой. Также и сам по себе айфрейм может содержать визуальные данные, а может быть вообще скрытым.
Чем тут манипулировать ты собираешься?

Спустя 2 часа, 25 минут (21.06.2012 - 13:52) Michael написал(а):
Цитата (sergeiss)
Я говорю про айфрейм как про транспорт передачи информации в основное окно

а выше ты говорил:
Цитата (sergeiss)
Да, он не скрытый. То, что в нем показано, очень даже хорошо видно

т.е. реализующий визуальный функционал, а не просто "транспорт"

Цитата (sergeiss)
Не совсем понял
...
И тут тоже не понял

увы даже не знаю чем помочь. sad.gif По мне так вполне осмысленные слова.

Спустя 23 минуты, 16 секунд (21.06.2012 - 14:15) sergeiss написал(а):
Цитата (Michael @ 21.06.2012 - 14:52)
итата (sergeiss)
Я говорю про айфрейм как про транспорт передачи информации в основное окно

а выше ты говорил:Цитата (sergeiss)
Да, он не скрытый. То, что в нем показано, очень даже хорошо видно

т.е. реализующий визуальный функционал, а не просто "транспорт"

Ну... Не вижу противоречий smile.gif Потому что тут возможно и то, и другое. Можно просто как транспорт (в моем примере из этой темы), можно и визуальный функционал (плюс одновременно транспорт данных!), как у меня сделано сейчас на моем сайте.

Спустя 10 минут, 46 секунд (21.06.2012 - 14:26) Michael написал(а):
Цитата (sergeiss @ 21.06.2012 - 13:15)
Ну... Не вижу противоречий smile.gif

А что тогда тебе не понятно тут:
Цитата (sergeiss)
И тут тоже не понял. Я говорю про айфрейм как про транспорт передачи информации в основное окно. Как достаточно "чистой", так и с разметкой. Также и сам по себе айфрейм может содержать визуальные данные, а может быть вообще скрытым.
Чем тут манипулировать ты собираешься?


?

Цитата (sergeiss)
Чем тут манипулировать ты собираешься?

как, для примера, подсчитаешь все ссылки на странице(и в родит. окне и во всех существующих ифреймах)?

Спустя 1 час, 26 минут, 46 секунд (21.06.2012 - 15:53) sergeiss написал(а):
То есть, вопрос сводится к тому, как получить доступ к содержимому айфрейма из основного скрипта?

Если об этом речь, то так (ifr1 - это айди айфрейма):

document.getElementById( 'ifr1' ).contentDocument - то же самое, что просто 'document' для текущего документа. А дальше работаем так, как работали бы и с текущим документом.

Например, надо узнать/установить величину инпута с id="inp"? Нет проблем :) Доступ получаем по строке
document.getElementById( 'ifr1' ).contentDocument.getElementById('inp').value


Надо подсчитать количество тэгов "a"? Тоже нет проблем, в основном скрипте пишем:
alert( document.getElementById( 'ifr1' ).contentDocument.getElementsByTagName('a').length )


На всякий случай проверил в Опере, Ослике, Огнелисе, Хроме. Работает :) В Сафари не проверил, т.к. он у меня чегой-то вообще перестал запускаться, давно уже.

Спустя 1 час, 20 минут, 39 секунд (21.06.2012 - 17:13) vagrand написал(а):
sergeiss
А в чем для тебя смысл в этом топике? Ты хочешь понять почему один из способов лучше или отстоять свою точку зрения?

Я объективно знаю две вещи которые нельзя сделать при помощи Ajax но можно сделать при помощи IFrame:
1. При помощи AJAX нельзя загрузить файл на сервер, а при помощи IFrame можно;
2. При помощи AJAX нельзя сделать кросдоменный запрос, а при помощи IFrame можно.

Но не смотря на все это я в своих проектах использую только AJAX, потому что для меня он более легок в обращении.

Спустя 1 час, 36 минут (21.06.2012 - 18:49) sebastjan написал(а):
Возник вопрос по айфремы.
Может туплю, не знаю, вы поправите.
А если такая схема,
-при действии юзера яваскриптом через скрытый ифрейм подгружать фото а при загрузке (получается в крытом режиме) передавать в дом и отображать тем же яваскрипт.
Что то намудрил наверное ,как всегда.
Поправте.

Спустя 2 часа, 38 минут, 5 секунд (21.06.2012 - 21:27) sergeiss написал(а):
Цитата (vagrand @ 21.06.2012 - 18:13)
sergeiss
А в чем для тебя смысл в этом топике?

Да просто речь зашла об этом, а дальше как-то "в детали ударились". Опять же - пока кому-то что-то рассказываешь, тем более в письменном виде, то и сам лучше понимаешь - не анекдот, кстати, а на самом деле это действует smile.gif Потому что тут не получится "на пальцах" объяснить, так, чтобы что-то промычать. Тут надо четко описать.

sebastjan - а зачем тут айфрейм??? Почему бы просто не указать адрес картинки? Если ты хочешь быть уверен, что она уже будет в кеше, то укажи адрес картинки для скрытого тэга img. А потом назначь ту же картинку видимому img.

Спустя 49 минут, 10 секунд (21.06.2012 - 22:16) bodja написал(а):
sebastjan
У img есть onload. rolleyes.gif

sergeiss
iframe хорошая весчь, я хотел ее применить в новом проекте,но до проверки безопасности так руки и не дошли.У него выполняется сразу яваскрипт после загрузки в отличие от аякса в котором скрипты не работают.Надо покурить,может ли получить ифрейм доступ к родительскому окну самостоятельно.

Спустя 24 минуты, 45 секунд (21.06.2012 - 22:41) sergeiss написал(а):
Цитата (bodja @ 21.06.2012 - 23:16)
Надо покурить,может ли получить ифрейм доступ к родительскому окну самостоятельно.

Вот этот код, показанный мной ранее
<script language="javascript">parent.document.getElementById( 'menu_days' ).innerHTML='<?php echo $table_day_menu; ?>'</script>
выполняется в айфрейме, устанавливает определенные свойства определенного объекта в родительском окне.

Спустя 19 минут (21.06.2012 - 23:00) bodja написал(а):
Мдя ,дело пахнет керосином,для кроссдомена пойдет только для раздачи,
а я блин так надеялся. unsure.gif
Надо будет подумать тогда ,куда можно применить.

Спустя 22 минуты, 39 секунд (21.06.2012 - 23:23) sergeiss написал(а):
bodja - для кроссдомена проверять надо. У меня-то на одном домене это работает. Возможно, что есть ограничения какие для кроссомена.
Вон аякс возьми - работает только с "родным" доменом.

Спустя 5 минут, 3 секунды (21.06.2012 - 23:28) killer8080 написал(а):
Цитата (vagrand @ 21.06.2012 - 17:13)
1. При помощи AJAX нельзя загрузить файл на сервер, а при помощи IFrame можно;

Не корректное утверждение. Не надо путать понятия AJAX и XMLHttpRequest. Iframe - это один из первых транспортов применявшихся в AJAX. Во вторых невозможность отправлять файл через XHR, скоро будет устранена в html5 XHR2 пруф1, пруф2.
Цитата (vagrand @ 21.06.2012 - 17:13)
2. При помощи AJAX нельзя сделать кросдоменный запрос, а при помощи IFrame можно.

в корне неверное утверждение, Same Origin Policy так же распространяется на ифреймы. Кстати в XHR2, если не ошибаюсь, будут возможны кросс доменные запросы.

Спустя 52 минуты, 57 секунд (22.06.2012 - 00:21) Sergen написал(а):
Почитал эту ветку и не могу понять. Например, есть форма. Пользователь ее заполняет. До отправки в обработчик php, можно ли данные проверить на предмет дубликатов в базе с помощью AJAX? Одни пишут что можно другие нет...Проясните пожалуйста эту ситуевину.

Спустя 2 минуты, 59 секунд (22.06.2012 - 00:24) Invis1ble написал(а):
До отправки нельзя, если юзаешь ajax - это уже отправка

Спустя 1 минута, 16 секунд (22.06.2012 - 00:25) bodja написал(а):
sergeiss
Проверил на кроссдомене ,доступа к фрейму через DOM нет.
На своем домене есть.
Уже неплохо ,но выдрать инфу из другого домена уже неудастся,только пофтыкать. biggrin.gif

Спустя 5 часов, 39 минут, 20 секунд (22.06.2012 - 06:04) Michael написал(а):
Цитата (sergeiss)
То есть, вопрос сводится к тому, как получить доступ к содержимому айфрейма из основного скрипта?

нет, не к этому. Забей.
Цитата (Sergen)
Почитал эту ветку и не могу понять. Например, есть форма. Пользователь ее заполняет. До отправки в обработчик php, можно ли данные проверить на предмет дубликатов в базе с помощью AJAX?

конечно можно.

Спустя 4 часа, 47 минут, 7 секунд (22.06.2012 - 10:52) varvar написал(а):
у айфрейма есть один большой недостаток, через него нельзя передать данные с другого ресурса, но так же есть и один большой плюс, файлы в фоновом режиме на сервак можно передать только айфреймом

но, имхо, для обычных запросов, удобнее пользоваться XMLHttpRequest + JSON

Спустя 29 минут, 22 секунды (22.06.2012 - 11:21) killer8080 написал(а):
Цитата (bodja @ 22.06.2012 - 00:25)
Проверил на кроссдомене ,доступа к фрейму через DOM нет.
На своем домене есть.

На другой домен нельзя, на субдомен - можно, но для этого нужно провести некоторые манипуляции. Например наша страница висит на домене www.site.ru, а ифрейм грузиться с iframe.site.ru. Для того чтобы родительское окно имело доступ к DOM ифрейма, и наоборот, нужно на обеих страницах прописать
document.domain = "site.ru";

Спустя 7 дней, 4 часа, 5 минут, 38 секунд (29.06.2012 - 15:27) Guest написал(а):
Цитата
А чем плох iframe?

Например отсутстием гибкости настройки.
+ более тяжелая интеграция с существующими элементами. А если результат выборки, если он будет в айфрейме крайне не дружит с джавакриптом.
Думаю хотя бы этих проблем УЖЕ достаточно


_____________
* Хэлп по PHP
* Описалово по JavaScript
* Хэлп и СУБД для PostgreSQL

* Обучаю PHP, JS, вёрстке. Интерактивно и качественно. За разумные деньги.

* "накапливаю умение телепатии" (С) и "гуглю за ваш счет" (С)

user posted image
Быстрый ответ:

 Графические смайлики |  Показывать подпись
Здесь расположена полная версия этой страницы.
Invision Power Board © 2001-2024 Invision Power Services, Inc.