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

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

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

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

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

10 62
attributes iframe html5

10 ответов:

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

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

28

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

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

поэтому я думаю, что суть всего этого как со стороны разработчика, так и со стороны веб-разработчика заключается в том, что 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, HomeScreen, new WKWebView и UIWebView.

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

2

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

бесшовные

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

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

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

изменить-это не удаляет полосы прокрутки. Странно

прокрутки="нет" все еще, кажется, работает в 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