DIV元素相對HTML內容

Question

我使用jQuery加載外部HTML文件的內容並將內容設置爲DIV元素。 HTML在DIV內正確呈現，但是圖像的任何相對URL都不會加載 - 可以理解，因爲它們與HTML文件位置相關。

確保所有相對內容也被加載的最好方法是什麼？ 我可以使用JavaScript動態地將所有相對URL改爲絕對URL，但有沒有更簡單的方法來解決這個問題或者更受歡迎的方法？

Answer 1

您將需要將相對URL更改爲靜態/相對於當前加載文件的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); 
}); 

這是不是最好的編程實踐，因爲它不夠靈活（從相對要絕對在這種類型的上下文是依靠許多因素正常工作），但它會起作用。