Alternativa aos iFrames com HTML5

196

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.

stemlaur
fonte

Respostas:

96

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 .

Oriol
fonte
3
Os componentes da web em HTML5 são interessantes.
Krishna Srihari
1
Eu sei que este post é um pouco antigo, mas só quero comentar: em referência ao AJAX, "Não é uma idéia porque se baseia em técnicas de script" ... Então, o que há de errado em usar scripts? O AJAX é o líder incontestado dessas escolhas e está rapidamente se tornando o padrão.
nmg49
11
Infelizmente, o HTML Imports é um recurso obsoleto agora. developer.mozilla.org/pt-BR/docs/Web/Web_Components/…
Gman
Alguma nova maneira de conseguir isso?
Walter
Outra desvantagem crucial do iFrames é o fato de que existem muitos sites por aí que definiram 'X-Frame-Options' como 'sameorigin' e simplesmente recusam a conexão. Nesse caso, seu iFrame permanece vazio. Não há como consertar isso.
Igor P.
61

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.

nate
fonte
Obrigado montes, me salvou carregando o sdk para facebook como caixa.
Techagesite
51

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.

Darin Dimitrov
fonte
3
Eu preciso carregar o conteúdo do google. mas o google não pode ser iframed, qual é a alternativa.
8553 Mike
17
@ Mike, a alternativa seria usar a API para o serviço que você gostaria de usar. O Google fornece APIs RESTful para a maioria de seus serviços.
precisa saber é o seguinte
45

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 !!');" />

Abrar Jahin
fonte
4
ambos não ignorar os problemas que tenho com iframes, como as políticas de segurança
SeanMC
3
Lembre-se de que a maioria dos navegadores modernos descontinuou e removeu o suporte para plug-ins de navegador, portanto, confiar no <embed> geralmente não é aconselhável se você deseja que seu site funcione no navegador do usuário comum.
21418 Neeraj
20

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');
?>
L0j1k
fonte
8

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.

Adão
fonte
1
Não é realmente uma resposta, mas certamente umanice-to-know
#
4

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.

CupOfTea696
fonte
4
O carregamento de conteúdo de outros domínios usando XMLHttpRequest é bloqueado pela maioria dos navegadores.
Erik Terenius
4
Op está pedindo entre domínios, esta resposta não é válida.
Teoman shipahi
4

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 .

John Doherty
fonte
0

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.

Mathias Bader
fonte