Бесшовные атрибута HTML5 и тега iframe

в HTML5 iframe имеет новые атрибуты, такие как "бесшовные", которые должны удалять границы и полосы прокрутки. Я пробовал, но, похоже, не работает, я все еще вижу полосы прокрутки и границы (я использую Google Chrome в качестве браузера), Вот мой код:

<iframe seamless="seamless" title="google" width="600" height="300" src="http://www.google.co.uk"></iframe>

есть идеи, почему это не работает?

еще один вопрос: Можно ли нацелить определенный раздел страницы внутри iframe?

62
attributes html5 iframe

10 ответов

Он еще не поддерживается правильно.

Chrome 31 (и, возможно, более ранняя версия) поддерживает некоторые части атрибута, но он не полностью поддерживается.

28

Обновлено: Октябрь 2016

на seamless атрибут больше не существует. Первоначально он был включен в первую спецификацию HTML5, но впоследствии был удален. Несвязанный атрибут с тем же именем сделал краткую камею в HTML5.1 черновик,но это слишком был выброшен в середине 2016:

поэтому я думаю, что суть всего этого как со стороны разработчика, так и со стороны web-dev заключается в том, что seamless as-specced, похоже, не то, что кто-то хотел начинаться. Или, по крайней мере, больше, чем кто-либо хотел. И вообще, как @annevk говорит, кажется, что многое из этого с тех пор было" преодолено событиями " в свете Shadow DOM.

другими словами: очистить seamless атрибут из вашей памяти, и притворяться, что его никогда не существовало.

ради потомства, вот мой первоначальный ответ от пяти лет назад:

оригинальный ответ: апрель 2011

атрибут находится в режиме Черновика в данный момент. По этой причине ни один из текущих браузеров еще не поддерживает его (поскольку реализация может быть изменена). В то же время лучше всего использовать CSS для удаления границ/полос прокрутки из iframe:

iframe[seamless]{
    background-color: transparent;
    border: 0px none transparent;
    padding: 0px;
    overflow: hidden;
}

в бесшовном атрибуте есть больше, чем то, что можно добавить с помощью CSS: часть аргументации атрибута заключалась в том, чтобы позволить вложенному контенту наследовать те же стили, применяемые к iframe (действуя так, как будто встроенный документ был одним большим например, вложенный внутри элемента).

наконец, версии Internet Explorer (8 и более ранних версий) требуют дополнительных атрибутов для удаления границ, полос прокрутки и цвета фона:

<iframe frameborder="0" allowtransparency="true" scrolling="no" src="..."></iframe>

естественно, это не проверяет. Так что решать тебе. Мой (придирчивый) подход состоял бы в том, чтобы обнюхать строку агента и добавить атрибуты для версий IE ранее 9.

надеюсь, что это поможет. :)

112

согласно последней рекомендации W3C HTML5 (которая, вероятно, будет окончательным стандартом HTML5), опубликованной сегодня, есть нет бесшовного атрибута в элементе iframe

54

можно использовать атрибут semless прямо сейчас, здесь я нашел немецкую статью http://www.solife.cc/blog/html5-iframe-attribut-seamless-beispiele.html

и вот еще одна презентация по этой теме:http://benvinegar.github.com/seamless-talk/

вы должны использовать окно.метод postMessage для связи между родителем и iframe.

6

Я подумал, что это может быть полезно кому-то:

в chrome версии 32 2-пиксельная граница автоматически появляется вокруг iframes без бесшовного атрибута. Его можно легко удалить, добавив Это правило CSS:

iframe:not([seamless]) { border:none; }

Chrome использует тот же селектор с этими стилями пользовательского агента по умолчанию:

iframe:not([seamless]) {
  border: 2px inset;
  border-image-source: initial;
  border-image-slice: initial;
  border-image-width: initial;
  border-image-outset: initial;
  border-image-repeat: initial;
}
2

iO8 имеет удалены поддержка бесшовного атрибута iframe.

  • протестировано в Safari, рабочий стол, Новый WKWebView и UIWebView.

полная информация и обзор производительности других изменений iOS 8:

2

вам нужно только написать

бесшовные

в коде. Нет необходимости:

бесшовные ="бесшовные"

Я только что узнал сам.

EDIT - это не удаляет полосы прокрутки. Странно!--1-->

прокрутки="нет" до сих пор, кажется, работает в HTML5. Я пробовал использовать переполнения функция со встроенным стилем, как рекомендовано html5, но это на меня это не действует.

0

используйте атрибут frameborder в iframe и установите его в frameborder="0" . Это производит бесшовный вид. Теперь вы, возможно, говорите, что я хочу, чтобы вложенный iframe контролировал, а у меня есть полосы прокрутки. Затем вам нужно создать файл сценария JavaScript, который вычисляет высоту минус любые заголовки и устанавливает высоту. Debounce-это плагин javascript, необходимый для того, чтобы изменить размер в старых браузерах, а иногда и в chrome. Это приведет вас в правильном направлении.

0

все еще в 2014 бесшовный iframe не полностью поддерживается всеми основными браузерами, поэтому вы должны искать альтернативное решение.

к январю 2014 бесшовный iframe по-прежнему не поддерживается для Firefox ни IE 11, и он поддерживается Chrome, Safari и Opera (версия webkit)

Если вы хотите проверить это и более поддерживаемые параметры подробно, тестовый сайт HTML5 будет хорошим вариант:

http://html5test.com/results/desktop.html

вы можете проверить различные платформы, в разделе Оценка вы можете нажать каждый браузер и посмотреть, что поддерживается, а что нет.

0

Я не мог найти ничего, что соответствовало бы моим требованиям, hece я придумал этот скрипт (зависит от jQuery):

https://gist.github.com/invernizzie/95182de86ea9dc5daa80

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

0