Совсем недавно в разработке проекта перед моей командой встала задача реализации интернет приложения в котором один его компонент не должен перезагружаться при переходе с одной страницы на другую. Варианта нашлось 2 либо делать полностью Flash приложение, либо использовать внедрение методами iframe или object. Flash отпал ввиду технических требований портирования проекта на портативные устройства, посему остался JavaScript и object. В итоге мы остановились на схеме:
Контейнер и два вложенных в него объекта. Предварительное тестирование структура прошла и мы принялись за реализацию но
Пока разработчки браузеров не осознали что сайты уже давно перестали быть набором html страниц, и все больше и больше становятся похожи на приложения, перед нами (веб-разработчиками) стоит сложная задача о корректном функционировании кнопок вперед-назад при частичном обновлении контента.
Наща задача еще более осложнена тем, что фактически обновляемая страница (контент) вложена в контейнер и даже полном обновлении страницы контента, адресная строка не меняется. А это лишает пользователя привычным способом возможности получить прямую ссылку на контент внутри сайта. Под привычным способом я подразумеваю копирование адреса из адресной строки.
Когда список проблем был очерчен мы стали искать решения. И оно было найдено в window.location.hash. Я вспомнил что видел как на одном сайте его зачем-то меняли методами JS, но не придал этому значения. Позже когда я делал поиск на своем проекте я наконец-то понял, что в хэш можно просто писать ту самую часть ссылки, которая обычно идет за именем домена/. И именно так мы и сделали.
Решение проблемы с актуальной адресной строкой породило другую. Перестали работать кнопки «Вперед»-«Назад», потому как в единственное, что менялось в адресной строке — это hash. То есть фактически переход по history происходил, но браузер видя что URL не изменился не перегружал страницу контента. Пришлось вешать таймер, который раз в пол-секунды опрашивал адресную строку на предмет изменения и, если такое происходило, то перегружал контент. Путем шаманства и JS-кунг-фу было достигнута работоспособность во всех популярных браузерах.
В процессе решения проблемы с навигацией, мы распрощались с XHTML-валидной вёрсткой. Потому как тег object, который мы так удачно заюзали вместо deprecated iframe напрочь отказался давать доступ к своему parent window. Потратив много времени на шаманство мы простились с валидатором и вставили iframe. Помимо этого IE дал прикурить и просраться на тему прозрачных PNG, вставки Flash и экспорта его методов в JS. Но это мелочи, которые известны многим и широко освещены в интернете, поэтому я не буду заострять ваше внимание на них.
Кстати, SWFObject не проходит валидацию.
Отказаться от использования Flash мы изначально не могли. Тогда бы у нас не было аудиопроигрывателя и многопоточного загрузчика. Но вместо того, чтобы делать визуальные элементы на Flash мы сделали тонкие модули без интерфейса выделив каждому жилплощадь в размере 1х1 пиксель. Если делать их бомжами, то они в знак протеста перестают экспортировать свои методы в JS. Мы приняли решение поместить все модули в контейнер и это позволило нам сделать фоновую загрузку. То есть можно поставить на закачку файлы и уйти со страницы загрузки, потом вернуться на нее, а файлы продолжают закачиваться. (Данный режим ещё не включён в официальный релиз, так как мы не уверены в его стабильности.) Ко всему прочему сделав тонкие модули мы минимизировали количество стыков JS<->Flash и тем самым повысили отказоустойчивость всей системы. Но тут Safari сказало свое решительное НЕТ. Дело в том, что по непонятным причинам JS не может дернуть Flash за его экспортированные методы, если они находятся в разных фреймах. К счастью после каникул у нас в офисе появится MacBook для производственных целей и поборем этот браузер.
Самое первое что выяснилось — это то, что нет идеального браузера, все «ломаются» когда начинаешь гонять на них по бездорожью на предельной скорости. Особо порадовал IE с PNG, Opera с тем что при изменении Opacity она упрямо накладывает ее на все внутренние элементы блока, из-за чего эффект растворения начинает тормозить, и конечно же FireFox, который при обработке JS «переключается как бабушка». Особо это касается анимации.
Внимательный читатель спросит меня: «Какое отношение имеет заголовок к содержанию?».
Сейчас каникулы, и есть время подумать. Вот я сижу и думаю не было бы проще все-таки сделать сайт на Flash. Не смотря на все прелести, которые предоставляет HTML+JS.
Контейнер и два вложенных в него объекта. Предварительное тестирование структура прошла и мы принялись за реализацию но
Глава 1. AJAX против браузерной системы навигации.
Пока разработчки браузеров не осознали что сайты уже давно перестали быть набором html страниц, и все больше и больше становятся похожи на приложения, перед нами (веб-разработчиками) стоит сложная задача о корректном функционировании кнопок вперед-назад при частичном обновлении контента.
Наща задача еще более осложнена тем, что фактически обновляемая страница (контент) вложена в контейнер и даже полном обновлении страницы контента, адресная строка не меняется. А это лишает пользователя привычным способом возможности получить прямую ссылку на контент внутри сайта. Под привычным способом я подразумеваю копирование адреса из адресной строки.
Когда список проблем был очерчен мы стали искать решения. И оно было найдено в window.location.hash. Я вспомнил что видел как на одном сайте его зачем-то меняли методами JS, но не придал этому значения. Позже когда я делал поиск на своем проекте я наконец-то понял, что в хэш можно просто писать ту самую часть ссылки, которая обычно идет за именем домена/. И именно так мы и сделали.
Решение проблемы с актуальной адресной строкой породило другую. Перестали работать кнопки «Вперед»-«Назад», потому как в единственное, что менялось в адресной строке — это hash. То есть фактически переход по history происходил, но браузер видя что URL не изменился не перегружал страницу контента. Пришлось вешать таймер, который раз в пол-секунды опрашивал адресную строку на предмет изменения и, если такое происходило, то перегружал контент. Путем шаманства и JS-кунг-фу было достигнута работоспособность во всех популярных браузерах.
Глава 2. IE опять опускает с небес на землю.
В процессе решения проблемы с навигацией, мы распрощались с XHTML-валидной вёрсткой. Потому как тег object, который мы так удачно заюзали вместо deprecated iframe напрочь отказался давать доступ к своему parent window. Потратив много времени на шаманство мы простились с валидатором и вставили iframe. Помимо этого IE дал прикурить и просраться на тему прозрачных PNG, вставки Flash и экспорта его методов в JS. Но это мелочи, которые известны многим и широко освещены в интернете, поэтому я не буду заострять ваше внимание на них.
Кстати, SWFObject не проходит валидацию.
Глава 3. А вот и Flash
Отказаться от использования Flash мы изначально не могли. Тогда бы у нас не было аудиопроигрывателя и многопоточного загрузчика. Но вместо того, чтобы делать визуальные элементы на Flash мы сделали тонкие модули без интерфейса выделив каждому жилплощадь в размере 1х1 пиксель. Если делать их бомжами, то они в знак протеста перестают экспортировать свои методы в JS. Мы приняли решение поместить все модули в контейнер и это позволило нам сделать фоновую загрузку. То есть можно поставить на закачку файлы и уйти со страницы загрузки, потом вернуться на нее, а файлы продолжают закачиваться. (Данный режим ещё не включён в официальный релиз, так как мы не уверены в его стабильности.) Ко всему прочему сделав тонкие модули мы минимизировали количество стыков JS<->Flash и тем самым повысили отказоустойчивость всей системы. Но тут Safari сказало свое решительное НЕТ. Дело в том, что по непонятным причинам JS не может дернуть Flash за его экспортированные методы, если они находятся в разных фреймах. К счастью после каникул у нас в офисе появится MacBook для производственных целей и поборем этот браузер.
Глава 4. Сегодня я многое понял.
Самое первое что выяснилось — это то, что нет идеального браузера, все «ломаются» когда начинаешь гонять на них по бездорожью на предельной скорости. Особо порадовал IE с PNG, Opera с тем что при изменении Opacity она упрямо накладывает ее на все внутренние элементы блока, из-за чего эффект растворения начинает тормозить, и конечно же FireFox, который при обработке JS «переключается как бабушка». Особо это касается анимации.
Вместо заключения.
Внимательный читатель спросит меня: «Какое отношение имеет заголовок к содержанию?».
Сейчас каникулы, и есть время подумать. Вот я сижу и думаю не было бы проще все-таки сделать сайт на Flash. Не смотря на все прелести, которые предоставляет HTML+JS.
