jQuery加载和相对路径


jQuery loading and relative paths

我使用jQuery加载页面内容,如下所示:

$("#content").load(path);

如果内容文件是纯内容,如:

<!--page.php-->
I am content

然而,当我想在我的内容中包括这样的图像时:

<!--page.php-->
<img src="images/image.jpg"/>

该路径只适用于jQuery脚本的原点,而不是page.php文件,因此以下示例不适用于上面的代码:

Directory tree:
index.php
jQuery.js
pages/
  page.php
  images/
    image.jpg

因为它使page.php相对于jQuery所在的位置,在网站的根目录下,所以它找不到图像文件夹,除非我给它一个确切的路径,在我的实际网站中,这个路径会一直根据内容文件的位置而变化。

有没有一种不需要我在每一张我想引用的图像或内容中输入确切路径的非黑客方法?

我知道你说过不黑客,但你可以在加载内容后这样做

$("#content").load(path + '/page.php');

然后

$('#content img').each(function(){
    $(this).prop('src', path + '/' + $(this).prop('src'))
})

您可以为映像目录的路径设置一个全局变量。并使用该变量作为路径,无论您在哪里放置图像。

如果路径发生更改,则只需要更改一个变量值。

使用attr('src')而不是prop,因为prop可以向相对路径添加基本url。

$(this).find('img').each(function () {
    $(this).attr('src', address + $(this).attr('src'))
});