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

一尘不染

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

ajax

如果这个问题太简单，我对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
而不修改任何路径，尽管它们是相对的？还是有人可以推荐一种以这种方式加载外部内容的有效方法（其他插件，技术）？

谢谢！

阅读 416

2020-07-26

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

2020-07-26