加载相对路径外部HTML页面转换成使用jQuery的DIV [英] Loading external HTML page with relative paths into a DIV using jQuery
问题描述
我是比较新的jQuery和赦免，如果这个问题太简单了，但我已经搜查多个线程几个小时，无法找到一个明确的解决方案。
I am relatively new to jQuery and pardon if this question is too simple, but I've searched numerous threads for hours and cannot find a definite solution.
我有以下文件夹结构：
/index.html
/html/pages/page1.html
/html/pages/images/
/html/pages/css/
/html/pages/js/
/html/pages/includes/
我试图加载的 page1.html 成一个DIV index.html的以下基本方式：
I am trying to load page1.html into a DIV in index.html in the following basic way:
$('#content').load('html/pages/page1.html', function () {
console.log('loaded');
});
page1.html 加载罚款，但是，它由多个包括在它（图片，CSS，JS等），是相对于在页的所有内容文件夹（例如：../images/header.jpg），所以它不会显示在加载到 index.html的从现在开始，一切都变得相对 / 或< STRONG>的index.html 。
page1.html loads fine, however, it consists of multiple includes and all the content in it (images, CSS, JS, etc.) is relative to the pages folder (for example: ../images/header.jpg), so it does not show when loaded into index.html since now everything becomes relative to / or index.html.
我读的地方，让所有的路径绝对或相对根 page1.html 将工作，还加入排序的全局路径变量，然而，问题是，有太多的旧内容和改变的是它是不是一种选择。
I read somewhere that making all paths absolute or root relative in page1.html will work, also adding sort of a global path variable, however, the PROBLEM is that there is too much legacy content and changing all of it is not an option.
有没有办法做负载 page1.html 作为上述不修改任何的路径，尽管他们是亲戚？或者有人可以推荐加载外部内容这样的有效方法（其它插件，技术）？
Is there a way to do load page1.html as described above without modifying any of the paths, despite that they're relative? Or can someone recommend an efficient way (other plugins, techniques) of loading external content this way?
感谢您！
推荐答案
如果一切是相对于的页文件夹，然后可以使用一些简单的搜索和替换。这是不是最好的编程实践，因为它不是那么灵活（从相对要绝对在这种类型的上下文是依靠一些正常工作的因素），因为它应该是，但它会奏效。
If everything is relative to the pages folder, then you can use some simple searching and replacing. This isn't the best programming practice, as it is not as flexible (going from relative to absolute in this type of context is relying on a number of factors working properly) as it should be, but it will work.
$.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);
});
编辑：
您也可以使用一个代理脚本和重写/所有请求路由到该文件夹的代理脚本。我不知道你使用的是什么样的服务器端技术，但你可以这样做：
You could also use a proxy script and rewrite/route all requests to this folder to the proxy script. I don't know what server-side technology you are using, but you could do this:
使用的.htaccess （或类似），重定向引导到这个文件夹到另一个脚本在codeBase的所有请求。在脚本中，寻找那些被传入到脚本的路径，加载原始输出的内容，执行搜索/替换输出的内容到缓冲区。此外，你可以设置缓存在服务器上，以便客户端将缓存降低了处理开销的要求，你可能会遇到（不过，我会预计将相当小）。
Using .htaccess (or the like), redirect all requests directed to this folder to another script in your codebase. In the script, look for the path that is incoming to the script, load the original output contents, perform a search/replace and output the contents to the buffer. In addition, you can set up caching on the server so that the client would cache the requests lowering the processing overhead that you might experience (though, I would anticipate that to be fairly minimal).
这篇关于加载相对路径外部HTML页面转换成使用jQuery的DIV的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
