Carregar arquivo html remoto e manipular via jquery

André de Castro

unread,

Jan 3, 2012, 7:43:17 AM1/3/12

to javascr...@googlegroups.com

Olá novamente,

Estou tentando usar jquery para carregar um arquivo remoto, uma página html.

Minha dúvida é:

como eu faço para usar o jquery nessa nova página?

Exemplo:

html = $.get('url_da_pagina.html');

A partir daí, pegar um elemento desta página carregada, como por exemplo, um elemento com id: $.("id_elemento")

Alguma ideia?

Abraços,

--
André de Castro

Tanure

unread,

Jan 3, 2012, 8:42:24 AM1/3/12

to javascr...@googlegroups.com

$('#elentoondevaiinserir').load('teste.html #seuelemento');)

2012/1/3 André de Castro <aocb...@gmail.com>

--

Luiz Tanure

472f5a3aedb906cb767acdbdeaca6d8f

André de Castro

unread,

Jan 3, 2012, 8:53:06 AM1/3/12

to javascr...@googlegroups.com

Obrigado! Já deu uma luz..

Mas da maneira que eu descrevi é possível?

Pois nem sempre queremos alcançar um elemento devidamente identificado.

Por exemplo, se quisermos alcançar uma tag <a> e seu atributo href.

Ou seja, se quisermos agregar o código html pra ser manipulado pela jquery.

Espero ter sido claro!

Abraços

2012/1/3 Tanure <leta...@gmail.com>

--
André de Castro

Suissa

unread,

Jan 3, 2012, 8:59:49 AM1/3/12

to javascr...@googlegroups.com

Para mim ainda não foi, mas veja bem que vc pegará uma pagina inteira e jogará em outra, ou seja, cudiado para não colocar nessa página que está pegando as tags de html, head, body; pois elas já existirão.

Jean C. Nascimento aka Suissa
WebDeveloper Sênior - SP

http://about.me/suissa

André de Castro

unread,

Jan 3, 2012, 11:51:37 AM1/3/12

to javascr...@googlegroups.com

Então,a ideia é pegar os dados de uma página remota,usando o jquery pra acessar elementos específicos. Não necessariamente vou precisar colocar o código em uma página formatada em html, entende?

O que queria era carregar a página remota e acessar seus elementos através do jquery.

2012/1/3 Suissa <jnasc...@gmail.com>

--
André de Castro

Suissa

unread,

Jan 3, 2012, 12:12:37 PM1/3/12

to javascr...@googlegroups.com

Provavelmente vc tera que fazer um parser(find do elemento) dentro da funcao de sucess do seu ajax. Essa pagina eh de dominio diferente?

André de Castro

unread,

Jan 3, 2012, 12:26:40 PM1/3/12

to javascr...@googlegroups.com

Sim..

E como seria feito esse feito?

Obrigado!

2012/1/3 Suissa <jnasc...@gmail.com>

--
André de Castro

André de Castro

unread,

Jan 3, 2012, 12:26:52 PM1/3/12

to javascr...@googlegroups.com

*esse parser

--
André de Castro

Bruno Azevedo

unread,

Jan 3, 2012, 1:47:08 PM1/3/12

to javascr...@googlegroups.com

em cima do exemplo do Tanure, vc vai usar os seletores de acordo com sua necessidade.

$('#elentoondevaiinserir').load('teste.html #id')) ;

$('#elentoondevaiinserir').load('teste.html .classe')) ;

$('#elentoondevaiinserir').load('teste.html tag#id tag')) ;

$('#elentoondevaiinserir').load('teste.html [pesquise sobre seletores]')) ;

eu uso $.ajax(...).

pra usar uma coleção de elementos, vc após o load, vai trabalhar um .each() do elemento.

eu faria algo do tipo.

selecionando pela tag

$.ajax({
  url: "test.html",
  dataType: "html",
  success: function(dados){
    $(dados, 'div').each(function(){
        $('#destino').append($(this).html());
    });
  }
});

Att

Bruno Azevedo - Developer

