Opera, iframe'ы и display:none

открой для себя div :)

То, что не показывается грузить не обязательно. Это by design :)

В свете того, что мы видели в соседнем треде, это хорошо, что браузер не грузит такие ифреймы

> открой для себя div

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

> То, что не показывается грузить не обязательно. Это by design

Яйца бы оторвать тем, кто такой "design" выдумал.

Вот из-за таких как ты потом люди ходят и вопят, что у них украли пароль с любимого вконтакта ;)

man AJAX

> Вот из-за таких как ты потом люди ходят и вопят, что у них украли пароль с любимого вконтакта

В чем проблема украсть через видимый, но маленький (0 на 0, к примеру) фрейм?

> man AJAX

Я, как бы, в курсе. Фреймы нужны для разделения JS-окружения и одноименных идентификаторов. Без них надо скрипты всех типов содержимого собирать вместе, переписывать для одновременного размещения в одном окружении нескольких экземпляров содержимого и т.д. Проще, пожалуй, будет выкинуть убогую Оперу из списка поддерживаемых браузеров.

«Потому что я не осилил — в топку», да вы крутой девелопер. Далеко пойдёте. Рекомендую попробовать устроиться в MS, там таких любят.

Запрещённый iframe ;) By design не грузить то, что не видно, означает, не тягать лишний траффик и не грузить лишним запросами сервер о том, чего на экране всё равно не видно. Если аффтар не осилил нормальные способы подгрузки и/или показа скрытия информации, то ССЗБ.

Обсуждение высосано из пальца. По стандарту CSS 2.1:

>display:none

> This value causes an element to generate no boxes in the formatting structure (i.e., the element has no effect on layout). Descendant elements do not generate any boxes either; this behavior cannot be overridden by setting the 'display' property on the descendants.
> Please note that a display of 'none' does not create an invisible box; it creates no box at all. CSS includes mechanisms that enable an element to generate boxes in the formatting structure that affect formatting but are not visible themselves. Please consult the section on visibility for details.

!it creates no box at all! Опера ведёт себя согласно стандарту, другие браузеры его нарушают.

А автору темы, как и рекомендует стандарт, в таких случаях надо использовать visibility:hidden.

> it creates no box at all

Ну и замечательно, это не нужно. Нужно, чтобы во фрейм загрузилась страничка по указанному адресу, а отрисовывать ее не нужно.

Речь идет не о показе/сокрытии информации, а об организации управления показом страниц. В условиях, когда имеется сложный web-интерфейс, основанный не только на AJAX'е, но и на обычных страницах, которые не готовы разделять программное окружение друг с другом (от совпадающих идентификаторов элементов до глобальных структур данных и перегружаемых функций), возникновение требования сделать более сложную систему показа содержимого нежели загрузка и отображение средствами браузера ведет либо к полной переделке всего, либо к загрузке страниц в отдельные фреймы, чтобы сохранить изоляцию их друг от друга.

А траффик и запросы наоборот экономятся за счет уменьшения кол-ва загрузок одних и тех же страниц.

>но и на обычных страницах, которые не готовы разделять программное окружение друг с другом

т.е. вы, как автор, не справились с разделением, а виноват браузер? Любопытно.

>Нужно, чтобы во фрейм загрузилась страничка по указанному адресу, а отрисовывать ее не нужно.

Ты сообщение до конца не дочитал? visibility:hidden!

> Ты сообщение до конца не дочитал? visibility:hidden!

Я как раз дочитал. То, что при display:none элемент не позиционируется на странице, не рассчитывает размеры и т.д. - это во всех браузерах, к счастью. Согласно стандарту, который ты процитировал. А вот то, что такой фрейм не отправляет на сервер запрос по указанному ему URL и не получает данные - про это в стандарте ничего не сказано и так поступает только Опера.

Visibility:hidden делает совсем не то. Такой элемент позиционируется, для него рассчитываются размеры, он влияет на позиционирование других элементов (цитата из стандарта: "The 'visibility' property specifies whether the boxes generated by an element are rendered. Invisible boxes still affect layout (set the 'display' property to 'none' to suppress box generation altogether)."). Но при этом он остается невидимым. Мне это совсем не нужно, т.к. задача заключается в замещении механизма браузера показа страниц. Т.е. страницы, которые до появления данного требования нормально грузились браузером, теперь грузятся во фреймы, один из которых отображается пользователю, для которого визуально ничего не меняется в представлении страницы. Соответственно, в один момент времени на экране показан только один из таких фреймов, остальных как бы нет. Поскольку у каждого фрейма отдельное окно, DOM, программное окружение, то такой подход минимизирует переделки в основной части системы.

> т.е. вы, как автор, не справились с разделением, а виноват браузер?

