加载与相对路径外部HTML页面到使用jQuery一个DIV(Loading external HTM

我是比较新的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 （或类似），重定向引导到这个文件夹在你的代码库另一个脚本的所有请求。 在脚本中，寻找被传入到脚本的路径，加载原始输出内容，执行搜索/替换和输出的内容给缓冲器。 此外，您可以设置缓存服务器上，使得客户端将缓存降低可能遇到的（不过，我会预期是相当小）的处理开销的要求。

文章来源: Loading external HTML page with relative paths into a DIV using jQuery