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

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

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

• <iframe>Содержимое iframe полностью находится в отдельном контексте, чем ваша страница. Хотя это в основном отличная функция и она наиболее совместима между версиями браузера, она создает дополнительные проблемы (сжатие размера фрейма для его содержимого является сложным, безумно неприятным для сценария в / из, почти невозможно стилизовать).
• AJAX . Как показывают решения, показанные здесь, вы можете использовать XMLHttpRequestобъект для извлечения данных и внедрения их на свою страницу. Это не идеально, потому что это зависит от методов написания сценариев, что делает выполнение медленнее и сложнее среди других недостатков .
• Хаки . Мало кто упоминается в этом вопросе и не очень надежно.

• 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, чтобы она работала в вечнозеленых браузерах .

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

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

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

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

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

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 onerror="alert('URL invalid !!');" />

Если вы хотите сделать это и контролировать сервер, с которого обслуживается базовая страница или контент, вы можете использовать Cross Origin Resource Sharing ( http://www.w3.org/TR/access-control/ ), чтобы разрешить клиенту боковой JavaScript для загрузки данных в <div>via 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 (как уже упоминали другие), однако большая проблема заключается в безопасности. С помощью iframes вы сможете загружать междоменный контент, но не сможете манипулировать им, поскольку контент на самом деле не принадлежит вам. С другой стороны, с AJAX вы, безусловно, можете манипулировать любым контентом, который вы можете загрузить, но сервер другого домена должен быть настроен таким образом, чтобы вы могли начать его загрузку. Много раз у вас не будет доступа к конфигурации другого домена, и даже если вы сделаете это, если вы не выполняете такую ​​конфигурацию постоянно, это может быть головной болью. В этом случае iframe может быть намного более простой альтернативой.

Как уже упоминали другие, вы также можете использовать тег embed и тег object, но он не обязательно более продвинутый или более новый, чем 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, это должно быть все, что вам нужно.

Я создал модуль узла, чтобы решить эту проблему замена узла iframe . Вы предоставляете исходный 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 .

Вы должны взглянуть на JSON-P - это было идеальное решение для меня, когда у меня была такая проблема:

https://en.wikipedia.org/wiki/JSONP

Вы в основном определяете файл javascript, который загружает все ваши данные, и другой файл javascript, который обрабатывает и отображает его. Это избавляет от уродливой полосы прокрутки в фреймах.