Я и не пытался. Мягко говоря не сопоставимые задачи: помещение тех же страниц во фреймы, с минимумом переделок или переделка нескольких тысяч строк JS/HTML чтобы можно было держать несколько страниц внутри одного DOM'а и корректно совмещать их программные окружения. Вариант с фреймами работает во всех браузерах, кроме Оперы. Вывод, по-моему, очевиден.

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

Перефразирую:
>Мягко говоря не сопоставимые задачи: преписать полностью по стандартам кривую страничку IE only и отказаться от поддержки всего, что не IE.

Звучит так же. Проблема, собственно, у вас. И поскольку, как вы сами сказали "про это в стандарте ничего не сказано", то браузер волен делать так, как пожелает. У вас от этого работать перестаёт или что? Если всё работает, то в чём сыр-бор? Маленькая задержка на подгрузку? Думаете проще просто заблокировать Оперу и это обрадует пользователей? Не вижу реальных проблем.

Вы, случаем, не жалуетесь ещё, что пользователи оперы могут использовать UserCSS на и таким образом устроить локальный дефейс вашего сайта? А ещё пользователи Оперы могут отключить iframe'ы вообще. Вот ужас то!

Не нужно чинить то, что не сломано.

> браузер волен делать так, как пожелает

Да, конечно. Но, во-первых, влияние стилей отображения на поведение элементов - очень спорный и неожиданный момент, во-вторых, другие популярные браузеры так не поступают. Кстати, до появления XmlHttpRequest'а на базе невидимых iframe'ов делали взаимодействие с сервером "а ля AJAX". В Опере, значит, оно не работало, любопытно.

> У вас от этого работать перестаёт или что?

Естественно.

> в чём сыр-бор?

Разнообразие поведений браузеров и богатство фантазии их разработчиков раздражает.

> Думаете проще просто заблокировать Оперу и это обрадует пользователей?

95% пользователей даже слова такого не знают - Опера.

Кстати, я нигде не говорил, что речь про сайт идет.

Почему естественно, что вы такого там делаете? Пример кода хотя бы что ли.

>95% пользователей даже слова такого не знают - Опера.
Скажи это яндексу, у которого их > 20%.

>Кстати, я нигде не говорил, что речь про сайт идет.
А что же это? Сферический конь в вакууме обсуждать сложно.

> Почему естественно, что вы такого там делаете?

Говорю: замещение стандартного показа страниц. Часть страниц грузится при старте системы (незримо, разумеется) и далее уже не выгружаются, а те, что подгружаются во время работы, сначала грузятся в невидимом режиме. Пользователь видит на экране только одну страницу, как и раньше. При переходе к странице, которая уже загружена, переход осуществляется мгновенно (в случае с IE - почти мгновенно, т.к. он тормозно отрисовывает). Цель - мгновенный показ некоторых часто используемых страниц и "кеширование" нескольких последних для быстрого возврата. Содержимое страниц достаточно сложное и загрузка стандартными средствами может длится несколько десятков секунд, а кроме того части страницы отображаются последовательно, а не разом. Для борьбы с этим придумали вот такую штуку.

> А что же это?

Интерфейс прикладного приложения, построенный модным нынче образом на web-технологиях. Если учесть, что "должно выглядеть и вести себя, как обычное приложение", то решение, на мой вкус, спорное, хотя плюсы конечно есть.

Для пользователей этого приложения гораздо актуальнее IE 5.0, нежели Опера, т.к. у многих стоит win2k. Но хотелось обеспечить максимально широкую совместимость.

т.е. это вы так мозилловский prefetch реализовываете? ну так ССЗБ. Если страница десятками секунд, значит в самой странице что-то не то. Возможно, перепроектирование.

Приложение на веб-технологиях… это нынче модно, да. Но если оно для своих и всё такое, это неслабый такой геморрой. Установить у себя корпоративный стандарт — юзать Firefox, и всё. Всё остальное запретить устанавливать.

Prefetch - это упредительная загрузка. В данном же случае, есть ряд страниц, которые используются очень часто (интерфейсы ряда общеупотребительных подсистем). Их разумно всегда иметь загруженными. Остальное - нужен быстрый возврат на один-два шага назад. Кроме этого, нельзя, чтобы пользователь видел постепенную загрузку страницы (даже если она несколько секунд грузится), это оскорбляет его эстетическое чувство (ну или еще что, топочут ногами, в общем). Поэтому загрузка осуществляется незримо и страница показывается уже полностью загруженной.

А страница, загружающаяся 20-30 секунд - легко. Выборка и отображение каких-нибудь данных, например. 10 секунд на подготовку данных на сервере и 10-20 секунд на визуализацию. Когда в качестве данных выступает список сложных элементов (каждый элемент с картинками, подписями и т.д.) из нескольких десятков тысяч элементов, то примерно такое время и тратится (список, разумеется, подгружается по частям, если сразу все выдавать, то это совсем надолго). Ну может немного побыстрее. В основном все не так печально, среднее время загрузки страницы меньше 10 секунд. Но явственно видна постепенность загрузки.

