jQuery : Como obter html de sites externos com php + jQuery

jquery

Olá a todos,

Com este post iniciarei uma série de pequenas dicas de programação nas linguagens que tenho conhecimento.

Serão problemas simples. Códigos curtos, pelo menos a princípio.

Dando início aos trabalhos, uma dica de jQuery, em que reconheço sou ainda novato, e foco mais em back-end.

Introdução ao problema

Carregar o conteúdo de um html de um outro site, que não seja o nosso, dentro de uma div interna do nosso html (ou php)

Para o carregamento de páginas é comum o uso da função load() do jQuery, que funciona muito bem neste caso :

$(‘#minhaDiv’).load(‘arquivo.html’);

Isto carrega o conteúdo do arquivo.html dentro de sua minhaDiv. Até aí sem novidades, mas como carregar de outro site ?

O load() não faz isto. Para fazer necessitaremos de uma ajuda do php.

Solução

Criamos um arquivo php por exemplo chamado captura.php e nele colocamos somente isto :

<?php echo file_get_contents($_GET['url']); ?>

Nosso jQuery terá que ser modificado, vou colocar uma váriável para ajudar :

var arquivo = $('#arquivo').val();
$('#minhaDiv').load('captura.php?url=' + arquivo);

Com estas duas linhas, necessitamos de um input no html com id arquivo e o jQuery pegará o valor do conteúdo desta variável e carregará este arquivo.

O html completo fica assim :

<span>Nome do arquivo</span><input type="text" id="arquivo">
<button id="carregar">Carrega o conteúdo HTML</button>
<div id="minhaDiv"></div>
<script>
$(document).ready(function(){
$('#carregar').click(function(){
var arquivo = $('#arquivo').val();
$('#minhaDiv').load('captura.php?url=' + arquivo);
});
});
</script>

 

Conclusão

Desta forma, o php carrega a página de outro site e colo ele está no seu site, o load() do jQuery carrega para sua página.

Obs 1 : Lembre-se de colocar o caminho completo do arquivo a carregar (http://www.site.com/pagina.html)

Obs 2 : Caso queira pegar uma parte do site, utilize o nome do arquivo com o complemento necessário.

Para pegar um article coloque o article no final (http://www.site.com/pagina.html article)

Para pegar uma div, coloque a div no final (http://www.site.com/pagina.html #minhaDiv)

É simples, não ? jQuery vem me conquistando a cada dia. Escreva menos, faça mais realmente resume o que é jQuery.

Abraços e até a próxima.

Outros artigos relacionados

O que é Git e Github? O que é e para que servem o Git e Github ? Começando a entender o funcionamento desta excelente ferramentas para desenvolvedores

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *