jquery - 使用 jQuery 将具有相对路径的外部 HTML 页面加载到 DIV 中

Question

我对 jQuery 比较陌生，如果这个问题太简单，请原谅，但我已经搜索了许多线程几个小时，但找不到明确的解决方案。

我有以下文件夹结构:

/index.html

/html/pages/page1.html
/html/pages/images/
/html/pages/css/
/html/pages/js/
/html/pages/includes/

我正在尝试通过以下基本方式将 page1.html 加载到 index.html 中的 DIV 中:

$('#content').load('html/pages/page1.html', function () {
   console.log('loaded');
});

page1.html 加载良好，但是，它由多个包含组成，并且其中的所有内容(图像、CSS、JS 等)都与页面 文件夹(例如:../images/header.jpg)，因此加载到 index.html 时不会显示，因为现在所有内容都与 / 或 <强>index.html。

我在某处读到，在 page1.html 中将所有路径设置为绝对路径或根相对路径都可以，还可以添加某种全局路径变量，但是，问题是遗留内容太多，并且改变所有这一切不是一个选择。

有没有一种方法可以如上所述加载 page1.html 而不修改任何路径，尽管它们是相对的？或者有人可以推荐一种以这种方式加载外部内容的有效方法(其他插件、技术)？

谢谢!

Answer 1

如果所有内容都与pages文件夹相关，那么您可以使用一些简单的搜索和替换。这不是最佳的编程实践，因为它不够灵活(在这种类型的上下文中从相对到绝对依赖于许多正常工作的因素)，但它会起作用。

$.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);
});

编辑:

您还可以使用代理脚本并将对此文件夹的所有请求重写/路由到代理脚本。我不知道你正在使用什么服务器端技术，但你可以这样做:

使用.htaccess(或类似的)，将所有指向此文件夹的请求重定向到代码库中的另一个脚本。在脚本中，查找传入脚本的路径，加载原始输出内容，执行搜索/替换并将内容输出到缓冲区。此外，您可以在服务器上设置缓存，以便客户端缓存请求，从而降低您可能遇到的处理开销(不过，我预计这会相当小)。