Você pode utilizar o XMLHttpRequest
ou Fetch
para realizar uma requisição de obter o código fonte da página. Após isso, basta utilizar document.createElement
ou DOMParser
para poder "converter" o código fonte retornado (como string) para HTML.
Exemplo com XMLHttpRequest
e document.createElement
:
XMLHttpRequest
é uma API que fornece funcionalidade ao cliente para transferir dados entre um cliente e um servidor. Ele fornece uma maneira fácil de recuperar dados de um URL sem ter que fazer uma atualização de página inteira. Já o document.createElement
irá criar um elemento HTML, dessa forma podemos utilizar funções como querySelector
e filtrar determinados elementos.
JavaScript:
const result = document.querySelector("#result")
const xhr = new XMLHttpRequest();
xhr.addEventListener("load", event => {
/**
* Cria um elemento temporário
* Adiciona o código fonte retornado
*/
const html = document.createElement("html")
html.innerHTML = event.target.response
/* Captura todos os links com o atributo rel="bookmark" */
const anchors = html.querySelector("a[rel=\"bookmark\"]");
/* Adiciona os links capturados na div#result */
anchors.forEach(anchor => {
result.innerHTML += anchor
})
})
function copy() {
/* Realiza a requisição */
xhr.open("GET", "https://developer.mozilla.org/pt-BR/")
xhr.send()
}
JavaScript:
<button onclick="copy()">Click!</button>
<div id="result"></div>
Exemplo com Fetch
e DOMParser
:
A Fetch API fornece uma interface para buscar recursos (por exemplo, em toda a rede). Parecerá familiar para qualquer pessoa que tenha usado XMLHttpRequest, porém a nova API oferece um conjunto de recursos mais poderoso e flexível. A função DOMParser
irá converter nossa string para HTML, dessa forma poderemos utilizar funções como querySelectorAll
para filtrar os elementos úteis.
JavaScript:
const result = document.querySelector("#result")
function copy() {
fetch("https://developer.mozilla.org/")
.then( response => response.text())
.then( response => {
/**
* Cria um elemento temporário
* Adiciona o código fonte retornado
*/
const parser = new DOMParser()
const html = parser.parseFromString(response, "text/html")
/* Captura todos os links com o atributo rel="bookmark" */
const anchors = html.querySelector("a[rel=\"bookmark\"]")
/* Adiciona os links capturados na div#result */
anchors.forEach(anchor => {
result.insertAdjacentHTML('beforeend', anchor)
})
})
}
HTML:
<button onclick="copy()">Click!</button>
<div id="result"></div>
Restrição:
Por questões de segurança, os navegadores estão bloqueando requisições em páginas que não possuem o cabeçalho Access-Control-Allow-Origin
.
(fonte: mozillademos.org)
Para mais detalhes recomendo a página Controle de Acesso HTTP (CORS).