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





js mdn (11)


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

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




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




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




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




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



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

В основном, моя текущая система использует некоторые базовые php / серверные комбо для загрузки, а затем сохраняет файл на сервере, я только что начал проект сегодня, так что загружается только основной файл (например, 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




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

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

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




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

<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 способа встраивания HTML в веб-страницу:

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

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




Этот короткий и чистый код:

::-webkit-input-placeholder {color: red;}
:-moz-placeholder           {color: red; /* For Firefox 18- */}
::-moz-placeholder          {color: red; /* For Firefox 19+ */}
:-ms-input-placeholder      {color: red;}




html5 iframe