( +55 (21) xxxx-4066

( +55 (21) xxxx-0092

&www : Web Site
&blog: Blog de Desenvolvimento

Hospedagem 10% desconto por 83 anos

http://bit.ly/kinghost10

Google Apps Gratis Personalizável (Empresas até 50 contas de email)

http://bit.ly/gappsgratis

Incêndio ?

Numero de Emergência dos bombeiros : 193

[ Imprima Avontade - A Natureza aguenta um pouco mais. ]

André de Castro

unread,

Jan 8, 2012, 8:45:35 AM1/8/12

to javascr...@googlegroups.com

Entao, cada vez que precisasse acessar um elemento teria que carregar novamente a pagina de outro dominio.

No meu caso acessaria muitos elementos da pagina, ou seja, o que estou tentando é carregar de uma só vez o código html remoto e usar o jquery como se estivesse local.

2012/1/3 Bruno Azevedo <developer.b...@gmail.com>

--
André de Castro

Bruno Azevedo

unread,

Jan 9, 2012, 8:58:35 AM1/9/12

to javascr...@googlegroups.com

carrega para uma variavel visivel no ambiente.

...

var htmlDados;

$(document).ready(function(){

if(htmlDados==undefined) {

$.ajax({

url : "test.html",

dataType: "html" ,

success : function(dados){

htmlDados = dados;

}

});

}

});

$.fn.GetExternalElement = function(_selectorFrom, _selectorTo){

$(_selectorTo).html( $(_selectorFrom, htmlDados).html() );

// e/ou

$(_selectorTo).append( $(_selectorFrom, htmlDados).text() );

// e/ou

$(_selectorTo).attr('atributo', $(_selectorFrom, htmlDados).attr('atributo') );

}

...

Assim faz um preload, ou pode quando necessario alimentar sua instancia da pagina desejada, dentro da funcao, isso é um mero exemplo, agora use a criatividade.

Carlos Roberto Gomes Junior

unread,

Jan 9, 2012, 1:44:03 PM1/9/12

to javascr...@googlegroups.com

Tente algo assim:

$.get('pagina.html', function(data) {

var fragment = $(data);

// fragment vai ser o context

$('selertor', fragment)

});

--
Carlos Roberto Gomes Junior
-------------------------------------------
:::Front/Back-End Developer
:::carlos...@gmail.com
:::http://appzen.org

André de Castro

unread,

Jan 9, 2012, 1:50:19 PM1/9/12

to javascr...@googlegroups.com

Legal, obrigado pelas respostas.

Vou tentar assim que possível e publico os resultados aqui.

Abs!

2012/1/9 Carlos Roberto Gomes Junior <carlos...@gmail.com>

--
André de Castro

Suissa

unread,

Jan 12, 2012, 11:07:56 AM1/12/12

to javascr...@googlegroups.com

Conseguiu?

André de Castro

unread,

Jan 13, 2012, 2:01:07 PM1/13/12

to javascr...@googlegroups.com

Ainda nao consegui fazer funcionar.

Preciso ir um pouco mais fundo no assunto!

2012/1/12 Suissa <jnasc...@gmail.com>

--
André de Castro

1AE.png

Bruno Azevedo

unread,

Jan 14, 2012, 8:47:40 AM1/14/12

to javascr...@googlegroups.com

André, acessa o link http://jsbin.com cria um exemplo mais proximo da sua duvida e compartilha, entao podemos ajudar melhor!

Abs

1AE.png

SAULO

unread,

Jan 15, 2012, 1:52:44 PM1/15/12

to javascript brasil

o método load aceita um 2o param, que é um callback que é executado
logo após o carregamento do arquivo externo.

$('#algum-seletor').load('algum-arquivo.html .algum-outro-seletor',
function(){

$('algum-outro-seletor q so vai ser possível achar os elementos
depois que o "algum-arquivo.html" for carregado e seu conteudo setado
dentro de #algum-seletor');

//aqui dentro os elementos carregados da outra página podem ser
acessados normalmente
//http://api.jquery.com/load/
});

Bruno Azevedo

unread,

Jan 15, 2012, 9:42:33 PM1/15/12

to javascr...@googlegroups.com

Perfeito Saulo, porém isso ja fora explicado de varias maneiras. o caso agora é saber onde nosso amigo está com problemas para ajudarmos melhor.

de qualquer forma obrigado por compartilhar.

Abs

André de Castro

unread,

Jan 16, 2012, 6:24:27 AM1/16/12

to javascr...@googlegroups.com

Aparentemente não é possível fazer isso. =/

A página remota precisa estar no mesmo servidor, ou usar um proxy..

Mas obrigado pela ajuda de qualquer maneira!

Vou procurar ver alguma outra solução no lado do servidor.

2012/1/16 Bruno Azevedo <developer.b...@gmail.com>

--
André de Castro

Bruno Azevedo

unread,

Jan 16, 2012, 9:16:21 AM1/16/12

to javascr...@googlegroups.com

A sim Andre, precisa de um proxy ou estar no mesmo server. resolvi isso com PHP, se quiser te passo o fonte. a solução é simples, porem um pouco limitada, mas para o que eu precisei resolveu.

Abs

André de Castro

unread,

Jan 16, 2012, 12:48:12 PM1/16/12

to javascr...@googlegroups.com

Sim claro!

PHP me serve

Obrigado!

2012/1/16 Bruno Azevedo <developer.b...@gmail.com>

--
André de Castro

328.png

Bruno Azevedo

unread,

Jan 16, 2012, 1:28:41 PM1/16/12

to javascr...@googlegroups.com

segue o fonte de proxy.php

<?php

$url = $_GET['url'];

$ch = curl_init();

curl_setopt($ch, CURLOPT_URL , $url);

curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);

$output = curl_exec($ch);

curl_close($ch);

echo $output;

?>

Espero que ajude. resumi o que tenho em uso, se por acado não funcionar, te reenvio o completo. como pode ver, vc usa passando o parametro proxy.php?url=http://servidor.com.br blablabla

Então, vc vai chamar no seu javascript esse proxy.php, passando como parametro a url que deseja capturar dados, e trabalhando normalmente como se o mesmo estivesse no seu dominio.

328.png

Leandro Camargo

unread,

Jan 16, 2012, 1:34:54 PM1/16/12

to javascr...@googlegroups.com

Se você usar o $.get (http://api.jquery.com/jQuery.get/) com URL completa, ele lidará com cross-domain numa boa (realizando request sem ser via XHR). Acredito que o load() não tenha essa mesma facilidade, por isso informar uma URL completa para ele não funcionaria da mesma forma.

Dessa forma você não precisaria de um nenhum proxy no back-end.

2012/1/16 Bruno Azevedo <developer.b...@gmail.com>

Bruno Azevedo

unread,

Jan 16, 2012, 1:37:09 PM1/16/12

to javascr...@googlegroups.com

Leandro, vou testar de sua forma, obrigado por compartilhar!

Leandro

unread,

Jan 18, 2012, 6:23:25 PM1/18/12

to javascript brasil

Deu certo? Cross-domain é algo muito facilmente solucionável sem
precisar de ajuda no server side. Basta requisitar <script>s. É o que
o $.get faz por de baixo dos panos, ou se quiser ser mais explicito,
pode usar o $.getScript.

On 16 jan, 16:37, Bruno Azevedo <developer.brunoazev...@gmail.com>
wrote:

André de Castro

unread,

Jan 19, 2012, 6:10:36 AM1/19/12

to javascr...@googlegroups.com

Vc sabe explicar a diferenca entre os dois? Fiquei curioso...

E como faria pra usar o jquery no contexto da página carregada com o $.get?

Descobri o nome do que queria em primeiro lugar... "html/site scraping".. demorei pra achar a definição..

Vi soluções em php, e principalmente em ruby. Mas ainda levo fé no javascript..

2012/1/18 Leandro <leand...@gmail.com>

--
André de Castro

Leandro Camargo

unread,

Jan 20, 2012, 7:31:04 AM1/20/12

to javascr...@googlegroups.com

Caro, André, me desculpe pela demora.
Eu estava prestes a lhe enviar isso daqui abaixo:

========================================
Desculpe a demora. Basicamente a diferença entre os dois é que um
($.get) faz requests ajax do tipo get de forma genérica e o
$.getScript faz a requisição de forma mais direcionada, onde ele faz
um requisição "ajax" esperando uma resposta cujo corpo seja código de
JS, pois ele irá tentar interpretar/executar essa resposta.

Na verdade, qualquer método que você decidir usar (get, getScript,
ajax), com exceção do $.post e do $.load, creio eu, ele
automaticamente lidará com cross-domain requests de forma transparente
para você.

Aqui, http://api.jquery.com/jQuery.ajax/, você conseguirá ver o
parâmetro crossDomain (existente a partir do jQuery 1.5) e como ele
funciona.

Se você olhar o source do jQuery, verá que o código do getScript, na
verdade, chama o $.get no final das contas.

Então, resumindo:

1) Você quer carregar um conteúdo no formato HTML de outro domínio
diretamente pra dentro de um elemento seu no seu documento.
2) Para isso, você pode usar o próprio $.get e jogar o conteúdo
retornado dentro do elemento pretendido via as callbacks padrões do
$.get.
3) Se você informar sua URL completa (com http://) no $.get e essa URL
tiver um domínio diferente da página que está executando o JS, ele
automaticamente lidará a requisição como cross-domain.

Espero que tenha esclarecido suas dúvidas.
========================================

Mas quando fui testar e ver isso na prática, percebi que o problema do
cross-domain persistia:
http://jsbin.com/idanat/4

Logo, há algumas soluções alternativas:

1) Server-side proxying;
2) iframes (ew);
3) Isso daqui http://www.ajax-cross-domain.com/#Examples;
4) Google: cross domain ajax

