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

Question

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

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

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

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

Answer 1

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

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

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

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

Ради потомков, вот мой оригинальный ответ пять лет назад:

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

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

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

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

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

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

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

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

Answer 2

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

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

Answer 3

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

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

Answer 4

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

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

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

Answer 5

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

• Протестировано в Safari, HomeScreen, новых WKWebView и UIWebView.

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

• Изменения iOS8 в списке рассылки Cordova
• Блог Sencha.com: Apple демонстрирует любовь к HTML5 сiOS 8

Answer 6

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

в Chrome версии 32, автоматически появляется 2-пиксельная рамка вокруг фреймов без атрибута seamless.Его можно легко удалить, добавив следующее правило 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;
}

Answer 7

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

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

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

Answer 8

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

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

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

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

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

Answer 9

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

Answer 10

Вам нужно всего лишь написать

seamless

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

seamless = "seamless"

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

РЕДАКТИРОВАТЬ - это не удаляет полосы прокрутки.Странно

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