Carregar uma div de uma página de servidor externo

1,457 views
Skip to first unread message

Davi Duarte

unread,
Jul 7, 2011, 2:47:14 PM7/7/11
to js.pro
Saudações ao grupo js.pro!

Parabéns ao Luciano Ramalho pela iniciativa de criar um grupo de
discussão de JavaScript, levando o JavaScript a sério, como em sua
palestra na FISL que pude acompanhar.

Bom, estou com um probleminha aqui, tenho dois sites: um de uma
conferencia em PHP e outro o site institucional em Plone. E preciso
colocar parte do site da conferencia dentro de uma página do outro
site em Plone.

Isso fiz facilmente com iframe, mas com o iframe ele me abre o site
inteiro dentro da página, com logo, rodapé e tudo, mas eu só quero
abrir a parte do conteúdo do site, que no caso é a div id="main".

Estava pesquisando e com Ajax não vai ser possível pois por questões
de segurança o JavaScript só funciona dentro do mesmo servidor.

Vi em alguns sites o pessoal fazendo algo assim:

JS:
$("#div").html($("#iframe").contents().find("#alvo").text());

HTML:
<iframe id="iframe"></iframe>
<div id="div"></div>

Ou então tentando jogar o conteúdo do iframe em uma div:

<script type="text/javascript">
function mostra_conteudo() {
var valores =
document.getElementById('valor').contentWindow.document.body.innerHTML;
document.getElementById('div').innerHTML = valores;
}
</script>

<body onload=mostra_conteudo()>

<div id="div"></div>

<iframe src="paginaiframe.html" id="valor"></iframe>

Mas não aqui não foi, acho que pela limitação do JavaScript ao
servidor.

Alguém sabe algum hack ou alguma forma de carregar parte de uma página
de um site em outro?

Obrigado,

Davi Duarte.

Davi Lima

unread,
Jul 7, 2011, 3:01:52 PM7/7/11
to js...@googlegroups.com
Corrijam-me os mais experientes, mas creio que você poderia fazer um HTML dentro do servidor PHP que faça esse carregamento Javascript somente do div desejado. Em seguida você apontaria o iframe para esse novo HTML.

Caso não funcione, uma alternativa seria utilizar o software Diazo para fazer a integração do layout de múltiplos servidores, através de transformações XSLT operadas por meio de um middleware WSGI (compatível com Apache, Nginx, Varnish etc). Documentação em: www.diazo.org

[]s
Davi Lima

Paulo Fernandes

unread,
Jul 7, 2011, 3:01:30 PM7/7/11
to js...@googlegroups.com
Já tentou isso: 

 jQuery("#content").load("pagina.html"); 

Iuri Andrei Guntchnigg

unread,
Jul 7, 2011, 5:09:24 PM7/7/11
to js...@googlegroups.com
Bem, uma solução, não muito elegante, seria
dar um display-'none' nos outros elementos do teu iframe, deixando apenas a div "main".

o Unico problema que tu ainda carregaria todo do conteudo do outro site.

Abraço!

Davi Duarte

unread,
Jul 7, 2011, 5:58:30 PM7/7/11
to js.pro
Olá,

Davi Lima, obrigado pela sugestão de criar um link somente com a div
que quero carregar do outro site, não tinha pensado nisso. A questão
do Diazzo também é interessante, aqui pretendemos utilizar o Diazo
para facilitar a customização do layout do Plone e ir migrando para o
padrão WSGI que o Plone 5 vai adotar como padrão.

Paulo, valeu pela ajuda, mas como eu disse acima o JavaScript não pode
acessar outro servidor por questões de segurança, o método load() do
jQuery só funciona em páginas internas.

Achei um outro modo de fazer o carregamento da pagina via AJAX com YQL
e JSON, mas não funciona do modo que quero, ele vem sem stilo e os
links abrem no site de origem.

Link: http://icant.co.uk/articles/crossdomain-ajax-with-jquery/

Abraços,

Davi Duarte.

Davi Lima

unread,
Jul 7, 2011, 6:12:36 PM7/7/11
to js...@googlegroups.com
O legal do Diazo é a flexibilidade, você pode jogar o conteúdo do Terra dentro do layout do UOL, on-the-fly, é um conceito bem poderoso.

[]s
Davi Lima

Luciano Ramalho

unread,
Jul 8, 2011, 10:31:09 AM7/8/11
to js.pro
On Jul 7, 3:47 pm, Davi Duarte <davifdua...@gmail.com> wrote:
> Parabéns ao Luciano Ramalho pela iniciativa de criar um grupo de
> discussão de JavaScript, levando o JavaScript a sério, como em sua
> palestra na FISL que pude acompanhar.

Opa, seja muito bem vindo, Davi! O importante é que uma comunidade não
se faz só com uma pessoa. Eu apenas criei essa lista depois de
pesquisar muito e descobrir que as pessoas sentiam falta de um lugar
assim para trocar idéias sobre JavaScript com maior profundidade.

> Bom, estou com um probleminha aqui, tenho dois sites: um de uma
> conferencia em PHP e outro o site institucional em Plone. E preciso
> colocar parte do site da conferencia dentro de uma página do outro
> site em Plone.
>
> Isso fiz facilmente com iframe, mas com o iframe ele me abre o site
> inteiro dentro da página, com logo, rodapé e tudo, mas eu só quero
> abrir a parte do conteúdo do site, que no caso é a div id="main".
>
> Estava pesquisando e com Ajax não vai ser possível pois por questões
> de segurança o JavaScript só funciona dentro do mesmo servidor.

Eu sou um programador server-side, estou nas horas vagas aprendendo
client-side então não tenho uma resposta pronta mas apenas uma
sugestão: JSONP [1][2] é uma técnica para superar essa limitação do
JavaScript ao mesmo servidor (a chamada "same origing policy", ou
"regra da mesma origem").

[1] http://en.wikipedia.org/wiki/JSONP
[2] http://afronteirafinal.com/jsonp-e-o-ajax-crossdomain/

[ ]s
Luciano
Reply all
Reply to author
Forward
0 new messages