Respostas:
Basicamente, existem 4 maneiras de incorporar HTML em uma página da web:
<iframe>O conteúdo de um iframe vive inteiramente em um contexto separado da sua página. Embora esse seja um ótimo recurso e o mais compatível entre as versões de navegadores, ele cria desafios adicionais (encolher o tamanho do quadro ao seu conteúdo é difícil, é incrivelmente frustrante fazer o script entrar / sair, quase impossível de estilizar).XMLHttpRequestobjeto para recuperar dados e injetar na sua página. Não é ideal, pois depende de técnicas de script, tornando a execução mais lenta e complexa, entre outras desvantagens .Componentes da Web HTML5 . As importações de HTML, parte dos Componentes da Web, permitem agrupar documentos HTML em outros documentos HTML. Isso inclui HTML, CSS, JavaScriptou qualquer outra coisa de um .htmlarquivo pode conter. Isso a torna uma ótima solução com muitos casos de uso interessantes: divida um aplicativo em componentes agrupados que você pode distribuir como blocos de construção, gerencie melhor as dependências para evitar redundância, organização de código etc. Aqui está um exemplo trivial:
<!-- Resources on other origins must be CORS-enabled. -->
<link rel="import" href="http://example.com/elements.html">A compatibilidade nativa ainda é um problema, mas você pode usar um polyfill para fazê-lo funcionar em navegadores sempre verdes hoje.
Você pode usar o objeto e incorporar, assim:
<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>O que não é novo, mas ainda funciona. Não tenho certeza se ele tem a mesma funcionalidade.
Não, não há equivalente. O <iframe>elemento ainda é válido em HTML5. Dependendo da interação exata necessária, pode haver APIs diferentes. Por exemplo, existe o postMessagemétodo que permite obter interação javascript entre domínios. Mas se você deseja exibir o conteúdo HTML entre domínios (estilizado com CSS e tornado interativo com javascript) iframepermanece como uma boa maneira de fazer.
object é uma alternativa fácil em 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>Você também pode tentar 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 !!');" />Se você quiser fazer isso e controlar o servidor a partir do qual a página ou o conteúdo base está sendo veiculado, poderá usar o Compartilhamento de recursos entre origens ( http://www.w3.org/TR/access-control/ ) para permitir que os clientes lado JavaScript para carregar dados em uma <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();Agora, para o pino central de toda essa operação, você precisa escrever um código para o servidor que fornecerá aos clientes o Access-Control-Allow-Origincabeçalho, especificando quais domínios você deseja que o código do lado do cliente possa acessar via XMLHttpRequest(). A seguir, é apresentado um exemplo de código PHP que você pode incluir na parte superior da sua página para enviar esses cabeçalhos aos clientes:
<?php
header('Access-Control-Allow-Origin: http://api.google.com');
header('Access-Control-Allow-Origin: http://some.example.com');
?>Isso também parece funcionar, embora o W3C especifique que não se destina "a um aplicativo externo (normalmente não HTML) ou a um conteúdo interativo"
<embed src="http://www.somesite.com" width=200 height=200 />Mais informações: http://www.w3.org/wiki/HTML/Elements/embed http://www.w3schools.com/tags/tag_embed.asp
Um iframe ainda é a melhor maneira de baixar conteúdo visual entre domínios. Com o AJAX, você certamente pode baixar o HTML de uma página da Web e colá-lo em uma div (como outros já mencionaram), mas o maior problema é a segurança. Com iframes, você poderá carregar o conteúdo entre domínios, mas não poderá manipulá-lo, pois o conteúdo realmente não pertence a você. Por outro lado, com o AJAX, você certamente pode manipular qualquer conteúdo que possa baixar, mas o servidor do outro domínio precisa ser configurado de forma a permitir que você faça o download para começar. Muitas vezes você não terá acesso à configuração do outro domínio e, mesmo que tenha, a menos que faça esse tipo de configuração o tempo todo, pode ser uma dor de cabeça. Nesse caso, o iframe pode ser a alternativa MUITO mais fácil.
Como já mencionado, você também pode usar a tag embed e a tag object, mas isso não é necessariamente mais avançado ou mais novo que o iframe.
O HTML5 foi mais no sentido de adotar APIs da Web para obter informações de domínios cruzados. Normalmente, as APIs da Web retornam dados e não HTML.
nice-to-know
Você pode usar um XMLHttpRequest para carregar uma página em uma div (ou qualquer outro elemento da sua página). Uma função exemplar seria:
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();
}Se o seu servidor for capaz, você também pode usar o PHP para fazer isso, mas como você está solicitando um método HTML5, isso deve ser tudo o que você precisa.
Eu criei um módulo de nó para resolver esse problema node-iframe-Replacement . Você fornece o URL de origem do site pai e o seletor de CSS para injetar seu conteúdo e ele mescla os dois.
As alterações no site pai são captadas a cada 5 minutos.
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
});
});A fonte contém um exemplo de como injetar conteúdo na home page da BBC News .
Você deveria dar uma olhada no JSON-P - essa foi uma solução perfeita para mim quando tive esse problema:
https://en.wikipedia.org/wiki/JSONP
Você basicamente define um arquivo javascript que carrega todos os seus dados e outro arquivo javascript que os processa e exibe. Isso se livra da barra de rolagem feia dos iframes.