2012/1/19 André de Castro <aocb...@gmail.com>:

André de Castro

unread,

Mar 9, 2012, 2:40:54 PM3/9/12

to javascr...@googlegroups.com

pessoal, desculpe a demora na resposta, nao tive mais tempo habil de tocar isso..até agora =)

a abordagem que funcionou melhor até agora foi a do saulo.

$('algum-outro-seletor q so vai ser possível achar os elementos
depois que o "algum-arquivo.html" for carregado e seu conteudo setado
dentro de #algum-seletor');

era quase exatamente o que eu queria fazer, eu queria ter a liberdade de tratar os elementos vindos da pagina nova como se fossem os proprios elementos da pagina que a está carregando, ou seja, sem precisar ficar preso ao acessar e tratar todos elementos dentro de uma callback.

2012/1/20 Leandro Camargo <leand...@gmail.com>

--
André de Castro

André de Castro

unread,

Mar 13, 2012, 1:20:32 PM3/13/12

to javascr...@googlegroups.com

mais um comentário que penso ser pertinente.

ao se obter o código externo de uma pagina ou um arquivo xml a partir dos métodos citados, nao me permite fazer um "debug" no resultado.

exemplo:

quando eu executo uma requisição get no jquery, ele retorna o documento apropriadamente, mas se eu quero ver o resultado no código fonte da página alterada pelo jquery, não é possível. O código provido pelo navegador é simplesmente o mesmo daquele antes de aplicar qualquer alteração via jquery.

agradeço desde toda a ajuda!

um abraço

2012/3/9 André de Castro <aocb...@gmail.com>

--
André de Castro

André de Castro

unread,

Mar 18, 2012, 2:58:31 PM3/18/12

to javascr...@googlegroups.com

Oi pessoal,

Até o momento tava tudo funcionando perfeitamente..
A seguinte parte do código não consigo resolver, queria uma ajuda pois nao consigo achar uma alternativa que funcione..
A linha problematica esta indicada:

    for(level = 0 ; level < rows ; level++){

        trow = $("<tr id='row" + i + "'>");

        for(j=0;j<cols;j++){

            qst = categories[j][level][0];

            tcell = $("<td id='cell" + level + "" + j + "' >").html((level+1)*10);
            tcell.bind('click',function(){
                $.facebox("TESTEFB",'cell'); // <<<------- TESTEFB string exibida no facebox e 'cell' a classe css que define as dimensões da facebox
            });
            trow.append(tcell);
        }
        $('body').append(trow);
    }

O programa le o arquivo xml legal, mas eu quero fazer um bind pra agregar um atributo onclick a cada uma das celulas da tabela e assim executar o script facebox exibindo um texto especifico pra cada celula.
Pois bem, quando eu tento indicar um texto dinamico, carregando a variavel qst que guarda todas as strings do xml, o resultado no final é que todas as células da tabela exibem o mesmo conteúdo da última célula da tabela, ou seja, é como se todas fizessem referencia ao mesmo valor armazenado pela última vez na variável qst.

E se eu faço referencia direto ao array que guarda cada string, um erro é retornado avisando que categories[j][level][0] não está definido.

Agradeço desde já qualquer ajuda ou alternativa...

Abraços,

2012/3/13 André de Castro <aocb...@gmail.com>

--
André de Castro

André de Castro

unread,

Mar 18, 2012, 3:21:23 PM3/18/12

to javascr...@googlegroups.com

consegui um workaround mas nao acho que seja a melhor maneira:

tcell = $("<td id='cell" + level + "" + j + "' onClick='$.facebox(\""+qst+"\",\"cell\")'>");

fica ainda a duvida de porque todas as celulas, da outra maneira, apontam pro ultimo valor da variavel qst...

abs!

2012/3/18 André de Castro <aocb...@gmail.com>

--
André de Castro

Leandro Camargo

unread,

Mar 19, 2012, 3:10:04 AM3/19/12

to javascr...@googlegroups.com

Você está enfrentando um problema de escopo de variável.
Resolva assim:

tcell = $("<td id='cell" + level + "" + j + "'
>").html((level+1)*10);

qst = "Sua string dinâmica aqui";
tcell.data('qst', qst);
tcell.bind('click',function(){
$.facebox($(this).data('qst'),'cell'); // <<<-------

TESTEFB string exibida no facebox e 'cell' a classe css que define as
dimensões da facebox
});

2012/3/18 André de Castro <aocb...@gmail.com>:

André de Castro

unread,

Mar 19, 2012, 10:13:13 AM3/19/12

to javascr...@googlegroups.com

Obrigado!

vou tentar aqui

abs!

2012/3/19 Leandro Camargo <leand...@gmail.com>

--
André de Castro

André de Castro

unread,

Mar 19, 2012, 11:14:05 AM3/19/12

to javascr...@googlegroups.com

Funcionou!

muito obrigado!

pode ser que eu esteja pedindo demais.. mas queria entender a soluçao!

Abs!

2012/3/19 André de Castro <aocb...@gmail.com>

--
André de Castro

Leandro Camargo

unread,

Mar 19, 2012, 11:35:40 AM3/19/12

to javascr...@googlegroups.com

Ok. Sem problemas. A questão é que você está lidando com eventos. E
sempre que se lida com eventos trata-se de acontecimentos assíncronos
e nesse caso é muito comum enfrentar problemas de escopo de variáveis.
E quando você faz algo como:

var links = $('a');
for(var i = 0; i < links.length; i++) {
links.eq(i).bind('click', function() { alert(i); });
}

A ocorrência de um clique qualquer sobre qualquer um dos links é um
evento que ocorre bem após o código que atrela a função de clique aos
links ser executado. E quando qualquer clique é realizado o loop for
já vai ter sido executado a muito tempo e o valor de "i" será o último
possível (i = links.length - 1). Por isso que para cada elemento no
caso do seu código eu atribuí o valor da variável "qst" via $.data(),
porque aí nesse caso o valor fica atrelado a cada elemento. Para você
entender melhor isso, procure por "javascript closure" e entenderá
melhor sobre escopos de variáveis no JS.

Mas se você escrever o código acima da seguinte forma, ele funcionará
da forma correta:

var links = $('a');
links.each(function(i, el) {
$(this).bind('click', function() { alert(i); });
});

Nesse caso, tudo funciona corretamente porque o atrelamento do clique
é feito dentro de uma função com o "i" no escopo devido, então o seu
valor é preservado.

2012/3/19 André de Castro <aocb...@gmail.com>:

André de Castro

unread,

Mar 19, 2012, 11:47:40 AM3/19/12

to javascr...@googlegroups.com

Valeu Leandro!

muito obrigado

grande abraço!

2012/3/19 Leandro Camargo <leand...@gmail.com>

--
André de Castro

Reply all

Reply to author

Forward