DIV элемент относительный HTML-контент

Question

Я загружаю содержимое внешнего HTML-файла с помощью jQuery и устанавливая содержимое в элемент DIV. HTML правильно отображается внутри DIV, однако любые относительные URL-адреса для изображений не загружаются - понятно, поскольку они относятся к расположению файла HTML.

Что было бы лучшим способом обеспечить загрузку всех относительных материалов? Я мог бы динамически изменить все относительные URL-адреса на абсолютные с помощью JavaScript, но есть ли более простой способ сделать это или более предпочтительный подход?

Answer 1

Вам нужно будет изменить относительные URL-адреса на static/relative на текущую HTML-страницу, в которую вы загружаете файл. Рассмотрим следующий пример, предположим, что вы загружаете HTML с именем page1.html:

$.get('html/pages/page1.html', {}, function(data, status, xhr) { 
    var updatedData = data.replace(/\.\.\/(images|css|js)+/g, "http://www.mywebsite.com/html/$1"); 
    $('#content').html(updatedData); 
}); 

Это не лучший стиль программирования, так как она не такая гибкая (переход от относительно абсолютного в этом типе контекста полагается на ряд факторов, работающих должным образом), как и должно быть, но он будет работать.