XHR 从单独的目录加载资源

Question

我要加载一个简单的 XHR 'testdirectory/testpage.html'

var xhr; (XMLHttpRequest) ? xhr= new XMLHttpRequest() : xhr= new ActiveXObject("Microsoft.XMLHTTP"); 

xhr.onload = function() {
    if(xhr.readyState === 4 && xhr.status === 200) {
        var preview = xhr.responseText;
        document.getElementById("content").innerHTML = preview;

    }
}           
xhr.open("GET", "testdirectory/testpage.html", true);
xhr.send();

我已将其设置为在单击按钮时显示。效果很好。假设 testpage.html 看起来像这样：

<h1>Loaded Page Heading!</h1>
<img src="main.png">

它会加载，但显示的图像不是来自该目录的 main.png，而是来自放置 XHR 的页面目录的 main.png。

有没有办法让返回的 HTML 指向 'testdirectory/main.png' 图像，而不只是使用 XHR 中的当前目录？ 我正在寻找一种替代方法来更改检索到的页面的 HTML，因为那样会破坏我正在尝试做的事情的目的。

我已经在 Whosebug 上搜索了大约 20 分钟，并且用谷歌搜索了一些不同的东西。这似乎是一个必须在某个时候问过但很难phrase/find.

的问题

Answer 1

如果不更改检索到的 HTML.

，恐怕您将无法实现您想要的结果

你从XHR请求中收到的xhr.responseText是一串HTML。当你这样做时：

document.getElementById("content").innerHTML = preview;

您正在获取 HTML 的字符串并将其分配给该元素的 innerHTML 属性。 innerHTML 属性解析 HTML 的字符串并将生成的节点分配为元素的子节点。已解析 HTML 中的任何 URL 将使用当前文档的基 URL.

所以基本上，您所做的就是获取一些 HTML 字符串，解析它并将其附加到当前文档。 innerHTML 属性不关心或不知道你从哪里获得 HTML。生成的节点将与文档其余部分中的任何其他节点完全相同 HTML。

在我看来，您期待 iframe 的行为。但那是完全不同的野兽，并且与您在这里所做的工作不同。 iframe 基本上是一个嵌入式文档，有自己的 DocumentObjectModel (DOM)，因此，它有自己的基础 URL 属性.

如果您决定修改 HTML 字符串是可以接受的，您可以这样做：

var preview = xhr.responseText.replace('src="', 'src="testdirectory/');

请记住，您需要对其他类型的属性中的 URL 执行相同的操作，例如 href.

XHR 从单独的目录加载资源

XHR loading resources from separate directory

javascript

jquery

xmlhttprequest