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

В принципе есть четыре способа встраивания 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, чтобы заставить ее работать в вечнозеленых браузерах.

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

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

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

<object data="http://www.web-source.net" width="600" height="400">
    <embed src="http://www.web-source.net" width="600" height="400"> </embed>
    Error: Embedded data could not be displayed.
</object>

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

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

<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>

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

<embed src="https://blogs.claritycon.com/blog/2016/03/bower-packages-asp-net-core-1-0/" width=200 height=200 />

Если вы хотите это сделать и управлять сервером, с которого обслуживается базовая страница или контент, вы можете использовать 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: http://api.google.com');
  header('Access-Control-Allow-Origin: http://some.example.com');
?>

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

<embed src="http://www.somesite.com" width=200 height=200 />

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

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

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

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

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

function loadPage(){
if (window.XMLHttpRequest){
    // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
}else{
    // code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

xmlhttp.onreadystatechange=function(){
    if (xmlhttp.readyState==4 && xmlhttp.status==200){
        document.getElementById("ID OF ELEMENT YOU WANT TO LOAD PAGE IN").innerHTML=xmlhttp.responseText;
    }
}

xmlhttp.open("POST","WEBPAGE YOU WANT TO LOAD",true);
xmlhttp.send();
}

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

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

Я создал модуль 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.

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

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

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

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

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