Estoy tratando de construir un pequeño proyecto donde creo un nuevo documento HTML (que sería una página individual de un producto de comercio electrónico) y otro documento toma la información de ese documento creado. Sin embargo, no tengo idea de cómo extraer información de un documento externo sin tener que incrustar toda la página con <iframe> .
Si uso document.querySelector() o cualquier otra función similar, puedo obtener una referencia de los elementos que tienen id y class . Sin embargo, esta función obtendrá el elemento del documento HTML que está en el código JS en el que estoy trabajando.
Para ejemplificar mi problema, admitamos que tengo <div id="p1"></div> dentro del documento products.html para trabajar con el elemento #p1 . Tendría que hacer esto: let p1 = document.querySelector("#p1") .
Pero, ¿qué pasa si tengo un documento index.html y quiero usar el elemento <div id="p1"></div> de products.html , cómo lo haría?
use un archivo js y llámelo tanto en products.html como en index.html
Puede obtener el archivo html como texto, analizarlo y ejecutar querySelector
fetch("products.html").then(r=>r.text()).then((html)=>{ // get the content of products.html let element = document.createElement("html"); element.innerHTML = html; // parse the html let p1 = element.querySelector("#p1"); });Tenga en cuenta que ambos documentos deben tener el mismo origen (ver: CORS ), por lo que no puede usar esto para raspar sitios web de terceros