Cargando una página HTML externa con rutas relativas en un DIV usando jQuery
Soy relativamente nuevo en jQuery y perdón si esta pregunta es demasiado simple, pero he buscado numerosos hilos durante horas y no puedo encontrar una solución definitiva.
Tengo la siguiente estructura de carpetas:
/index.html
/html/pages/page1.html
/html/pages/images/
/html/pages/css/
/html/pages/js/
/html/pages/includes/
Estoy tratando de cargarpage1.html en un DIV enindex.html En la siguiente forma básica:
$('#content').load('html/pages/page1.html', function () {
console.log('loaded');
});
page1.html se carga bien, sin embargo, consiste en múltiples inclusiones y todo el contenido (imágenes, CSS, JS, etc.) es relativo a lapáginas carpeta (por ejemplo: ../images/header.jpg), por lo que no se muestra cuando se carga enindex.html ya que ahora todo se vuelve relativo a/ oindex.html.
Leí en algún lugar que haciendo que todos los caminos sean absolutos o relativos de raíz enpage1.html Funcionará, también agregando una especie de variable de ruta global, sin embargo, el PROBLEMA es que hay demasiado contenido heredado y cambiarlo todo no es una opción.
¿Hay alguna manera de hacer carga?page1.html como se describió anteriormente sin modificar ninguno de los caminos, a pesar de que son relativos? ¿O puede alguien recomendar una manera eficiente (otros complementos, técnicas) de cargar contenido externo de esta manera?
¡Gracias!