代码之家 › 专栏 › 技术社区 › Landon Kuhn

解析Ajax内容中的相关资源

ajax jquery

Landon Kuhn · 技术社区 · 15 年前

我正在尝试解决动态加载内容中相对引用的资源的问题。例如,假设我下载了以下页面 /index.html :

<html><body>
 <div id="insert-here" />
 <script>
  $(function(){
   $("#insert-here").load("x/ajax-content.html");
  });
 </script>
</body></html>

和 ajax-content.html 包含:

<img href="foo.png"/>

然后 foo.png 将从下载 /foo.png 这不是我想要的。我需要 PN.PNG 要相对于引用它的HTML进行下载,所以我需要从 /x/foo.png . 我想知道是否有办法做到这一点(除了在 ajax-content.html文件 )?

(我为什么要这样做?我正在开发一个基于Ajax的插件架构,它允许独立于应用程序开发和部署页面内容块。)

1 回复 | 直到 15 年前

Mr. Shiny and New å®å® 15 年前

问题是您正在将任意HTML插入原始文档中。浏览器无法知道问题数据实际上来自另一个文档。下面是正在发生的事情的细目:

DOM(前):

<html><body>
  <div id="insert-here"></div>
</body></html>

DOM(后):

<html><body>
  <div id="insert-here"><img src="foo.png"></div>
</body></html>

由于插入数据的方式,所讨论的HTML片段来自其他HTML引用的事实将丢失。我想说,最简单的解决方案是更改ajax-content.html文件中的路径。您可以在文件本身(可能通过任何工具自动上载Ajax插件)中执行此操作,或者在加载文档后更改路径。所以不要这么做

$("#insert-here").load("x/ajax-content.html");

您必须获取数据,然后调整任何路径,然后将数据插入到DOM中。

function updatePaths(responseText, textStatus, XMLHttpRequest) {
  // check xmlHttpRequest status code
  // parse responseText, fix up relative URLs
}
$("#insert-here").load("x/ajax-content.html", null, updatePaths);

推荐文章

Newbie_Coder · 如何使用Jquery无画布裁剪框架

1 年前

usman610 · Javascript代码在点击回车键和点击按钮时删除行

1 年前

NovoMannen · 导航中的下拉菜单在内容后面重叠

1 年前

Carly · 在页面加载时滑入div,然后单击以滑入和滑出(jQuery)

1 年前

Community wiki · jquery弹出窗口不会用按键关闭,但会点击

1 年前

Community wiki · Smarty IE9请求下载index.php文件(在上传未发生后)?是我的代码出错还是activecollab?

1 年前

Community wiki · 无法从jquery文档调用函数

1 年前

marzouk najib · Uncaught ReferenceError:未定义FullCalendar

2 年前

Pepe · 检查“data”属性是否包含输入值的一部分(jQuery)

2 年前

laurence keith albano · 如何使用Jquery在父类内添加子父类

2 年前