Пример как сделать загрузку документа в бекграунде к вопросу: Интерактивность загрузки

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


Задача: есть неткоторый документ, в котором несколько самодельных табов. Если для таба существует контент, то его показать, иначе загрузить. Если JS отключен, то всё должно продолжать работать, т.е. при клике на таб перезагружается весь документ.

Плюсы: если JS включен, то сервер отдает не весь документ(менюшки, потолок/подвал и т.д.), а только контент; один раз загруженный таб показывается сразу при возвращении на него.

Минусы: в этом примере загрузка идёт через ифрейм(для случая если JS выключен), поэтому будем слышать щелчки под ИЕ и возможноые проблемы с кнопками вперёд/назад браузера(жать придётся по нескольку раз), т.к. перезагрузка ифрейма гадит в истории.

Весь код выкладывать не буду, открываем и смотрим по ссылке: http://aliance.hoha.ru/Sardar/tabs_load/content_data.htm

http://aliance.hoha.ru/Sardar/tabs_load/image_data.htm
http://aliance.hoha.ru/Sardar/tabs_load/tabsdata.htm

Разбираем. Простой HTML код представляющий табы, собственно над этим(рутина) сидел больше чем над JS В слое: <div class="tbcntd"> лежит весь контент табов, каждый в собственном <div class="tabs"> теге.
Как видим инфа первого таба и второго уже есть, поэтому скрипт не будет обращатся к серверу. Третий таб пустой, инфа лежит tabsdata.htm, который будет подгружен. На случай если JS отключен или контент не вложен существуют image_data.htm и content_data.htm для переходов.

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

Ифрейм в котором грузим документы создан заранее, дабы не смущать такие кривые браузеры как Опера 6.

Основной скрипт очень прост. Функция changeTab меняет текущий таб, параметром передаётся элемент a. Если отключен JS, то onclick не сработает и мы загрузим в текущем окне документ по ссылке. Иначе грузим ссылку в ифрейме, попутно передавая инфу GET параметрами на сервер, дабы тот генерил только необходимые данные. Также если в обработчике onclick произойдёт ошибка, то возвратим true и ссылка отработает.

Первым делом останавливаем загрузку в если такая была. Затем ищем контент для таба. Конечно можно посчитать позицию таба, а затем выбрать в это же позиции слой с контентом, но для ясности мы определим у ссылок аттрибут tbcontent, в котором лежит порядковый номер слоя с данными. Находим контейнер всех табов, находим конкретный таб(для этого определенны функции findTabContainer/findTabContent). Далее если слой не пуст, то делаем его активным. Иначе грузим в скрытом ифрейме ссылку, передавая параметр ltgt=frame, указывающий что загрузка идёт в ифрейме(для примера я не использовал серверных скриптов, дабы каждый мог скачать и посмотреть результат. На практике генерим разные документы: для основного окна или облегчённые для скрытых загрузок).

Загруженный документ отдаёт контент вызовом opener.tabs_takeData. Родительское окно приниамет контент, освобождает ифрейм и убирает сообщения о загрузке.

Функция centerAbsCords выдаёт центр экрана пользователя, не зависимо от браузера и установленных сайд и тулбаров.


Добавлю: мы всегда стоим перед выбором конкретного юзера, если пишем интранет приложение, то не стоит отказываться от вещей облегчающих жизнь и писать "под все браузеры". Например на практике я использую загрузку контента не через ифрейм, а через подгружаемые скрипты. Это удобней. Как видим я попросту забиваю на владельцев старых или глючных браузеров, а также на тех у кого отключен JS, это не мой пользователь. А если писать только под ИЕ(юзая bechaviors, expressions и много-много других фичь) либо под Мозиллу(XUL, JSLib и другое), то получается конечный продукт высокого качества. Не кастрированный, а хороший, но под конкретную платформу Теперь вспомним о XML, конкретно о модном XMLHTTPRequest, то желание забить на Оперу становиться совсем труднопреодолимым


Если есть вопросы/пожелания - скидываем сюда.

А то, что таблица пустая (рамка) остается - это так и задуманно? Это я так понимаю относится к случаю если

Цитата(Sardar @ 24.4.2005, 00:08)

Плюсы: если JS включен, то сервер отдает не весь документ(менюшки, потолок/подвал и т.д.), а только контент; один раз загруженный таб показывается сразу при возвращении на него.

Добавлено @ 23:16

Цитата(Sardar @ 24.4.2005, 00:08)

мы определим у ссылок аттрибут tbcontent

А это не протеворечит никаким спецификациям (X)HTML? С этим не будет траблов где-либо?

Цитата(Aliance @ 23.4.2005, 22:13)

А то, что таблица пустая (рамка) остается - это так и задуманно?

Точно, под ИЕ это глюк! Он <модератор выражается> оставляет таблицу отрисованной. Смотрим под Мозиллой если хотим видеть это правильно. Либо не используем в контенте табов таблиц, либо пишем какой то хитрый стиль, который можно спросить в разделе по вёрстке

Цитата

А это не протеворечит никаким спецификациям (X)HTML? С этим не будет траблов где-либо?

Да противоречит. Я этот аттрибут сделал для ясности Если хотим таки поставить значёк валидности XHTML, то аттрибут убираем и высчитываем позицию таба. Ксатати теряем некоторую свободу, показать из двух табов один контент.

Цитата(Sardar @ 24.4.2005, 00:19)

то аттрибут убираем и высчитываем позицию таба.

А флагами никак? По аргументам...

Или по аргументам, или строкой в className, можно эвристикой попробовать угадать, вообщем на по вкусу