«Как правильно вставить объекты Flash в вашу HTML-страницу?»
Это должно быть простой вопрос, но вероятно вызывает множество споров, так как каждый из доступных способов встраивания объектов имеет свои преимущества и недостатки. В этой статье мы исследуем трудности и тонкости встраивания Flash-содержимого и рассмотрим наиболее популярные способы вставки объектов.
Основные компоненты метода встраивания Flash-объектов
Прежде чем перейти к практике, давайте сначала охарактеризуем идеальный метод. По моему мнению, следующие критерии имеют первостепенное значение.
Соответствие стандартам
Web-стандарты предлагают универсальный язык для создателей браузеров, проектировщиков оборудования и веб-дизайнеров для того, чтобы они могли избежать проблем совместимости, зависимости от производителей, а также нарушения патентных прав. Кроме того веб-стандарты позволяют создавать правильную HTML-разметку, которая к тому же часто является требованием в веб-проектах.
Межбраузерная поддержка
Поддержка всеми основными браузерами и популярными операционными системами — это необходимое условие. Проверить разметку можно с помощью инструментария Flash embed test suite, который позволяет оценить, поддерживают ли браузеры тот или иной метод разметки, с помощью которой можно вставить Flash-объекты. Этот набор тестов может показать информацию о параметрах, в том числе различных настройках Flash, потоках и сценариях, поддерживаемых браузерами и ОС. Вы также можете изучить сводную таблицу, отображающую эти параметры.
Поддержка альтернативного содержимого
Во всех случаях, когда вы создаете содержимое, воспринимаемое поисковыми машинами или доступное людям, которые используют Веб без установки каких-либо плагинов, использование альтернативного содержимого — это наилучшее решение.
Избежание несоответствия между Flash-контентом и версией Flash-плеера
К сожалению для многих из нас, Flash-контент будет воспроизводиться вне зависимости от версии Flash-плеера, для которого он был создан. В этом нет ничего страшного до того момента, пока устаревший плагин не обнаружит функции, которые работают только в его более поздних версиях. Если так произойдет, ваши посетители увидят «нарушенное» содержимое или вовсе ничего не увидят.
Автоактивация интерактивного контента
Браузеры компании Microsoft работают так, что посетители не могут напрямую взаимодействовать с элементами управления Microsoft ActiveX, который позволяет загружать объекты и элементы embed , также называемые «интерактивным контентом».
Короче говоря, браузеры Microsoft не позволят взаимодействовать с интерактивным контентом, пока пользователь самостоятельно его не активирует. Opera также внедрила похожий механизм «click-to-activate». Этот механизм работает как «лежачий полицейский» на дороге: вы должны приостановить движение, медленно переехать через него, и только потом нажать педаль газа. Это может запутать обычного интернет-серфера и разозлить даже самого опытного.
Простота реализации
Конечно же простота имеет значение. Зачем прыгать выше головы, если можно сделать проще?
Основы встраивания Flash-объектов: embed и object
Существуют два элемента HTML, которые позволяют вставить объекты Flash на веб-страницу. В одной руке, у нас есть запатентованный элемент embed , который поддерживается большинством браузеров:
В другой руке у нас элемент object , который является рекомендацией W3C. Так как спецификации W3C предоставляют больше возможностей для отображения подключаемого контента, со временем появились два различных способа реализации объектов.
Большинство современных браузеров выбрали стандартом альтернативу тегу embed , используя при этом MIME-тип объекта, чтобы подключить соответствующий плагин для воспроизведения содержимого:
Этот метод не привязан к какому-либо определенному браузеру и поэтому это предпочтительная реализация.
Второй способ реализации создан специально для Internet Explorer на Windows. При этом требуется, чтобы вы определили атрибут classid у объекта, чтобы браузер смог загрузить необходимый элемент управления ActiveX Flash-плеера. Такой способ допустим, но зависим от типа браузера:
Замечание: В двух последних примерах кода специально не указан параметр codebase — он часто используется, чтобы уточнить URL инсталлятора Flash на серверах Adobe (браузер может автоматически загрузить его, если он еще не установлен). Однако это запрещено согласно спецификациям, которые ограничивают его доступ только в пределах домена текущего документа, и поэтому этот параметр не поддерживается всеми современными браузерами.
Почему embed все еще используется
С появлением веб-стандартов можно было бы совершенно обоснованно удалить элемент embed . Он просто никогда не был рекомендацией W3C и никогда не будет, потому что он уже запатентован. Однако в действительности этот способ лучше поддерживается браузерами, чем отдельная реализация элемента object . В результате такой способ реализации выбран на большинстве веб-сайтов, таких как Google Video и Brightcove.
Хотя веб-стандарты созданы, чтобы избежать проблем совместимости, элемент embed более ясен и недвусмыслен, чем элемент object , одобренный W3C. Жесткие правила реализации элемента embed и хорошая поддержка превратила его в фактический стандарт, который будет использоваться до тех пор, пока не будет универсальной поддержки элемента object , достаточной для того, чтобы игнорировать версии браузеров, которые его не поддерживают.
Где нарушена поддержка веб-стандартов
Двойственная реализация элемента object формально не нарушает веб-стандарты, но создает множество проблем. Следовательно, нам нужно найти способ объединить два метода реализации объектов в один. Еще хуже то, что мы также должны разобраться с браузерами, которые имеют (или раньше имели) неправильную реализацию объектов. Давайте рассмотрим эти проблемы:
Общая реализация объектов не работает в Internet Explorer на Windows. IE загружает плагин и SWF-файл, но не показывает его содержимое.
Когда мы частично объединяем два способа реализации добавлением параметра movie к общей реализации, Internet Explorer отображает Flash-контент, но не проигрывает его.
Если мы полностью соединим две реализации, все заработает в Internet Explorer, но браузеры на базе Gecko проигнорируют Flash-контент и покажут альтернативное содержимое.
Одной из особенностей элемента object является то, что вы можете вставлять этот тег друг в друга:
К сожалению, из-за ошибки в старых версиях Internet Explorer встроенные друг в друга элементы object рассматриваются так, как будто они следуют один за другим, поэтому отображаются оба элемента.
Еще хуже то, что браузеры Safari, начиная с версии 1.2.2 для Mac OS 10.3, игнорируют элемент param , встроенный в object , хотя поддерживают такие же атрибуты для элемента embed .
Замечание: Вы также можете спросить, насколько разумно определять контент, атрибуты и параметры дважды, как в вышеизложенном способе. Этот комбинированный метод также делает более проблематичным использование JavaScript для взаимодействия с Flash-контентом. В таком случае вы должны проверять, с каким объектом вы взаимодействуете.
Некоторые из ошибок уже исправлены, но необщепринятая и ошибочная в Internet Explorer реализация object все еще сдерживает абсолютное принятие этого элемента. Мы можем только надеяться, что это будет исправлено в ближайшем будущем.
Почему object лучше, чем embed
Несмотря на отсутствие поддержки всеми браузерами элемент object все же более предпочтителен, чем элемент embed , потому что кроме соответствия стандартам, он также обладает превосходной поддержкой альтернативного содержимого.
Элемент object позволяет встраивать альтернативное содержимое, и это содержимое отображается, если реализация не поддерживается или не установлен плагин. Также альтернативное содержимое доступно поисковым машинам, а это неоспоримый плюс при оптимизации под поисковые запросы.
Элемент embed поддерживает альтернативное содержимое посредством элемента noembed , но такая реализация работает только в тех браузерах, которые не поддерживают сам элемент embed , например Internet Explorer на платформах Windows Mobile. В отличие от элемента object , embed не поддерживает альтернативное содержимое, когда поддерживается сам элемент embed , но не установлен Flash-плагин. В такой ситуации, можно довольствоваться только атрибутами pluginurl и pluginspage , с помощью которых отображается картинка, кликнув по которой можно установить плагин.
Я думаю, это лучшее решение для отображения альтернативного контента, чтобы описать необходимый плагин и дать намек на то, что пользователь может загрузить и установить плагин Flash. (Тем не менее, нет других причин, по которым мы должны злоупотреблять атрибутом codebase .)
Таким образом, элемент object обладает значительными преимуществами перед элементом embed в том случае, если вы предпочитаете создавать соответствующий стандартам код или доступное, хорошо индексируемое поисковиками содержимое.
Недостаточность методов разметки
Принимая во внимание критерии, определенные нами ранее, — соответствие стандартам, межбраузерную поддержку, поддержку альтернативного содержимого, избежание несоответствий плейер/контент, автоконтроль интерактивного содержимого и простоту реализации — легко понять, что в действительности используются лишь те способы реализации, которые могут быть осуществлены только изменением разметки.
Хотя разметка предоставляет средства показа Flash-контента или альтернативного содержимого, она не способна решить проблемы несоответствия контента и плагина Flash или ошибки при активизации интерактивного контента, и это не всегда самый простой способ решить и ту, и другую проблему.
Однако, давайте сделаем краткий обзор наиболее популярных «комбинированных» методов встранивания Flash, осуществляемых с помощью (X)HTML-разметки.
Двусоставный метод
В Flash IDE, вы можете создавать HTML-страницы с помощью так называемого двусоставного метода, объединяющего реализацию объектов с помощью элемента object и embed , встроенного внутри него как альтернативный контент:
Как видите, этот метод основан исключительно на запатентованной разметке. Он несомненно фокусируется на межбраузерной поддержке, но не соответствует стандартам.
Двусоставный метод использует избыточный код, делает ваши веб-страницы логически непоследовательными и не позволяет вставить альтернативное содержимое. А единственная преимущество — это простота в использовании, так как его генерирует Flash IDE: так что не пытайтесь просить воспроизвести этот метод по памяти.
Метод вложенных объектов
Вложение двух реализаций объектов — хорошая альтернатива двусоставному методу, потому что этот метод соответствует стандартам и поддерживает альтернативный контент:
К сожалению, в этом методе отсутствует межбраузерная поддержка вследствие ошибки вложения элементов object в IE и отсутствия поддержки вложенных элементов param в Safari. Но можно использовать прием с условными комментариями IE, чтобы избежать ошибок браузера:
При использовании приведенного выше «раздутого» кода, этот метод становится даже более сложным для создателя, чем двусоставный. Он использует безобразные уловки, которые могут усложнить процесс создания кода при использовании серверных языков.
Flash Satay
Другая альтернатива — это метод Flash Satay, который основан на общем способе реализации объектов и включает дополнительный параметр movie . Этот параметр необходим, чтобы избежать ошибок отображения контента в IE. Он также включает movie-контейнер Flash (c.swf с переменной path), чтобы исправить ошибку с потоковым воспроизведением в IE:
Хотя он приближает нас к «идеальному», универсальному способу реализации объектов, Flash Satay содержит приемы, применение которых не подойдет каждому? и при использовании этого метода встроенные элементы param не поддерживаются старыми версиями Safari.
Аргументы в пользу DOM
Когда вы думаете о недостаточности методов разметки, вы можете поинтересоваться, почему нельзя использовать скрипты DOM. С помощью них, мы можем динамически управлять разметкой, как того требует каждый браузер, используя:
специальную реализацию для IE;
запатентованный элемент embed для старых версий Safari;
общую реализацию для всех остальных браузеров.
Скрипт DOM к тому же гибкий инструмент, достаточный для решения остальных проблем: прежде всего, мы можем использовать его для решения проблемы несовместимости Flash-плейера и Flash-контента, определяя версию плагина и проверяя то, что нужно показывать — Flash-контент или альтернативное содержимое. Когда необходимая версия плагина недоступна, мы можем инициировать экспресс-установку Adobe, — механизм встроенный в Flash-плейер. Тем самым мы упрощаем загрузку нужной версии.
Решение с применением DOM также позволяет нам избежать механизма «click-to-activate» с помощью динамического создания элементов object .
Будьте осторожны, используя JavaScript
Так как не каждый является опытным специалистом по JavaScript — да и даже тот, кто им является, не должен заново изобретать велосипед — неплохо использовать уже существующие библиотеки JavaScript для встраивания Flash. Давайте рассмотрим критерии выбора надежной библиотеки.
Разметка по стандартам редко поддерживается создателями библиотек, так как эти библиотеки определяют Flash-контент либо в JavaScript, либо другими средствами разработки. Большинство библиотек создают неправильный HTML и, так как разметка написана динамически, W3C-валидатор не способен её проверить.
С другой стороны нужно рассмотреть, как работает такой метод, если JavaScript не доступен, не поддерживается или поддерживается только отчасти. Что делать, если используя JavaScript, вы ограничиваете доступность контента для пользователей?
Приняв во внимание вышесказанное, давайте посмотрим, как работают некоторые популярные библиотеки.
Комплект по определению плейера Adobe Flash
Кроме создания разметки в Flash IDE, Adobe также предоставляет комплект по определению плейера Flash. Существует три способа использовать этот комплект:
Проверив установлен или нет флажок Detect Flash Version (в меню File > Publish Settings > HTML) в Flash 8 IDE.
Вставив его вручную, загрузив дистрибутив этой библиотеки.
Работать в Flex Builder 2, где он включен по умолчанию.
Хотя пакет дает нам все желаемые возможности, такие как определение версии, экспресс-установка и автоактивация интерактивного контента, он нуждается в усовершенствовании. Когда мы полностью перейдем к стандартам, его ждет безнадежный провал: пока что он основан на двусоставной разметке, так как имеет либо реализацию объектов от Microsoft, либо поддержку запатентованного элемента embed , не соответствующего стандартам.
Он также поддерживает альтернативный контент, хотя странным и противоречивым образом. Вы должны определить альтернативный контент дважды: в JavaScript и в элементе noscript .
В конечном счете, комплект по определению плейера нуждается в лучшей реализации.
UFO и SWF Object
Популярные альтернативы с открытым исходным кодом, как UFO Боба ван дер Слуиса и SWF Object Джеффа Стирнса наверное самые полные и простые в использовании библиотеки, доступные в настоящее время.
Хотя на первый взгляд они кажутся похожими, они полностью отличаются внутренним содержанием. Например, SWF Object использует двусоставный метод Adobe, в то время как UFO генерирует главным образом соответствующую стандартам разметку. С другой стороны они используют общие архитектурные принципы: обе библиотеки построены на идее создания разметки, поддерживающей альтернативное содержимое (таким образом доступное и оптимизированное под поисковики), которое замещается DOM-скриптом, когда доступна необходимая поддержка Flash и JavaScript.
Несмотря на их явную поддержку альтернативного содержимого, обе библиотеки имеют один существенный недостаток: они зависят от JavaScript при вставке Flash-контента. В результате небольшая группа посетителей, установившая Flash плагин, но с отключенным JavaScript или с отсутствием достаточной поддержки JavaScript, будут видеть только альтернативное содержимое.
Аргументы в пользу «умеренного» программирования DOM
Чтобы решить все проблемы, вполне логично использовать следующий метод вставки: смешанную разметку, совместимую со стандартами, как та, которая используется методом Flash Satay, чтобы включить и Flash-контент, и альтернативное содержимое, наряду с применением небольшого DOM-скрипта, который необходим для устранения проблем в некоторых браузерах.
ObjectSwap основан на этих принципах и на мой взгляд является образцом для будущих библиотек встраивания Flash-объектов. К сожалению, ObjectSwap концентрируется в основном на автоактивации интерактивного контента, поэтому он не пригоден для определения версии и не решает проблем с разметкой, таких как поддержка потокового воспроизведения в IE или поддержка параметров в старых версиях Safari.
С другой стороны он может быть усовершенствован. При использовании события onload , поведение, основанное на DOM, реализуется только после загрузки всей страницы. Лучшим выбором могло бы быть событие DOMContentLoaded , которое позволяет вам применить свое собственное поведение, как только DOM станет доступен на странице. Так как событие DOMContentLoaded еще не полностью поддерживается браузерами, взамен этого вы можете использовать это решение.
Будущее встраивания Flash
Хотя совершенное решение пока еще не найдено, мы уже довольно далеко продвинулись в правильном направлении. Когда мы соединяем лучшие возможности различных библиотек, нам следует учитывать все критерии, определенные в начале этой статьи.
Фреймы (теги frame, frameset, noframe, iframe)
Наверняка Вы уже не один раз слышали о таком понятие, как фреймы. Прочитать о них можно в любом html-учебнике, а также на ресурсах о создании сайтов. Изучив множество примеров и описаний, я решил рассказать все о фреймах своими словами в очень простой форме. О плюсах, о минусах и о будущем фреймов будет сказано в самом низу этой страницы. Итак, что же такое фреймы в html?
Что такое Фреймы в html
Не пугайтесь, что это звучит немного непонятно. Давайте сразу приведем самый простой пример и тогда все станет ясно.
Отройте помощь (help) в любой программе (это может быть блокнот, какая-то программа, браузер и т.п.). Практически всегда Вы увидите хелп состоящий из двух частей (слева навигация, справа содержимое). Левая и правая части как раз и являются отдельными фреймами. Ниже представлен скриншот сделанный из хелпа самого обыкновенного блокнота Windows:
То что Вы видите, является веб-страничкой состоящий из двух отдельных независимых фреймов. Приведем примерный html код такого фрейма из хелпа.
Пример с фреймами №1 (делаем помощь)
В каркасе выше рассмотренный хелп будет выглядеть следующим образом:
Разбиение страницы на области с помощью фреймов очень напоминает табличную верстку html (см. HTML тег table). Примерный код такой страницы может выглядеть следующим образом:
Пояснение к примеру №1
Как видно из кода выше, страница созданная из фреймов очень похожа на обыкновенную html-страницу: есть открывающий тег html, раздел , заголовок , но есть одно большое различие. Наверное, Вы обратили внимание, что тег body, который отвечает за тело страницы — отсутствует. Вместо него вставлен тег , который отвечает за тело страницы. У этого тега есть два атрибут cols=»25%,75%» , что означает разбить все тело страницы на две области по вертикали в пропорции 1:3. Первая область займет 25% от ширины всего экрана (в ней будет первый фрейм menu.html ), вторая область займет 75% от ширины всего экрана (в ней будет второй фрейм content.html ).
Последний совсем необязательный тег это . Он нужен для браузеров, которые не поддерживают фреймы. Если браузер не поддерживает фреймы, то рекомендуется вежливо сообщить об этом пользователю через этот тег.
Кстати, обратите внимание, что для тега не нужен закрывающий тег.
Надеюсь, что теперь у Вас есть представления о фреймах. Чтобы понять более трудные примеры, давайте попробуем создать простую html-страницу состоящую из 4 фреймов. Это будет пример №2.
Пример с 4 фреймами №2
Каркас для примера 2:
Код исходной html-страницы с фреймом будет следующий:
Код файла top.html
Код файла menu.html
Код файла content.html
Код файла about-site.html
Код файла about-autor.html
Код файла footer.html
Пояснение к примеру №2
Первоначально вся страница разбивается на три области по горизонтали в пропорции 3:14:3. За это отвечает атрибут rows=»15%,70%,15%» . Первый фрейм в нашем примере — шапка (мы её обозвали top.html ), на нее отводится 15% места по высоте. Далее идет большой фрейм занимающий 70% по высоте. Мы его разбиваем на две части с помощью cols=»25%,75%» в пропорции 1:3. Слева будет фрейм menu.html , справа content.html . Мы специально дали имя второму фрейму name=»main» с целью возможности переключения страниц. Обратите внимание, что в файле menu.html к каждой ссылки приписан атрибут target=»main» , что позволяет при нажатии на эту ссылку загружать элементы в область с именем main. Внизу сайта расположился последний фрейм footer.html .
Если вы реализуете пример №2, то должны получить такую html-страницу в исходном состоянии:
При переходе на страницу о сайте страница будет выглядеть следующим образом:
При переходе на страницу об авторе вы увидите следующие:
Тег нужен для вставки внешнего фрейма на страницу. Типичным примером может являться код видео из youtube. Формат этого тега выглядит очень просто:
Необязательные атрибуты этого тега являются w и height=»высота» , а обязательный атрибут src=»https://zarabotat-na-sajte.ru/uroki-html/%D0%B0%D0%B4%D1%80%D0%B5%D1%81%20%D1%84%D1%80%D0%B5%D0%B9%D0%BC%D0%B0″ .
Атрибуты и свойства тега
1. Атрибут COLS=»Параметры» Задает количество разбиений страницы по вертикали.
2. Атрибут ROWS=»Параметры» Задает количество разбиений страницы по горизонтали.
Теперь рассмотрим каким образом можно задать параметры разбиение.
а) С помощью числа , которому будет соответствовать количество пикселей. Например, cols = «100,100,300» задает разбиение страницы на три области, каждая из которых будет по ширине: 100 пикселей, 100 пикселей и 300 пикселей соответственно.
б) С помощью процентов от общей ширины/высоты. В рассмотренных выше примерах мы использовали именно процентное разбиение, поэтому приводить пример мне кажется бессмысленно.
в) С помощью * (звездочки). Например, cols = «2*,3*,100» задает первые две области в соотношение 2:3, а третья область будет шириной в 100 пикселей.
Все три способа можно совмещать. Например, cols=»2*,100,15%,4*» .
3. Атрибут frameborder=»» Определяет наличие рамки у фрейма. Если ответ yes, то следующий четвертый атрибут border имеет силу.
4. Атрибут border=»параметр» В пикселях border задает толщину обводки области фрейма. Например, frameborder = «2» задает область с выделенным контуром в 2 пикселя.
5. Атрибут bordercolor=»цвет» Определяет цвет рамки, если она есть. Цвет можно задать как словами, так и кодом (см. цветовая палитра html).
Примечание: обратите внимание, что тегу нужен закрывающий тег .
Атрибуты и свойства тега
1. Атрибут src=»https://zarabotat-na-sajte.ru/uroki-html/%D0%B0%D0%B4%D1%80%D0%B5%D1%81%20%D1%8D%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D0%B0″ В качестве параметра здесь должен указываться полный URL к адресу элемента. Этот атрибут обязателен. Он уже знаком Вам, т.к. он присутствовал в примерах 1 и 2.
2. Атрибут marginw Задает отступ внутри фрейма от границ в пикселях по ширине. Например, marginw задаст отступ содержимого слева и справа от границы фрейма.
3. Атрибут marginhight=»число» Аналогичен второму с той лишь разницей, что задает отступ по высоте.
4. Атрибут scrolling=»» Задает возможность прокрутки фрейма, в случае если он не смог уместиться в рамки отведенной ему области. По умолчанию стоит значение auto (означает, что при необходимости создавать скролл).
5. Атрибут noresize Если установлен этот атрибут, то пользователю запрещается самостоятельно менять границы фрейма. По умолчанию этот атрибут не стоит и пользователь может менять границы как хочет.
5. Атрибут name=»название» С помощью этого атрибута можно давать фрейму имя. Это нужно для того, чтобы к этому фрейму могли обращаться другие фреймы. В примере №2 как раз рассматривается такой случай.
Примечание: Имя не должно начинаться с нижнего подчеркивания «_».
6. Атрибуты frameborder, border и bordercolor Эти три атрибута такие же как и у frameset (см. атрибуты frameset выше).
Преимущества и недостатки фреймов
Плюсы фреймов
Возможность отображения в одном окне независимо несколько страниц (пример 1 и 2 выше);
Возможность переключать содержимое страницы не перезагружая страницу (меняется только одна область экрана);
Возможность построить гибко структуру сайта (шапка, меню, футер и т.д. — вся статическая информация хранится отдельно в файлах, а это позволяет быстро отредактировать часть сайта);
Пользователь может сам изменять размер области просмотра, в случае если не установлена опция noresize;
Минусы фреймов
Поисковые системы плохо индексируют сайты на фреймах, поскольку не в состоянии интерпретировать подгружаемые файлы во фреймах. Поисковая машина различает страницы по их адресу (URL), а у фреймов несмотря на разные состояния, адрес страницы не изменяется. Это противоречит правилам поисковой машины, а значит не факт, что поисковик сможет проиндексировать сайт.
Невозможно сохранить в закладки сайт на фреймах, т.к. URL страницы будет одинаковый. Таким образом, можно лишь сохранить исходное состояние фрейма.
Не все браузеры поддерживают фреймы.
Будущее фреймов: От фреймов уже давно стали отказываться многие вебмастеры. Это связано с трудностями продвижения в поисковиках. Сейчас все переходят на Ajax, как более динамичный и современный способ отображения информации на одной странице сайта.
Уважаемый читатель, мы рассмотрели теги html документа касающиеся фреймов. Несмотря на сомнительное будущее этого направления, знать про фреймы должен каждый вебмастер.
Ссылка на следующий урок: Урок 12. Свойство CSS position
как играть .swf файлов в IE с помощью IFrame тег
Я пытаюсь играть .swf файлы в IE с помощью IFrame тега в JSP. Но они не играют. Они играют в Chrome и Safari. Может кто-нибудь помочь? Код выглядит следующим образом:
Обычно флэш-файлы используют для вставки тегов для запуска SWF в браузере, но я предполагаю, Chrome и Safari играют, потому что они имеют тот же двигатель «WebKit». Я не могу понять, почему они позволяют ему работать в плавающем фрейме тега, я думаю, что будет представлять собой проблему безопасности вдоль дороги.
Вы можете вставлять его с помощью IFRAME, но вам нужно определить atributes как стиль
How to embed a SWF file in an HTML page?
How do you embed a SWF file in an HTML page?
14 Answers 14
The best approach to embed a SWF into an HTML page is to use SWFObject.
It is a simple open-source JavaScript library that is easy-to-use and standards-friendly method to embed Flash content.
It also offers Flash player version detection. If the user does not have the version of Flash required or has JavaScript disabled, they will see an alternate content. You can also use this library to trigger a Flash player upgrade. Once the user has upgraded, they will be redirected back to the page.
An example from the documentation:
A good tool to use along with this is the SWFObject HTML and JavaScript generator. It basically generates the HTML and JavaScript you need to embed the Flash using SWFObject. Comes with a very simple UI for you to input your parameters.
It Is highly recommended and very simple to use.
Как вставить флеш-объект в html-файл.
Флеш, mp3, mp4, flv, avi, 3gp — для HTML всего лишь объекты, которые вставляются в хтмл-файл при помощи уже знакомого нам тега OBJECT. Если в предыдущих объектах(графика, аплеты, фреймы) у нас была альтернативная замена(img, ifame, APPLET), то для этих типов файлов альтернативы нет, но не расстраивайтесь. Все эти типы файлов объединяет флеш-плеер, который установлен у 98% посетителей. Но об всем по порядку.
Как вставить флеш-объект в html-файл. Почти все флеш-файлы имеют расширение «.SWF»(file.swf), с этим типом мы и будем работать. Самый простой способ вставить флеш-объеккт в в HTML-файл:
Мы в тег object помещаем атрибут data с адресом нашего флеш-объекта и указываем тип при помощи атрибута type, в котором указываем что это приложение(application) которое должно обработаться флеш-плеером(x-shockwave-flash), а также устанавливаем размеры. Все-бы хорошо но не у всех этот плеер установлен или браузер не поддерживает данный тип файлов. Более полный код выглядит так:
Результат:
1)Мы тегу object присвоили размеры, а также атрибутом codebase указали какая версия флеш-плеера нужна. По поводу версии, здесь все зависит от того что за объект, если это просто гримированная картинка в флеш, то подойдет и как в моем примере 6 версия, если используется ActionScript 2.0 то 7версия, а если ActionScript 3.0 то флеш-плеер должен быть не менее 10версии. Но запомните, чем выше требования — тем меньше шансов что пользователь ваш флеш-объект увидит. 2)Мы не атрибутом data, а тегом param передаем адрес нашего объекта. 3)Тег embed в спецификации по HTML-4 не описан вообще, он является дочерним для тега object, выступает в роли «патча»(заплатка), в данном случае используется для браузеров которые не понимают код указанный мной первым и дублирует для него размеры, указывает тип данных, а так-же если браузер не понимает атрибут data тега object.
Но если честно то нет смысла особо «заморачиваться» с флеш-обектами, так как, флеш-файлы вы можете только двумя способами получить: 1)Создать самому(самой) флеш-приложение, в этом случае ваш флеш-редактор сам сгенерирует хтмл код и вам останется только вставить этот код в нужную страницу и возможно немного отредактировать пути к объекту. 2)Установить какой-либо флеш-плеер, игрушку или просто флеш-банер, то в этом случае вам дадут только код нужного объекта, который вам нужно просто разместить на сайте. С плеерами немного сложнее но о них поговорим в следующей главе.
Информация:
Поиск по тегам: Список всех тегов А вы знаете как при помощи каскадных таблиц стилей можно использовать несколько шрифтов одновремено?
Загрузка Вставить SWF на фрейм 2?
Можно ли загрузить на фрейм 2 swf встроенный в другой swf?
Мне нужно создать единый основной swf, содержащий звуковую swf. Звуковой swf содержит экспортированные звуковые файлы для создания экземпляра в коде. Звуковые SWF варьируются в зависимости от версии основного swf, следовательно, желание встраиваться во время компиляции. В настоящее время я вставляю звуковой swf в главный swf-код, используя тег метаданных [Embed], который все работает. Тем не менее, это, похоже, загружает swfs в кадр 1, и я предпочел бы загрузить его на фрейм 2 после запуска моего прелоадера.
Я проверил по сети, и этот вопрос, кажется, спрашивают, но на самом деле не ответил.
Чтобы уточнить, я встраиваю swf и его символы в основной класс с таким кодом:
ExternalInterface передает значения из swf в iFrame на той же странице
На странице у меня есть iFrame и swf, я пытаюсь использовать ExternalInterface для передачи значений из swf в iFrame, кто-нибудь когда-либо пробовал это и повезло? Я не смогу опубликовать какой-либо код до завтра, при необходимости обновит его.
Спасибо в adavnce.
Вот визуализация того, что мне нужно выполнить, возможно, если это невозможно сделать так, как я сказал, у кого-то будет предложение другого способа выполнить это.
Попробуйте настроить рамку. Это должно работать с одним кадром на странице, или вам нужно будет изменить индекс.
Если это не работает для вас, используйте LocalConnection и поместите скрытый swf в файл iframe. LocalConnection является глобальным для браузера, поэтому имейте в виду, что если два окна браузера открыты, вы получите два iframe, подключающихся к одному и тому же имени, и получите некоторые напуганные результаты. Так измените имя соединения с помощью строки запроса и flashvars. Это реальный хакерский подход, но он будет работать.
ExternalInterface передаёт значения из swf в iFrame на той же странице
На странице У меня есть iFrame и swf, я пытаюсь использовать ExternalInterface для передачи значений из swf в iFrame, кто-либо когда-либо пробовал это и не повезло? Я не смогу опубликовать какой-либо код до завтра, при необходимости обновит его.
Thanks in adavnce.
Вот визуализация того, что мне нужно выполнить, возможно, если это невозможно сделать, как я сказал, у кого-то будет предложение другого способа выполнить это.
Создан 12 апр. 11 2011-04-12 19:54:37 Chuck
У вас есть доступ к коду изменения в файле iframe? – The_asMan 13 апр. 11 2011-04-13 19:39:54
yes У меня есть доступ ко всему контенту – Chuck 13 апр. 11 2011-04-13 19:57:57
2 ответа
Попробуйте установить рамку. Это должно работать с одним фреймом на странице, или вам придется изменить индекс.
Если это не работает для вас, а затем использовать LocalConnection и поместить скрытый SWF на файл Iframe. LocalConnection является глобальным для браузера, поэтому имейте в виду, что если два окна браузера открыты, вы получите два iframes, подключающихся к одному и тому же имени, и получите некоторые фанковые результаты. Так измените имя соединения с помощью строки запроса и flashvars. Это настоящий хакерский обходной путь, но он будет работать.
[EDIT] Еще одна вещь, убедитесь, что Javascript функция обратного вызова вызывался в качестве ExternalInterface имеет серьезные проблемы домена при работе в файловой структуре, а не в домене (EX: нажав работать в редакторе). Попробуйте загрузить на свой сервер и изменить свой код для вставки, чтобы это разрешить. Также не забудьте обновить свой crossdomain.xml (ы).
Создан 13 апр. 11 2011-04-13 22:43:32 The_asMan
Вы не можете получить доступ к Iframes из-за пределов их. Это причины безопасности, и браузеры будут и должны блокировать такие попытки.
Создан 12 апр. 11 2011-04-12 20:05:39 Karol
К сожалению, мне нужно что-то выяснить, даже если это не так, как я его описал, добавила визуализацию того, что мне нужно для достижения, любых мыслей? – Chuck 13 апр. 11 2011-04-13 14:14:36
Iframe и Frame — что это такое и как лучше использовать фреймы в Html
Здравствуйте, уважаемые читатели блога KtoNaNovenkogo.ru. Сегодня речь пойдет о фреймах в языке Html. Понятное дело, что начнем мы сначала, а именно с того, что это такое за зверь. Так же поговорим о настоящем (Frame) и будущем (Iframe) этих элементов в языке гипертекстовой разметки текущей версии и в новом стандарте Html 5 при верстке сайтов.
В конце статьи, после детального описания процесса создания встроенных фреймов и их классической структуры в Html коде (уже редко используется), мы затронем вопрос актуальности построения сайта на них, а так же обсудим возможные способы их применения в текущий период времени на примере моего блога.
Что это такое и чем отличается Iframe от Frame
Что же это такое? Оказывается, что они могут использоваться не только на сайтах, но и в каких-либо приложениях к программам, но отличаются тем, что окно web страницы или же приложения будет разделено на несколько областей, в каждую из которых загружен какой-то отдельный документ. Причем, эти области фреймов ведут себя не зависимо друг от друга.
Наверное, самый наглядный пример их использования, с которым сталкивались практически все из вас, это так называемые файлы помощи (хелпы), которые имеются у многих программ установленных на вашем компьютере.
В левое окно загружен файл с меню хелпа, а в правом выводится соответствующий выбранному пункту меню документ. Примечательно, что такая структура позволяет не подгружать в левое окно повторно файл с меню при открытии нового документа в правом. Именно в этом и состоит основное преимущество использования фреймов в Html.
Собственно, само название этих элементов следует трактовать именно как самостоятельное окно. С помощью фреймов у нас появляется возможность разбить одно большое окно на несколько фрагментов, которые в свою очередь могут служить приемниками для отдельных независимых друг от друга документов (страниц, текстов, изображений, видео и т.п.).
Как создается фреймовая структура в языке гипертекстовой разметки? Если говорить про стандарт Html 4.01 (по классификации валидатора W3C), который является основным на текущий момент времени, то для этого используются три элемента — Frame, Frameset и Noframes.
Iframe — встроенный фрейм в стандарте Html 5
Если же говорить про стандарт Html 5 (наше будущее, некоторые элементы которого уже поддерживаются многими браузерами), то там тегов Frame, Frameset и Noframes, а равно и классической фреймовой структуры уже не будет, вместо них предусмотрен один единственный тэг Iframe (встроенный фрейм), о котором мы и поговорим в начале, а потом уже все внимание обратим на классическую схему из версии 4.01, которая сейчас, собственно, и используется.
Iframe в отличии от классики, которая рассмотрена ниже, не требует замены тега Body на теги Frameset. Т.е. этот тег можно будет вставлять на обычные страницы, например, внутри параграфа или в любом другом месте. По своей сути этот элемент очень похож уже на рассмотренный нами тег Img.
Он является строчным с замещаемым контентом, потому что ведет себя в точности как строчный элемент, но вот внутри него отображается посторонний внешний контент. Таких элементов в языке Html всего четыре — Img, Iframe, Object и Embed. Поэтому наш герой подразумевает наличие внешнего файла, который будет подгружаться в область, размер которой задается с помощью атрибутов этого тега.
Т.о. Iframe является сточным элементом, в который загружается внешний объект (например, видеоролик). А для указания пути до этого файла, который должен подгружаться на странице, служит специальный атрибут Src. Но в отличии от Img элемент Iframe парный, т.е. имеется еще и закрывающий тег:
В данном примере показан вывод на странице видеоролика с Youtube с помощью Iframe. Для того, чтобы ограничить область фрейма (окна), куда будет подгружаться внешний файл, предусмотрены атрибуты Width и Height, значения которых задаются в пикселах:
Т.е. этот тег создает область, в которую загружается какой-то внешний объект (не важно, с вашего ли сайта или же с другого ресурса). Ширина и высота области задаются с помощью Width и Height, а в атрибуте Src указывается путь до этого объекта.
Все эти атрибуты элемент Iframe унаследовал от подобных ему строчных тегов с замещаемым контентом (типа уже упомянутого выше Img). Ну, и еще у картинок он взял и атрибуты Hspace и Vspace, которые позволяют задать отступы от границ фрейма до обтекающего его текста.
Так же показательно, что выравнивание встроенного фрейма осуществляется абсолютно так же, как мы это могли видеть при изучении картинок в Html — Обтекание и выравнивание картинки текстом — Align в Img. Все тот же Align, но уже для тега Iframe с возможными значениями Bottom, Top, Middle, Left и Right.
Но этот элемент взял так же и несколько атрибутов от тэга Frame из классической фреймовой структуры, о которой мы очень и очень подробно поговорим ниже по тексту. К таким атрибутам относится Name, значение которого можно использовать в качестве значения атрибута гиперссылок Target для того, чтобы нужный вам документ при переходе по ссылке открывался именно в окне этого фрейма (подробности читайте ниже).
Так же в Iframe из тега Frame перекочевал атрибут Frameborder, который имеет только два значения — либо 0 (рамка вокруг фрейма не отображается), либо 1 (рамка видна). По умолчанию используется значение Frameborder=1, поэтому для ее удаления вам потребуется прописать Frameborder=»0″:
Из Frame в этот элемент перешел еще и атрибут Scrolling, имеющий по умолчанию значение Auto — полосы прокрутки во фрейме будут появляться по мере необходимости, когда контент будет больше по размеру окна, предназначенного для его отображения.
Ну, и атрибуты Marginwidth и Marginheight тоже перешли из элемента Frame. Они будут подробно рассмотрены ниже по тексту, но в двух словах — они позволяют задать отступ по ширине и высоте от краев фрейма до контента, который в него помещается.
Как я уже упоминал, наглядным примером использования Iframe является вставка видеоролика с ютуба на свой сайт:
Вставив Iframe напрямую в web страницу, вы получите вывод ролика с ютуба. Делаем вывод, что этот элемент является помесью строчных элементов с замещаемым контентом и, собственно, классических фреймов, о которых сейчас и пойдет речь.
Фреймы на основе тегов Frame и Frameset — их структура
Итак, создание классической фреймовой структуры начинается с того, что вы прописываете в Html коде вместо открывающего и закрывающего тега Body, который обычно должен присутствовать в любом документе, заменяющий его контейнер на основе элементов Frameset.
Принципиальным моментом является как раз то, что элемент Body в этом случае использовать нельзя — либо Body (для обычного документа), либо Frameset (при создании фреймовой структуры документа):
Каждый фрейм, который мы с вами формируем внутри главного, создается с помощью отдельного элемента Frame. Этот тег является одиночным и в нем мы задаем путь до того документа, который должен будет подгружаться в это окно.
Третий элемент, который мы еще с вами не затронули — это Noframes. Он парный и позволяет написать внутри себя какой-то текст, который будет обработан браузером и отображен на web странице только в том случае, если этот самый браузер (или другое устройство отображения) не поддерживает фреймы. Это может произойти, например, в случае использования какого-нибудь обозревателя для мобильных устройств.
Обычно в Noframes добавляют не только информацию о сложившейся ситуации с невозможностью обработки фреймовой структуры, но и добавляют так же возможность перейти на другие страницы, где можно будет продолжить работу без их использования. Сказать о нем что-то еще трудно, поэтому продолжим.
Получается так, что элемент Frameset, используемый заместо тега Body, занимает все место, которое отведено для области просмотра, а уже внутри этой области будут создаваться фреймы с помощью отдельных элементов Frame. В связи с этим возникает вопрос — как делить область просмотра между отдельными окнами или, другими словами, как задать размер каждого из них.
Делается это с помощью добавления соответствующих атрибутов к элементу Frameset. Их имеется целых два — Cols и Rows. Cols задает разделение большого окна на вертикальные фреймы или же колонки, а Rows позволяет разделить его на горизонтальные окна или же строки.
Создание структуры на основе Frameset и его атрибутов Cols и Rows
В качестве значений для Cols и Rows Html тега Frameset выступают числа, проставленные через запятую (без пробелов). Эти числа задают пропорции тех окон, которые мы с вами хотим получить в результате. Следовательно, сколько будет написано чисел через запятую в Cols или в Rows, столько у нас фреймов и должно будет получиться в результате.
Например, с помощью такой записи мы получим три вертикальных колонки, которые по ширине будут соответствовать пропорциям 2:5:3.
Раз мы задали пропорции для трех фреймов, то мы должны будем обязательно прописать между открывающим и закрывающим тегом Frameset три элемента Frame, хотя бы и без указания дополнительных атрибутов:
В результате наша фреймовая структура, состоящая из трех пустых окон, будет выглядеть так:
В данном примере размеры окон (Frame) мы задавали с помощью процентов, которые берутся от ширины области просмотра (это в случае использования Cols) или от ее высоты (Rows). При изменении области просмотра процентное соотношение между размерами фреймов будет сохраняться. Но вместо процентов можно использовать и просто числа, которые будут означать ширину или высоту в пикселах. Тут, думаю, тоже никаких трудностей в понимании возникнуть не должно.
Но есть в обозначениях размеров и довольно необычный вариант, который выглядит как звездочка «*». Причем, может стоять как просто «*», так и звездочка с цифрой впереди, например, так «3*». Хитрая штуковина, очень похожая на проценты и означающая, что мы делим пространство для Frame пропорционально.
Давайте посмотрим на примере. Теперь выберем деление области просмотра на горизонтальные строки с помощью Rows:
Что означает эта запись? Вся область просмотра, доступная нам по вертикали, будет разделена на три строки. Высота первой будет взята в 200 пикселей, второй — в 500, а вот третья строка будет занимать все оставшееся пространство по высоте, т.к. в качестве ее размера использовалась «*».
Что примечательно, значение «*» и «1*» означают одно и то же — все оставшееся пространство мы делим на один и эту одну часть отдаем данному фрейму (ну, то есть все оставшееся пространство).
А вот посмотрите что получится, если использовать значение «*» с цифрой для деления в пропорции:
Как вы думаете, каковы должны будут получиться размеры Frame в этом случае? Понятно, что вторая строка будет однозначно иметь высоту в 100 пикселей. Но как поделится оставшееся пространство по высоте между третьей и первой строкой?
Это довольно просто сосчитать — достаточно прибавить к двум (2*) четыре (4*) и разделить на этот знаменатель (помните дроби из школьной программы) двойку и четверку. Т.е. мы получим, что первая колонка с фреймом займет одну треть от оставшегося пространства по высоте, а третья колонка — две трети. Или же, другими словами, третья будет в два раза выше первой:
Можно использовать все три способа задания размеров окон фреймов в одном атрибуте, например:
В результате мы получим первую колонку Frame шириной в десять процентов от всей доступной области, вторую — 100 пикселей, а три оставшихся будут иметь ширину в пропорциях четыре, три и две девятых от оставшегося пространства по ширине. Вот так вот все просто и наглядно.
Если вы хотите разбить основное окно не только на горизонтальные и вертикальные фреймы, а, например, на их комбинации, то можно будет для этого использовать вложенную структуру элементов Frameset отдельно для колонок и отдельно для строк. Например, чтобы получить структуру показанную на скриншоте чуть ниже, то достаточно использовать такую конструкцию:
Т.е. сначала мы разбиваем с помощью «frameset cols=»20%,80%»« все доступное пространство на две колонки по вертикали и задаем тегом „frame“ содержимое правой колонки, а вот вместо того, что добавить элемент „frame“ для левой колонки, мы открываем новый „frameset rows=“10%,*»».
И уже с помощью него разбиваем правую колонку на две строки с фреймами, содержимое которых задаем с помощью двух тегов «frame», после чего закрываем оба контейнера «frameset». Все просто и логично.
Указываем путь в атрибуте Src элемента Frame
Но это мы все говорили про элемент Frameset и его атрибуты Cols и Rows, с помощью которых формируем структуру и задаем их размеры. Теперь давайте разберемся с тем, как выводить в нужных фреймах нужные документы и как настроить взаимодействие между их окнами.
Итак, как же мы управляем внешним видом создаваемых окон? Все это заложено в атрибутах тега Frame. Первый из них, о котором стоит упомянуть — это Src. Мы уже встречали его в теге Img, когда рассматривали вставку изображений в Html код. Суть его не изменилась и он по-прежнему позволяет указать путь до того документа, который должен быть загружен во фрейм.
Путь до документа в Src может быть указан в виде относительной или абсолютной ссылки. Относительные пути обычно используются для документа, который расположен на вашем же ресурсе, а вот абсолютные вам понадобятся, когда вы захотите загрузить в окно фрейма документ с другого сайта.
Если не будет прописан атрибут Src с указанием пути до нужного документа, то в окно будет загружен пустой документ. Лично я когда-то делал подобную вещь для своего блога (как дополнительный элемент навигации) и при этом создавал на сервере хостинга отдельную папку для него и помещал туда не только Html файлик с фреймовой структурой (который назвал index.html), но и все подгружаемые в различные окна документы, а так же файлы изображений, которые использовались в качестве фона.
Поэтому мне было проще всего использовать именно относительные ссылки в атрибуте Src тега Frame:
Что примечательно, если вы замените все приведенные в этом коде ссылки с относительных на абсолютные (типа https://ktonanovenkogo.ru/navigator/joomla.html) и откроете этот файл в браузере, то указанные во Frame документы будут подгружены с моего сервера и вы увидите аналогичную картинку в своем браузере. Причем не важно, где будет лежать ваш файл с фреймовой структурой (index.html) — на вашем компьютере или же на хостинге.
В приведенном на рисунке примере, в окно левого фрейма у меня загружается страничка с неким меню, которое представляет из себя обычный маркированный Html список. Но не суть важно как формируется меню, а важно то, что произойдет после нажатия на любую из его ссылок.
Если вы проделаете это, то все произойдет именно так, как надо — документ откроется в правом нижнем окне. Но для этого мне пришлось применить одну небольшую хитрость, ибо в варианте по умолчанию документ открывался на весь размер окна, заменяя собой фреймовую структуру, что мне было вовсе не нужно, ибо исчезало навигационное меню в левом и верхнем фреймах.
Как открывать документы по ссылке во фрейме
Итак, когда мы говорили про гиперссылки, то упоминали такой атрибут тега «A», как Target=_blank. Помните для чего он нужен? Правильно, чтобы открывать документ, на который проставлена ссылка, в новом окне. По умолчанию же, он должен открываться в том же самом окне, что эквивалентно target=»_self».
Но этим возможности Target не ограничиваются. Оказывается можно добавлять в него значение в виде названия фрейма, которое предварительно указывается в специальном атрибуте Name тега Frame. Тогда документ по этой ссылке будет открываться не в том же окне, занимая все его пространство, а в указанном вами Frame. Понятно? Если не совсем, то сейчас будет понятно при разборе примера.
Итак, вернемся к нашему примеру приведенному на расположенном чуть выше рисунке. Нам нужно открывать страницы по ссылкам из левого окна в правом нижнем (большом) фрейме. Следовательно, для начала нужно этому большому окну дать имя с помощью атрибута Name в теге Frame.
Сделали и назвали его «ktona». Теперь можно смело открывать тот файл, что подгружается в качестве меню в левое окно и добавлять ко всем тегам A в нем атрибут Target=»ktona»:
Конечно же, с помощью инструмента поиска и замены в Html редакторе Notepad проставить его для всех гиперссылок будет не трудно, но зачем же излишне загружать код, когда у нас есть прекрасная возможность использовать специальный тег Base, о котором мы уже упоминали все в той же статье про гиперссылки, когда говорили про использование Target blank.
Достаточно лишь поставить между открывающим и закрывающим тегами Head элемент base target=»ktona» и все ссылки в Html коде этого документа будут открывать новые страницы в указанном фрейме под названием «ktona»:
Кстати, если рассматривать мой когда-то существовавший инструмент в качестве примера, то нужно еще сделать так, чтобы все ссылки из верхнего горизонтального окна открывали бы свои страницы именно в левом вертикальном фрейме, которое служит у меня левым меню. Что нужно для этого сделать?
Ну, во-первых, нужно дать имя левому вертикальному фрейму:
А в файле, который загружается в верхнее окно (gor.html), нужно добавить элемент base target=»gor»:
Все, теперь мы сделали все как надо. Все документы по ссылкам из верхнего фрейма открываются в левом окне, а все ссылки уже из него будут открывать документы в центральном и самом большом Frame. По-моему, все просто и логично.
Атрибуты тега Frame для настройки внешнего вида окон
Давайте теперь посмотрим, какие атрибуты кроме Src и Name можно использовать в теге Frame для настройки внешнего вида фреймов. Начнем с Scrolling. С помощью него мы можем настроить отображение полос прокрутки для каждого окна вашей фреймовой структуры в отдельности.
Scrolling имеет значение по умолчанию Auto — браузер будет автоматически решать, на основе размера подгружаемого во фрейм документа, отображать полосу прокрутки или нет. Если документ не будет полностью помещаться в окно, то появится полоса прокрутки, позволяющая просмотреть его весь до конца.
Так же в качестве значений для Scrolling можно использовать значения Yes (полосы прокрутки в окне будут отображаться всегда, даже если документ полностью влезает в него) и No (полосы прокрутки вообще никогда появляться не будут, даже если часть документа не влезет).
Я в своем, когда-то существовавшем инструменте, использовал значение по умолчанию Auto и полосы прокрутки во фреймах появлялись по мере необходимости:
Следующий атрибут тега Frame — Noresize — является одиночным (у него нет значений). Прописав его, вы тем самым запретите изменение его размеров, которое по умолчанию осуществляется простым перетаскиванием границы фреймов мышью.
При подведении курсора мыши к границе вы увидите, что курсор превратится в двунаправленную стрелку и теперь, нажав на левую кнопку мыши, можно передвигать границу по вашему желанию. Noresize накладывает на это своеволие запрет (при подведении курсора мыши к границе окон, двунаправленную стрелочку вы уже не увидите).
Еще один визуальный атрибут — Frameborder. C помощью него вы можете указать — рисовать рамку (границу) между фреймами или же не рисовать. Frameborder может иметь только два возможных значения — либо 0 (рамку не рисовать), либо 1 (границу отображать). По умолчанию, естественно, используется значение 1.
Есть одна тонкость. Если вы хотите убрать видимую рамку, то вам придется добавить Frameborder=0 во все теги Frame тех фреймов, видимые границы между которыми вы хотите убрать.
Ну, и еще нам осталось рассмотреть пару атрибутов тега Frame — Marginwidth и Marginheight, которые задают отступы по ширине (справа и слева) и высоте (сверху и снизу) от границ окна до контента загруженного в него (число означает количество пикселов отступа):
Почему нельзя делать сайт на фреймах?
Давайте посмотрим в чем заключается принципиальный недостаток классических структур, который по сути ставит крест на их использовании при создании сайта. Он состоит в том, что по Url адресу этой фреймовой структуры невозможно отследить ее состояние.
У сложных структур могут быть тысячи различных состояний (варианты документов открытых в различных окнах фреймов), но при этом Url адрес этой самой структуры не меняется. Из-за этого будет невозможно пользоваться закладками браузера или же отправлять ссылки на понравившиеся страницы другим пользователям. Почему?
Потому что адрес остается неизменным и при открытии его из закладок браузера, или же из письма электронной почты, вы получите страницу со стартовым состоянием фреймовой структуры, а не то ее состояние, которое вы хотели бы сохранить.
Хотя, конечно же, эта проблема решаема, но уже не средствами Html, а с помощью серверных (например, Php) или клиентских языков (ДжаваСкрипт) программирования, и решения эти будут работоспособными не на все сто процентов. Такие решения, по сути, позволяют дописывать к Url адресу фреймовой структуры дополнительные данные о ее текущем состоянии, но сделать это не просто, а надежность будет не абсолютной.
Это первый минус использования фреймов для создания сайтов и очень весомый, но есть и еще один огромный минус. Поисковики, конечно же, уже давно научились индексировать их и извлекать из них адреса тех документов, которые подгружаются в их окна. Проблема в другом.
Когда пользователь переходит из поисковой выдачи Яндекса или Google на ваш сайт, построенный на базе фреймовой структуры, то откроется только тот документ, который загружался в один из фреймов, а не вся структура. Понимаете, о чем я говорю?
Пользователь увидит документ и не увидит навигации по вашему сайту, ибо она будет зашита в других окнах, а они подгружаются только в составе всей структуры.
В итоге сайт, построенный на фреймах, становится просто не юзабельным. Хотя опять же есть решения этой проблемы на базе серверных скриптов, когда будет осуществляться редирект с адресов отдельных документов на фреймовую структуру находящуюся в нужном состоянии, но это опять же очень сложно и не всегда надежно.
В общем, вывод можно сделать однозначный — создавать сайты на фреймах не нужно. Но зато они постоянно используются для создания хелпов для различных приложений, ну и еще где-то по мелочи могут пригодиться.
Например, я создал фреймовую структуру, которую обозвал «Навигатор» (сейчас ее временно убрал) и которая стала своеобразным развернутым внешним меню для моего блога, которое, как мне кажется, должно упростить работу с ресурсом и повысить его юзабилити, а следовательно и улучшить поведенческие факторы, которые сейчас «без балды» очень и очень сильно влияют на продвижение сайта.
Но, правда, во избежании каких-либо проблем с поисковыми системами, я закрыл от индексации через robots.txt всю эту фреймовую структуру, а так же добавил на всякий случай во все ее Html файлы мета тег Rodots с запретом их индексации:
Но все эти ограничения касаются только структур на тегах Frame и Frameset, а встроенные фреймы на тегах Iframe не имеют никаких видимых недостатков, и их вполне можно и даже нужно использовать на своих проектах, хотя бы для вставки видеороликов с Ютуба.
Как открыть файл SWF
SWF – это особый формат, разработанный специально для веб-приложений и использования в интернет-среде. Это формат для хранения различного рода анимации, графического контента и даже коротких видео и аудио файлов небольшого объёма.
Для примера, практически все рекламные баннеры, которые мы ежедневно видим перед собой в Интернете созданы именно в данном формате. Также с помощью данной технологии можно создавать интерактивный интерфейс невысокой сложности.
Аббревиатура «swf» изначально расшифровывалась как «ShockWave Format». Теперь, для того, чтобы не было путаницы с другими флеш-приложениями, этот формат называется «Small Web Format» (маленький веб-формат).
Как и чем открыть SWF?
К сожалению, открыть данный файл с помощью стандартных средств просмотра изображений Windows не представляется возможным. Тут ситуация очень схожа с форматом «GIF», который хоть и отображается как изображение, но запустить анимацию нельзя. Так чем же всё-таки можно просмотреть такого рода файлы?
Браузеры
Первый и самый простой способ, абсолютно не требующий дополнительной установки каких-либо средств – открыть нужный файл в любом браузере. Практически все современные средства для интернет-серфинга предусматривают поддержку технологии «Flash».
Запустить swf-файл используя браузер просто:
Дважды кликните на необходимом swf-файле.
Готово! Браузер откроет наш файл, и впредь все swf-файлы будут ассоциироваться с данной программой.
Adobe Flash Player
Второй доступный и очевидный вариант – использовать программные продукты от «Adobe», так как именно эта компания на данный момент – основной разработчик любого ПО с технологией Flash. Самый распространённый продукт, который есть у каждого – Flash Player.
Итак, чтобы открыть данный тип файлов в этой программе необходимо:
Открыть Adobe Flash Player, используя ярлык на рабочем столе или через меню «Пуск». В окне программы открываем функцию верхней панели «File» («Файл»), в открывшемся подменю выбираем «Open» («Открыть»).
Готово! Файл откроется и будет воспроизведён Flash Player-ом.
На заметку! Ещё один более быстрый способ – выделить необходимый файл и нажать правой клавишей мыши. В контекстном подменю выбрать подпункт «Открыть с помощью» («Open with»), и уже в нём выбрать Флеш-плеер.
С помощью медиаплеера
Для этого способа подойдёт любой проигрыватель видео для Windows – самый популярный KMPlayer, распространённый VLC media player, или чуть менее известный GOM player. Впрочем, список подходящих программ достаточно велик.
Разберём на примере KM-плеера. Последовательность действий проста:
Запускаем КМПлеер. Важно открыть именно саму программу, а не конкретный файл. Так будет удобнее, и это поможет избежать вылетов.
На заметку! Также можно запустить файл в плеере, используя контекстное меню. Однако это сработает только в том случае, если программа присутствует в данном подменю.
