Html object or iframe type

Iframe против Object, когда использовать?

Кто-то знает, а кто-то нет, что в существует 2 способа вставить одну html страницу в содержимое другой — это iframe и object, результат будет примерно одинаков.

Некоторые, исследуют какую-то чушь, пытаясь понять как избавиться от полосы прокрутки и рамки у объекта в IE (зачем-то меняя доктайп). Хотя можно либо добавить CSS в включаемый документ:

либо почитать спецификацию W3C о фреймах «Implementing HTML Frames», где сказано что через можно применять аттрибуты как у iframe, в результате:

Когда использовать Object

Тега Iframe нету в спецификации HTML 4.01 Strict, поэтому чтобы добиться валидности (если это кого-то волнует) в этом режиме нужно использовать его.

Когда использовать Iframe

К сожалению тег Object не обеспечивает javascript взаимодействие между parent и child документами в IE (всех версий). А это 95% случаев когда мне надо его использовать. Поэтому альтернативы iframe в этом нет. Желающие могут убедиться проверив следующие примеры в IE и других браузерах. Пример использования Object (яваскрипт не работает в IE)
Пример использования iframe (яваскрипт работает везде) Код который используется в подгружаемом файле

var a=parent.document.getElementById('test'); alert(window.parent.document.title); a.innerHTML='Яваскрипт работает';

Поэтому если вам надо использовать JS, то либо используйте HTML 4.01 Transitional, либо просто наплюйте на валидность, браузеры всё равно будут отображать iframe даже в strict. А лучше всего конечно будет использовать HTML5, который всегда в строгом режиме, и разрешает тег iframe. Если кто-то скажет как всё-таки получить из дочернего фрейма в object содержимое или переменную из родительского элемента (и изменить), я буду очень признательна.

Комментарии:

Я решил данную проблему с помощью условных комментариев. На эту идею меня подтолкнула другая ваша запись: 2010/01/15 1. Код, приведенный в примере ниже, скрывает от всех версий IE тег object с его содержимым:

2. Следующий пример скрывает от всех браузеров (и от валидатора тоже) тег iframe с его содержимым, но отображает его в IE:

Сочетание этих 2х конструкций использовалось мною в xhtml 1.0 strict, прекрасно отображалось в разл. браузерах, а так же проходило проверку на валидность. Это вполне логично, так как здесь iframe уже содержимое комментария.

Да, спасибо Игорь, замечательное дополнение.
Также хочу отметить, что в спецификацию html5 тег ифрейма возвращён, и можно использовать его. Кроме всего прочего ему предписывается выполнять роль песочницы (sandbox), т.е. инкапсулировать возможный вредоносный код ифрейма. Насколько мне известно этот механизм уже используется в ff и ie8 (там начисто отключаются скрипты и всевозможные event’ы типа onmouseover).

Чтобы оставить комментарий нужно войти или зарегистрироваться (Регистрируйтесь за 5 секунд, без подтверждения email и т.п.).
Либо волшебно используйте ваш логин в Google, Яндекс, рамблер или ЖЖ чтобы войти через Open_ID

15 самых популярных статей:

• Русский язык в URL (77582 просмотра)
• Align средствами css и атрибутами html (64892 просмотра)
• Биты, байты, кодировки (54856 просмотров)
• Как сделать, чтобы письма не попадали в спам 2. DKIM (51397 просмотров)
• Как отключить проверку совместимости расширений в Firefox (42514 просмотров)
• Как сделать чтобы письма не попадали в спам ящик (41292 просмотра)
• Вёрстка дивами — «футер который всегда внизу». (38584 просмотра)
• Javascript — о массивах и объектах (36845 просмотров)
• Меняем цвета Input в Google Chrome (35686 просмотров)
• Хлебные крошки. Нужна ли строка навигации на сайте? (34174 просмотра)
• Что происходит в режиме совместимости (28190 просмотров)
• Статистика кодов ответов сервера (26971 просмотр)
• Превью для PSD файлов фотошопа (24331 просмотр)
• Про DOCTYPE и стандарты html. (21485 просмотров)
• Перенос строк в теге (21374 просмотра)

Источник

Разница между элементами iframe, embed и object

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

Какова фактическая разница между iframe , embed и object ?

Если я хочу вставить HTML файл с стороннего сайта, какой из этих элементов я мог бы использовать, и как бы они отличались?

Элемент iframe представляет собой вложенный контекст просмотра. Стандарт HTML 5 – “Элемент “

В основном используется для включения ресурсов из других доменов или поддоменов, но может также использоваться для включения содержимого из того же домена. Сила в том, что встроенный код является “живым” и может взаимодействовать с родительским документом.

Стандартизированный в HTML 5, до этого это был нестандартный тег, который, по общему признанию, был реализован всеми основными браузерами. Поведение до HTML 5 может варьироваться…

Элемент embed обеспечивает точку интеграции для внешнего (обычно не HTML) приложения или интерактивного контента. (Стандарт HTML 5 – “Элемент “)

Используется для встраивания контента для плагинов браузера. Исключением является SVG и HTML, которые обрабатываются по-разному в соответствии со стандартом.

Подробная информация о том, что можно и что нельзя делать со встроенным контентом, зависит от плагина браузера. Но для SVG вы можете получить доступ к встроенному документу SVG от родителя с помощью чего-то вроде:

svg = document.getElementById("parent_id").getSVGDocument(); 

Изнутри встроенного документа SVG или HTML вы можете связаться с родителем с помощью:

