XHTML Strict – документ в документе без iframe.

Если вы создаете веб-страницу соответствующую типу документа: XHTML 1.0 Strict или XHTML 1.1, то она не может содержать в HTML-коде элемент iframe.

Иными словами, если в начале документа указывается такое объявление:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

или такое:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
,
то в самом документе не должно быть ничего подобного: <iframe></iframe>

Но это вовсе не проблема, потому что для внедрения в HTML-документ каких-либо объектов, существует элемент с вполне логичным названием object. С его помощью можно добавлять в документ flash-ролики, аудио-, видеоролики, а также другие HTML-документы. На последних остановлюсь подробнее.

Синтаксис простой, HTML-код:
<object data="/examples/objecttag/index.html" type="text/html" width="200" height="150"></object>.
Получается:

Как обычно, в Firefox и Opera все выглядит замечательно, а вот в Internet Explorer вокруг встроенного документа появилась граница, а справа еще и скроллинг.

Важное замечание. Если вы читаете этот текст в Firefox или Opera, вы не сможете увидеть, ради чего он написан. Чтобы убедиться в справедливости написанного и увидеть все своими глазами, вам следует открыть эту страницу в Internet Explorer 6 и 7.

Опытным путем удалось выяснить, что их появление напрямую связано с Doctype. Чтобы было понятно, о чем идет речь, следует вернуться на пару лет назад и обратиться к странице Различное отображение HTML документов в браузере зависит от объявленного Doctype. Дело осложняется еще и тем, что в различных версиях Internet Explorer одинаковый код показывается по разному. Итак, остается подобрать правильный Doctype, если вам важно, чтобы страница была кроссбраузерной и прилично выглядела без навязываемого браузером скроллинга и рамки.

В ходе эксперимента используется документ с простейшей разметкой:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru">

