Відповіді:
В основному є 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">
Власна сумісність все ще залишається проблемою, але ви можете використовувати полі- заливку, щоб змусити її працювати у вічнозелених браузерах сьогодні.
Ви можете використовувати об'єкт та вставляти, наприклад:
<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 !!');" />Якщо ви хочете це зробити та керувати сервером, з якого подається базова сторінка або вміст, ви можете використовувати спільний ресурс спільного доступу ( 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');
?>Це також, здається, працює, хоча 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
Іфрейм все ще є найкращим способом завантаження міждоменного візуального контенту. За допомогою AJAX ви, безумовно, можете завантажити HTML з веб-сторінки та вставити його у розділ (як уже згадували інші), проте більша проблема - безпека. За допомогою iframes ви зможете завантажити міждоменний вміст, але не зможете ним маніпулювати, оскільки вміст насправді не належить вам. З іншого боку, за допомогою AJAX ви, безумовно, можете маніпулювати будь-яким вмістом, який ви можете завантажити, але сервер іншого домену повинен бути налаштований таким чином, що дозволить вам завантажити його для початку. Багато разів у вас не буде доступу до конфігурації іншого домену, і навіть якщо ви це робите, якщо ви не робите таку конфігурацію весь час, це може бути головним болем. У такому випадку iframe може бути НАЙмно простішою альтернативою.
Як уже згадували інші, ви також можете використовувати тег вбудовування та тег об'єкта, але це не обов'язково більш досконало чи новіше, ніж рамка 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, який обробляє та відображає їх. Це позбавляється від потворної смуги прокрутки кадрів.