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

Question

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

Answer 1

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

Answer 2

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

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

Который не является новой, но по-прежнему работает. Я не уверен, что у него есть такая же функциональность.

Answer 3

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

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

Answer 4

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

Answer 5

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

Answer 6

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

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

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

Answer 7

В основном есть 4 способа встроить HTML в веб-страницы: содержание

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

• Веб-компоненты 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"> 
  

Native compatibility все еще проблема, но вы можете использовать polyfill, чтобы заставить его работать в evergreen browsers Сегодня.

Вы можете найти больше here и here.

Answer 8

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

Answer 9

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

В принципе, моя текущая система использует некоторые базовые php/server combo для загрузки, а затем сохраните файл на сервере, я только что запустил проект, поэтому загружается только основной файл (например, index.html). Я буду работать, чтобы загрузить 50 ссылок на страницу со страницы, чтобы помочь с ее поддержкой. Если вы хотите проверить его: размещено here. Использовать его легко, просто загрузите 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

Answer 10

Я создал модуль узла для решения этой проблемы 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 
    }); 
}); 

Источник содержит working example инъекционного контента в BBC News домашней странице.

Answer 11

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

Answer 12

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