<head>
<title>XHTML.RU :: The object tag test</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 <style type="text/css"><!--
 * { padding:0; margin:0; border:0;}
 body { overflow: auto; background: #333; color: #fff;}
 //--></style>
</head>
<body>

<p>
<script type="text/javascript"><!--
document.write(document.compatMode);
//--></script>
</p>
<p>XHTML 1.0 Transitional</p>

</body>
</html>

Это базовый документ, далее у него будет изменяться только Doctype и все, что с ним связано. Всего сделано восемь таких документов. Начали!

XHTML 1.0 Transitional doctype вместе с XML объявлением <?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML 1.0 Transitional doctype без XML объявления <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

HTML 4.0 Transitional doctype с URL <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Transitional doctype с URL http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">

HTML 4.01 Transitional doctype с URL http://www.w3.org/TR/html4/loose.dtd <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Transitional doctype без URL <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Вот здесь, похоже мы и приблизились к истине, но картина будет не полной, если не попробовать вообще убрать Doctype.

Вывод неутешительный, так как легко заметить, что рамка и скроллинг в Internet Explorer исчезают, если импортируемый документ обрабатывается браузером в Quirks Mode, т.е. в режиме обратной совместимости.

Замечание. Внимательные читатели заметят, что использовались не все возможные типы документа. Это действительно так, потому что проверка всех вариантов займет куда больше времени, но я не уверен, что это может повлиять на результат. Если все-таки заметите неточности или продолжите эксперимент с другими Doctype — оставляйте свои комментарии.



Много комментариев (27) к “XHTML Strict – документ в документе без iframe.”

  1. dark-demon :

    если используется object, то в IE перестаёт работать window.frameElement

    iframe можно использовать в xhtml, если подключить модуль iframe или самим расширить доктайп

    раз уж вы используете транзишнл доктайп, то iframe вроде как там уже есть

    ну и на правах извращения:

    <stylesheet version=”1.0″    xmlns=”http://www.w3.org/1999/XSL/Transform”    xmlns:xslt=”http://www.w3.org/1999/XSL/Transform”    xmlns:xhtml=”http://www.w3.org/1999/xhtml”    >    <output        method= “html”        omit-xml-declaration= “yes”        encoding= “utf-8″        indent= “no”        media-type= “text/html”        cdata-section-elements= “script style”        doctype-public= “-//W3C//DTD XHTML 1.0 Strict//EN”        doctype-system= “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”    />    <template match=”@*|node()”>        <copy>            <apply-templates select=”@*|node()” />        </copy>    </template>    <template match=”xhtml:br”>        <element name=”br” namespace=”http://www.w3.org/1999/xhtml” />    </template>    <template match=”xhtml:object”>        <xhtml:object>            <apply-templates select=”@*” />            <element name=”iframe” namespace=”http://www.w3.org/1999/xhtml”>                <apply-templates select=”@*” />                <attribute name=”src”>                    <value-of select=”@data” disable-output-escaping=”yes” />                </attribute>                <attribute name=”scrolling”>no</attribute>                <attribute name=”frameborder”>no</attribute>                <apply-templates select=”node()” />            </element>        </xhtml:object>    </template></stylesheet>

    сия весч IE подсовывает iframe, а ie/opera/safari – object
    чтобы xslt сработал нужно отдавать страницу как application/xml


  2. Аркадий :

    Идея замечательная, но вот в чем проблема – если я хочу отобразить документ, расположенный на другом сайте, то IE7 не показывает его вовсе – говорит, что слишком небезопасно… Возможно ли это как-то обойти?
    У FF это проблемы нет…


  3. Максим Покровский :

    Хороший материал. Спасибо.


  4. webmaster :

    2Аркадий – у меня такая же проблема, если кто-то решил дайте знать
    а вообще, это шаманство какое-то… приходиться каждый раз как-то выкручиваться перебирвать все возможные и невозможные варианты


  5. SelenIT :

    Смог убить прокрутку в стандартном режиме добавлением строчки CSS:
    html { overflow: hidden; }


  6. moro :

    2 SelenIT, этим ты совсем её убил. Ставьте:

    body,html{
    width:100%;
    height:100%;
    }

    html{
    overflow:auto;
    }

    и будет вам счастье :)


  7. SelenIT :

    moro, согласен, так будет больше похоже на дефолтное поведение в Quirks mode. А суть дела, насколько я понимаю, в том, что в стандартном режиме основной скроллинг является “собственностью” не body, а documentElement’а…


  8. Valeriy :

    Вроде нечто похожее на wxcode.com
    Работает также и в Firefox. В Opera – нет.


  9. Skyler :

    У меня такая проблема. С помощью тэга нужно вставить картинку в сайт. В IE 7 у меня вовсе не показывается эта картинка, только надпись и еще выскакивает всплывающее окно. В других браузерах Mozilla, Opera все отображается корректно. Помогите решить эту проблему.


  10. const :

    А как добраться к подобным объектам в дереве?

    Предположим есть a.html и b.html.
    Мне нужно чтоб b.html отображался одним стилем, а a.html. Но когда b.html вставлен в а.html, через object, они должны отображаться одинаково.

    Спасибо.


  11. const :

    Если не затруднит, покажите на примере этой страницы. Объект с текстом BackCompat. No doctype.
    html > body > div > div > div > div > div > object


  12. Alex :

    Прикольно


  13. интернет бизнес :

    а таржет на нем будет работать , как для ифрейма ?


  14. SelenIT :

    2 интернет бизнес: таржета в указанных стандартах тем более нет. Только JS. Если нужен таржет, значит, не нужен стрикт-стандарт (и можно смело юзать ифрейм;) и наоборот.


  15. шкипер :

    To SelenIT:
    Есть таргет, подробности на форуме. Как раз с iframe в рамках DTD у меня ничего не получилось. Правда я и не спец.


  16. SelenIT :

    шкипер, нету его там, нету :). Я на форуме отписался по этому поводу.


  17. Маслов Саша :

    Спасибо грамотно разесняете


  18. vegas :

    возникла такая задачка: как запретить загружать свою страницу в iframe объявленном через object?

    раньше решалось через self!=top, но в случае object self==top : true и self.location указывает на урл родителя.


  19. Саша :

    Честно сказать, не очень хорошо, сейчас бы не стал так делать ни за что

    $(”#pumpurum”).load(”http://…”);
    http://docs.jquery.com/Ajax/load

    Работает везде, тут тебе и эмуляция “target” и обращаться проще


  20. Excelsus :

    Это практически бесполезно без TARGET.


  21. Константин :

    А для чего вообще париться с XHTML? Не понимаю проблемы. Я использую !DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” и ни на что не жалуюсь. Кто-то скажет, чем Хштмл круче ШТМЛ?


  22. деловой человек Kozzi :

    Internet Explorer в корзину надо!


  23. Mons :

    Согласен. IE который не поддерживает половино из новых стандартов.. не уважают юзеров и веб девелоперов. За что нам уважать IE в корзину его.


  24. Сергей :

    Спасибо вам огромнейшее за материал, а то уже всю голову сломал себе пока не нашел эту статью. Теперь вышло так как задумал.


  25. Петр :

    Mons :
    >Согласен. IE который не поддерживает половино из новых стандартов.. не уважают юзеров и веб девелоперов. За что нам уважать IE в корзину его.
    Юзеры кто?
    За изложенный материал спасибо. Использую, по мере необходимости.


  26. Декоратор растениевод :

    Да ИЕ не фонтан, но только из анализа – большинство юзеров заходят именно под ним. Для некоторых, firefox и opera – не больше чем ругательства.


  27. AntiDPS :

    Спасбо за мануал!



22 queries 0.205 seconds.