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!