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

Question

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

Answer 1

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

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

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

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

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

Вы также можете попробовать 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 !!');" />

Answer 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();

Теперь для lynchpin всей этой операции вам нужно написать код для вашего сервера, который даст клиентам заголовок 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 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

Answer 7

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

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

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

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

Answer 9

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

Answer 10

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

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

integratedmedia.ml / получить /? Ссылка = google.com

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

integratedmedia.ml / прибудете / gettmp / google.com.html