Делаю сейчас один флеш-сайт на заказ, и столкнулся вот с одной интересной проблемой.
Главная страница сайта содержит только flash-ролик, без всяких текстовых ссылок типа "html-версия" - хотя сама html-версия есть. Просто ссылка на нее ведет из флеш ролика :)
Ну, заказчику не понравилось, что внизу под роликом еще что-то написано...
Flash-ролик вставлен на страницу с помощью тега <embed> - для максимальной совместимости с различными браузерами. (Пробовал и через <object>, и через JavaScript - но все эти методы не дали нужного результата - то с каким-то браузером не совместимо, то выравнивание ролика не такое, как надо). Так что остановился на теге <embed>, плюс добавил альтернативное содержание в <noembed> (код приведу ниже).И собственно проблема - при попытке просмотреть сайт на iPhone (а это в данном случае критически важно - имеется в виду просмотреть html-версию) - мобильный Safari по какой-то непонятной причине не обрабатывает тег <noembed>. Как известно, Safari на iPhone и iPod touch флеш не поддерживает - то есть, по идее, он должен был бы отображать именно альтернативное содержание.
А он, паскуда такая, это содержание не грузит, а показывает только маленькую пиктограмму - типа, здесь внедрено содержание, для которого нет плагина.И хоть плач!
Но выход нашелся. Покопавшись в документации на сайте Apple, родился такой рабочий вариант - при заходе на главную страницу сайта определить платформу пользователя, и если это iPhone или iPod, то подсунуть ему простеньку страницу, где написать
"Ваш браузер не поддерживает Flash. Посмотрите на html-версию сайта."
Ну а если это не iPhone и не iPod touch, то выдать обычную страницу с тегом <embed> и альт-содержанием в <noembed> (это для тех, у кого flash не установлен - с предложением его загрузить или посмотреть на html).Реализовал все это через SSI - оказалось самым простым методом. (SSI - это директивы, исполняемые на стороне сервера - с их помощью можно поменять содержимое страницы "на лету", во время ее загрузки в браузер посетителя).
Итак, вот как выглядит решение.Файл index.html - который грузится при заходе на сайт. Код файла:
<html> <head> <meta equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Ну, тут типа название...</title> </head> <body> <!--#if expr="$HTTP_USER_AGENT=/iPhone/" --> <!--#include virtual="iphone.html"--> <!--#elif expr="$HTTP_USER_AGENT=/iPod/" --> <!--#include virtual="iphone.html"--> <!--#else --> <!--#include virtual="other.html"--> <!--#endif --> </body> </html>Текст, который я выделил коричневым, как раз и является директивами SSI. Там идет две проверки - если сайт просматривают с iPhone или iPod touch, значит вставить в данную html-страницу код из файла iphone.html.
Вот код данного файла (обратите внимание, кроме этого кода там не должно быть ничего - ни тегов <html>, ни тегов <head> и <body>):<p>К сожалению, Ваш браузер не поддерживает Flash. Вы можете посмотреть <a href="http://www.наш-сайт.com/html-version/">html-версию сайта.</a></p>
Ну а директивы SSI<!--#else --> <!--#include virtual="other.html"-->
выполняются для всех остальных браузеров (в принципе, можно было бы и для мобильников прописать, но пока нужды нет никакой). И если у пользователя не iPhone / iPod touch, то в страницу будет вставлен код из файла other.html. То есть, обычная загрузка flash-ролика.Вот код файла other.html:
<div id="main"> <embed type="application/x-shockwave-flash" src="main.swf" quality="high" bgcolor="#000000" width="100%" style="height:100%" name="main" align="middle" allowScriptAccess="sameDomain" allowFullScreen="true" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer"/> <noembed> <p> <font face="tahoma, sans-serif" color="#CCCCCC">К сожалению, Ваш браузер не поддерживает Flash (или у Вас просто не установлен Flash-плеер).<br> Чтобы просмотреть сайт Вы можете бесплатно загрузить и установить <a href="http://www.adobe.com/go/getflashplayer"><font color="#FFFFFF">последнюю версию Flash-плеера.</font></a> <br><br> Или посмотреть <a href="http://www.наш-сайт.com/html-version/"><font color="#FFFFFF">html-версию сайта.</font></a></font> </p> </noembed> </div> <script>resizeme= function () { if (document.body.clientWidth<900) { document.getElementById('main').style.width='800'; } else { document.getElementById('main').style.width='100%'; } if (document.body.clientHeight<721) { document.getElementById('main').style.height='721'; } else { document.getElementById('main').style.height='100%'; } } window.onresize =function() { resizeme(); }; window.onload =function() { resizeme(); };Этот код на первый взгляд может показаться сложным - но скрипт тут нужен только для масштабирования ролика. А в остальном все просто.
Вот, в принципе, и все решение. Работает - как молоток, то есть безотказно.
P.S. Опубликовать на этом блоге исходный текст html-файла - это что-то с чем-то :) Как нибудь раскажу, как я это сделал.
Комментариев нет :
Отправить комментарий
Примечание. Отправлять комментарии могут только участники этого блога.