Ответ 1
Он еще не поддерживается.
Chrome 31 (и, возможно, более ранняя версия) поддерживает некоторые части атрибута, но он не поддерживается полностью.
в HTML5 iframe имеет новые атрибуты, такие как "бесшовный", который должен удалять границы и полосы прокрутки. Я пробовал, но, похоже, не работает, я все еще вижу полосы прокрутки и границы (я использую Google Chrome в качестве браузера), здесь мой код:
<iframe seamless="seamless" title="google" width="600" height="300" src="http://www.google.co.uk"></iframe>
Любая идея, почему она не работает?
Еще один вопрос: возможно ли настроить таргетинг на определенный раздел страницы внутри iframe?
Он еще не поддерживается.
Chrome 31 (и, возможно, более ранняя версия) поддерживает некоторые части атрибута, но он не поддерживается полностью.
Атрибут seamless
больше не существует. Первоначально он был включен в первую спецификацию HTML5, но впоследствии был удален. Несвязанный атрибут с таким же именем сделал короткую камею в черновике HTML5.1, но это тоже было перечеркнуто в середине 2016 года:
Итак, я думаю, что суть всего этого как со стороны разработчика, так и со стороны веб-разработчиков заключается в том, что
seamless
as-specced, похоже, не то, с чего кто-то хотел начать. Или, по крайней мере, это больше, чем кто-либо действительно хотел. И вообще, как говорит @annevk, его много похоже на то, что он был "преодолен событиями" в свете Shadow DOM.
Другими словами: очистите атрибут seamless
из вашей памяти и притворитесь, что он никогда не существовал.
Для потомков, вот мой первоначальный ответ от пяти лет назад:
В настоящий момент атрибут находится в режиме черновика. По этой причине ни один из существующих браузеров еще не поддерживает его (поскольку реализация может быть изменена). В то же время лучше всего использовать 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.
Надеюсь, что это поможет.:)
В соответствии с последней рекомендацией W3C HTML5 (которая, скорее всего, станет окончательным стандартом HTML5), опубликованной сегодня, нет бесшовного атрибута в элементе iframe. Кажется, что он был удален где-то в процессе стандартизации.
В соответствии с caniuse.com ни один из основных браузеров не поддерживает этот атрибут (больше), поэтому вы, вероятно, не должны его использовать.
Теперь можно использовать безразмерный атрибут, здесь я нашел немецкую статью http://www.solife.cc/blog/html5-iframe-attribut-seamless-beispiele.html
и вот еще одна презентация по этой теме: http://benvinegar.github.com/seamless-talk/
Вы должны использовать метод window.postMessage для связи между родителем и iframe.
Я думал, что это может быть полезно кому-то:
в 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;
}
iO8 имеет удаленную поддержку для атрибута бесшовной iframe.
Полная информация и обзор производительности других изменений iOS 8:
Вам нужно написать
бесшовная
в вашем коде. Нет необходимости:
бесшовные = "бесшовные"
Я сам это понял.
EDIT - это не удаляет полосы прокрутки. Странно
скроллинг = "нет" по-прежнему работает в html5. Я попытался использовать функцию переполнения со встроенным стилем, как рекомендовано html5, но это не работает для меня.
Используйте атрибут frameborder для вашего iframe и установите его в frameborder = "0". Это создает бесшовный вид. Теперь вы, возможно, говорите, что я хочу, чтобы вложенный iframe контролировал, а у меня есть полосы прокрутки. Затем вам нужно взломать файл JavaScript script, который вычисляет высоту минус любые заголовки и устанавливает высоту. Debounce - это плагин javascript, необходимый для обеспечения правильного изменения размера в старых браузерах и иногда хром. Это поможет вам в правильном направлении.
В 2014 году бесшовный iframe не полностью поддерживается всеми основными браузерами, поэтому вы должны искать альтернативное решение.
К январю 2014 года бесшовный iframe по-прежнему не поддерживается для Firefox не IE 11, а поддерживается Chrome, Safari и Opera (версия веб-сайта)
Если вы хотите подробно проверить этот и другие поддерживаемые параметры, тестовый сайт HTML5 будет хорошим вариантом:
http://html5test.com/results/desktop.html
Вы можете проверить разные платформы, в разделе оценки вы можете щелкнуть каждый браузер и посмотреть, что поддерживается, а что нет.
Я не мог найти ничего, что отвечало моим требованиям, но я придумал этот script (зависит от jQuery):
https://gist.github.com/invernizzie/95182de86ea9dc5daa80
Он изменит размер iframe на размер области просмотра (с учетом более широкого контента). Он может использовать улучшение, чтобы использовать высоту видового экрана вместо высоты содержимого, в том случае, если первая больше.