HTML5 iFrame Бесшовный атрибут

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

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

Любая идея, почему она не работает?

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

Ответ 1

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

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

Ответ 2

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

Атрибут 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.

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

Ответ 3

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

В соответствии с caniuse.com ни один из основных браузеров не поддерживает этот атрибут (больше), поэтому вы, вероятно, не должны его использовать.

Ответ 5

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

в chrome версии 32, граница с 2 пикселями автоматически появляется вокруг iframe без атрибута "бесшовность". Это можно легко удалить, добавив это правило 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;
}

Ответ 7

Вам нужно написать

бесшовная

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

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

Я сам это понял.

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

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

Ответ 8

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

Ответ 9

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

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

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

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

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

Ответ 10

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

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

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