Альтернатива iFrames с HTML5

Вопрос:

Я хотел бы знать, есть ли альтернатива iFrames с HTML5.
Я имею в виду, что уметь внедрять кросс-домены HTML внутри веб-страницы без использования iFrame.

Ответ №1

В принципе есть четыре способа встраивания HTML в веб-страницу:

<iframe> Содержимое iframe живет полностью в отдельном контексте, чем ваша страница. Несмотря на то, что в основном это отличная функция и она наиболее совместима с версиями браузера, она создает дополнительные проблемы (сжатие, связанное с размером кадра в его содержимом, жестко, безумно расстраивает script в/из, почти невозможно для стиля).
AJAX. Как показали показанные здесь решения, вы можете использовать объект XMLHttpRequest для извлечения данных и ввода их на свою страницу. Это не идеально, потому что это зависит от методов создания сценариев, что делает выполнение медленнее и сложнее, среди прочих drawbacks.
Хаки. Немногие упоминаются в этом вопросе и не очень надежны.
Веб-компоненты HTML5. HTML Imports, часть веб-компонентов, позволяет связывать HTML-документы в других HTML-документах. Это включает HTML, CSS, JavaScript или что-то еще, что может содержать файл .html. Это делает его отличным решением со многими интересными вариантами использования: разделить приложение на компоненты, которые можно распространять как строительные блоки, лучше управлять зависимостями, чтобы избежать избыточности, организации кода и т.д. Вот тривиальный пример:

<!— Resources on other origins must be CORS-enabled. —> <link rel=»import» href=»http://example.com/elements.html»>

Собственная совместимость по-прежнему остается проблемой, но вы можете использовать polyfill, чтобы заставить ее работать в вечнозеленых браузерах.

Здесь вы можете узнать больше и здесь.

Ответ №2

Нет, нет эквивалента. Элемент <iframe> по-прежнему действует в HTML5. В зависимости от того, какое точное взаимодействие вам нужно, могут быть разные API. Например, существует метод postMessage, который позволяет вам взаимодействовать с межоблачным javascript. Но если вы хотите отображать содержимое HTML-содержимого кросс-домена (в стиле CSS и сделанное интерактивным с javascript), iframe остается хорошим способом.

Ответ №3

Вы можете использовать объект и вставлять, например:

Это не ново, но все же работает. Я не уверен, что он имеет ту же функциональность, хотя.

Ответ №4

object – легкая альтернатива в HTML5:

Вы также можете попробовать embed:

Если вы хотите это сделать и управлять сервером, с которого обслуживается базовая страница или контент, вы можете использовать Cross Origin Resource Sharing (http://www.w3.org/TR/access-control/), чтобы разрешить клиент- стороне JavaScript для загрузки данных в <div> через XMLHttpRequest():

// I safely ignore IE 6 and 5 (!) users // because I do not wish to proliferate // broken software that will hurt other // users of the internet, which is what // you’re doing when you write anything // for old version of IE (5/6) xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if(xhr.readyState == 4 && xhr.status == 200) { document.getElementById(‘displayDiv’).innerHTML = xhr.responseText; } }; xhr.open(‘GET’, ‘http://api.google.com/thing?request=data’, true); xhr.send();

Теперь для проверки всей этой операции вам нужно написать код для своего сервера, который предоставит клиентам заголовок Access-Control-Allow-Origin, указав, до каких доменов вы хотите, чтобы клиентский код мог получить доступ через XMLHttpRequest(), Ниже приведен пример кода PHP, который вы можете включить в верхней части страницы, чтобы отправить эти заголовки клиентам:

<?php header(‘Access-Control-Allow-Origin: ‘); header(‘Access-Control-Allow-Origin: ‘); ?> Ответ №6

Это также работает, хотя W3C указывает, что он не предназначен “для внешнего (обычно не HTML) приложения или интерактивного контента”

Дополнительная информация:
http://www.w3.org/wiki/HTML/Elements/embed
http://www.w3schools.com/tags/tag_embed.asp

Ответ №7

IFrame по-прежнему является лучшим способом загрузки междоменного визуального контента. С AJAX вы можете, конечно, загрузить HTML с веб-страницы и вставить его в div (как указывали другие), тем более серьезной проблемой является безопасность. С iframe вы сможете загружать контент кросс-домена, но не сможете манипулировать им, поскольку контент на самом деле не принадлежит вам. С другой стороны, с помощью AJAX вы можете манипулировать любым контентом, который вы можете загрузить, но другой сервер домена должен быть настроен таким образом, чтобы вы могли загрузить его для начала. Много раз у вас не будет доступа к другой конфигурации домена, и даже если вы это сделаете, если вы не выполняете такую конфигурацию все время, это может быть головная боль. В этом случае iframe может быть МНОГО более простой альтернативой.

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

HTML5 больше подходит для внедрения веб-API для получения информации из перекрестных доменов. Обычно веб-API просто возвращают данные, хотя и не HTML.

Ответ №8

Вы можете использовать XMLHttpRequest для загрузки страницы в div (или любой другой элемент вашей страницы). Примерной функцией будет:

Если ваш сервер способен, вы также можете использовать PHP для этого, но поскольку вы запрашиваете метод HTML5, это должно быть все, что вам нужно.

Ответ №9

Я создал модуль node для решения этой проблемы node-iframe-replacement. Вы предоставляете исходный URL-адрес родительского сайта и селектора CSS, чтобы вставлять ваш контент в него, и он объединяет их вместе.

Изменения в родительском сайте собираются каждые 5 минут.

var iframeReplacement = require(‘node-iframe-replacement’); // add iframe replacement to express as middleware (adds res.merge method) app.use(iframeReplacement); // create a regular express route app.get(‘/’, function(req, res){ // respond to this request with our fake-news content embedded within the BBC News home page res.merge(‘fake-news’, { // external url to fetch sourceUrl: ‘http://www.bbc.co.uk/news’, // css selector to inject our content into sourcePlaceholder: ‘div[data-entityid=»container-top-stories#1″]’, // pass a function here to intercept the source html prior to merging transform: null }); });

Источник содержит рабочий пример для ввода содержимого в BBC News.

Ответ №10

вы можете использовать тег объекта. Это также работает

Ответ №11

Несмотря на то, что нет какой-либо идеальной замены, я работал над чем-то, она строилась без проблем, и я рад сказать, что она работает (спасибо junkfoodjunkie)

В основном, моя текущая система использует некоторые базовые компиляции php/server для загрузки, а затем сохраняет файл на сервере, я только что начал проект сегодня, так что загружается только основной файл (например, index.html). Я буду работать, чтобы загрузить 50 ссылок на страницу со страницы, чтобы помочь с ее поддержкой. Если вы хотите проверить его:
он размещен здесь. Использовать это легко, просто загрузите URL и добавьте свою страницу в конец. не нужно добавлять https или www. Это также вызовет проблемы, если вы это сделаете:) В любом случае, если вы последуете этому, скопированная страница будет найдена по адресу integmedia.ml/get/gettmp/YOURURL.html.
Вот пример:

integratedmedia.ml/get/?link=google.com

загруженный файл теперь находится в

integratedmedia.ml/get/gettmp/google.com.html

Ответ №12<object data=»https://blogs.claritycon.com/blog/2016/03/bower-packages-asp-net-core-1-0/» width=»400″ height=»300″ type=»text/html»> Alternative Content </object>