Ответы:
В основном есть 4 способа встраивания HTML в веб-страницу:
<iframe>Содержимое iframe полностью находится в отдельном контексте, чем ваша страница. Хотя это в основном отличная функция и она наиболее совместима между версиями браузера, она создает дополнительные проблемы (сжатие размера фрейма для его содержимого является сложным, безумно неприятным для сценария в / из, почти невозможно стилизовать).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.
nice-to-know
Вы можете использовать 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, который обрабатывает и отображает его. Это избавляет от уродливой полосы прокрутки в фреймах.