parent = window.parent.document; 

Для встроенного HTML нет способа получить вложенный документ от родителя (который я нашел).

Элемент может представлять внешний ресурс, который, в зависимости от типа ресурса, будет обрабатываться как изображение, как вложенный контекст просмотра или как внешний ресурс, обрабатываемый плагином. (Стандарт HTML 5 – “Элемент “)

Заключение

Если вы не встраиваете SVG или что-то статичное, вы, вероятно, лучше всего используете . Чтобы включить SVG, используйте (если я правильно помню, не даст вам сценарий †). Честно говоря, я не знаю, почему вы бы использовали если бы не старые браузеры или flash (с которыми я не работаю).

† Как указано в комментариях ниже; скрипты в будут выполняться, но родительский и дочерний контексты не могут взаимодействовать напрямую. С помощью вы можете получить контекст дочернего элемента от родителя и наоборот. Это означает, что вы можете использовать сценарии в родительском элементе для манипулирования дочерним элементом и т.д. Эта часть невозможна в или где вместо этого вам придется настроить какой-либо другой механизм, например JavaScript postMessage API.

Одна из причин использования object over iframe заключается в том, что объект изменяет размер встроенного содержимого для соответствия размерам объекта. наиболее заметным на сафари в iPhone 4s, где ширина экрана 320px , а html из встроенного URL может устанавливать размеры больше.

Другая причина использования object над iframe заключается в том, что вспомогательные ресурсы object (когда выполняет запросы HTTP ) считаются passive/display в терминах Mixed content , что означает, что он более безопасен, когда вы должны иметь Mixed content .

Смешанный контент означает, что когда у вас есть https , но ваш ресурс от HTTP .

У MDN есть хорошая статья на эту тему:

Я не уверен, существовал ли он, когда этот вопрос был впервые задан.

Источник

What is the difference between embed, object, and iframe tags?

You may have come across some HTML tags namely embed object and iframe, and wondered where they are used and how they are different. On the surface, all of these tags seem to do the same thing, but there are a few key differences. When you’re using these tags in your projects, it’s important to know the difference between them to make a better decision on which one should be used in what scenario. In this article, we will look at what these tags are, their attributes, and the key differences between them.

Introduction

All of the HTML tags mentioned embed, object, and iframe are basically used to embed something in an HTML page. For various reasons, it can be an advantage to embed an element in a page. These days it is especially video that is embedded, and to some degree pdf documents, but those are not the only uses.

Frames, a previous iteration of the modern iframe tag, were extremely popular in the late 1990s since they opened up new design options. Due to Frames the tag being deleted in HTML 5, frames are only used on a small number of outdated websites nowadays. We still frequently utilize embedding, and there are three tags for it: object , embed , and iframe . They essentially perform the same functions, but you should be aware that the tags differ slightly in a few small ways, which may make one of them preferable to utilize when coding. iframe is currently the most common tag overall, whereas embed is allegedly being deprecated.

One important thing to note here is that, while all these tags embed object and iframe can handle video, it is generally a better decision to use the tag if you are planning to embed videos in your HTML page.

Difference between embed, object, and iframe

The

The tag is the most commonly used tag for embedding another page or document within an HTML page.

We can create a simple iframe by using the following syntax,

iframe src="https://example.org" title="Codedamn iframe example" width="500px" height="200px"> iframe>
Code language: HTML, XML (xml)

And it will look something like this on an actual HTML Page,

Notice how the iframe also has a vertical scrollbar by default. You may also notice we are using some attributes like src , title , width , height . Only the src attribute is required to make the iframe work and you should put the path to the file or page you’re trying to embed in it. There are so many attributes that be added to customize the iframe to your liking, some of the important ones are mentioned below.

If you choose, you may write something or include photographs within the opening and closing tags. That will only be displayed underneath the content that the “src” property is linking to.

Notice there are closing tags, and unlike iframe, we have to specify a “type” attribute for it to work.

The attributes that are available to be used on this tag are as follows,

Notice there are closing tags here like in an iframe but we also have to specify a “type” attribute. Also keep in mind that we are using the “data” attribute here rather than “src”, which is the attribute typically used for file/path. If you choose, you may write something or include photographs within the opening and closing tags. That will only be displayed underneath the content that the “data” property is linking to.

Here are some of the important attributes that come with the tag,

Attribute	Values	Description
data	URL	provides the object’s embedded file address.
height	pixels	specifies the element’s width in pixels. The effect can be achieved with style, which is in any case advised. This cannot be a percentage; it must be an absolute value.
width	pixels	specifies the element’s width in pixels. The effect can also be achieved with style. This cannot be a percentage; it must be an absolute value.
type	string	specifies a type of content to be embedded.
name	string	The name of the control (HTML4), or the name of the embedded browsing context (HTML5).
border	pixels	Specifies the width of a border around the object’s control, in px.

object attributes

Conclusion

Being able to embed external content, embed object and iframe or files in your web pages can be extremely useful. In this article, we looked at what are embed, iframe, and object tags, how they are used, as well as the differences between them, and some important attributes associated with them. I hope this article has helped you solidify your understanding of these tags and you’ll be able to which of these tags you should be using in your project. Now it is time for you to apply what you have learned and use these tags appropriately in your code!

If you have any questions regarding this article or want to talk about anything technology, you can find me on Twitter. Thank you for reading!

Sharing is caring

Did you like what Supantha Paul wrote? Thank them for their work by sharing it on social media.

Источник