4

如果这个问题太简单，我对 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 ，尽管它们是相对的？或者有人可以推荐一种以这种方式加载外部内容的有效方式（其他插件、技术）吗？

谢谢！

4

1 回答 1

4

如果一切都与文件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（或类似方法），将指向此文件夹的所有请求重定向到代码库中的另一个脚本。在脚本中，查找传入脚本的路径，加载原始输出内容，执行搜索/替换并将内容输出到缓冲区。此外，您可以在服务器上设置缓存，以便客户端缓存请求，从而降低您可能遇到的处理开销（不过，我预计这将是相当小的）。

于 2012-12-11T02:38:58.553 回答