Альтернатива 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

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

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

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

Ответ 4

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>

Ответ 5

Если вы хотите это сделать и управлять сервером, с которого обслуживается базовая страница или контент, вы можете использовать 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');
?>

Ответ 6

Это также работает, хотя 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

Ответ 7

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

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

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

Ответ 8

Вы можете использовать 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, это должно быть все, что вам нужно.

Ответ 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 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

Ответ 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>