А если пользователь перейдёт туда, куда вы не ожидали?

Если у вас реально всё так медленно, что приходится делать костыли, то стоит задуматься, а нужен ли этот веб2.0 там?

Всё же имхо проще дёргать xmlhttprequest.

// так и не пойму, что за приложение такое, где куча сложных элементов, картинки и прочее. фотошоп что ли делаете? :)

> Я правильно понимаю, что Opera не будет грузить содержимое iframe'а, пока он имеет стиль display:none? На главной яндекса, суггест сделан на <iframe src="http://suggest.yandex.ru/tsuggest-1.4.1.html"style="display:none&qu...; и благополучно работает в опере. Так что, видимо вы ошибаетесь.

>Соответственно, в один момент времени на экране показан только один из таких фреймов, остальных как бы нет.

Тогда используйте абсолютное или фиксированное позиционирование, по желанию внутри какого-нибудь контейнера-дива.

> Тогда используйте абсолютное или фиксированное позиционирование

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

Если я ошибаюсь - это здорово. Но когда я загружаю в Опере страничку с подобным iframe'ом, у меня просто не приходит запрос на сервер по соответствующему URL-ю.

Собственно, что именно сделано у Яндекса?

> А если пользователь перейдёт туда, куда вы не ожидали?

У приложения есть несколько подсистем верхнего уровня, чьи интерфейсы всегда можно держать подготовленными - использование этих подсистем является ключевым в большинстве типовых видов работ с системой. Остальное - хранятся последние несколько открытых страниц. Возврат на один-два шага назад - очень частая операция и именно здесь пользователь ждет, что все будет мгновенно.

А так - ничего угадывать не пытаемся.

> Если у вас реально всё так медленно, что приходится делать костыли, то стоит задуматься, а нужен ли этот веб2.0 там?

Решение насчет web-интерфейса действительно на мой взгляд неоднозначное. Но его приняли когда-то и так теперь и будет. Есть и плюсы - теперь интерфейс легко переделывать и его рисует профессиональный дизайнер. Ну и клиент получаем на халяву.

> Всё же имхо проще дёргать xmlhttprequest.

Так он и используется для многих страниц. Во фрейм загружается заготовка страницы со скриптами и базовой фурнитурой, а смысловое наполнение дергается AJAX'ом. Основной смысл фреймов на этом уровне - предоставить каждой страничке индивидуальный DOM, JS-окружение и т.д. Чтобы сами страницы не переделывать.

> так и не пойму, что за приложение такое, где куча сложных элементов, картинки и прочее. фотошоп что ли делаете? :)

Не, не фотошоп. Информационно-поисковая система. Из сложного - например, подгружаемые по частям списки документов. Каждый элемент состоит из пиктограмки и некоторого форматированного текста + кнопка для выезжания аннотации. Список может состоять из пары миллионов документов, но чаще - из тысяч и десятков тысяч. По нему работает инкрементальный поиск, выделение элементов и операции с выделением и т.д. Или подгружаемые по частям документы с собственной реализацией различных видов поиска внутри документа.

Собственно, главная проблема - это требование, чтобы все виделось и ощущалось не как какое-то интернет/интранет решение, а как нормальное прикладное приложение.

Имитация обычного приложения… думается мне, это всё обойдётся в немало геморроя (-_-)

>Во фрейм загружается заготовка страницы со скриптами и базовой фурнитурой

Оно везде разное? Обычно оно как бы одинаковое и апдейтить можно просто данные. Хотя я не знаю как там устроено, конечно.

Впрочем, про позиционированные фреймы уже сказали, может они помогут. Если нет, то вариант — сделать фрейм видимый, но высоты 0x0 или 1x1, сколько ему понадобится, что бы загрузить.

> Собственно, что именно сделано у Яндекса?
Работающий iframe с display:none :)

Вы уверены что дело именно в этом, а не в глюке конкретной версии оперы, или в чём-то ещё?

> сделать фрейм видимый, но высоты 0x0 или 1x1, сколько ему понадобится, что бы загрузить.

Да это стандартное решение:

var f = document.createElement('iframe');
f.width = 0;
f.height = 0;
f.frameBorder = 'no';
f.scrolling = 'no';
f.id = 'myId';
f.src = src;
document.documentElement.appendChild(f)

> Оно везде разное?

У всех подсистем свои интерфейсы. У списков, документов и проч. есть один-несколько шаблонов. Там как раз AJAX'ом грузятся данные и вставляются в шаблон.

> Вы уверены что дело именно в этом, а не в глюке конкретной версии оперы, или в чём-то ещё?

Нашел, к примеру, вот это: http://xpoint.ru/forums/programming/javascript/crossbrowser/thread/23157.xhtml

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