Alternativa aos iFrames com HTML5

Gostaria de saber se existe uma alternativa aos iFrames com HTML5. Quero dizer com isso, ser capaz de injetar HTML entre domínios dentro de uma página da Web sem usar um iFrame.

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).
• AJAX . Como as soluções mostradas aqui provam, você pode usar o 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 .
• Hacks . Poucos mencionados nesta pergunta e pouco confiáveis.

• 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 aprender mais aqui e aqui .

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.

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.