javascript - 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，因为这会违背我想要做的事情的目的。

我已经在 StackOverflow 上搜索了大约 20 分钟，并且用 google 搜索了一些不同的内容。这似乎是一个以前一定被问过但很难表达/找到的问题。

Answer 1

如果不更改检索到的 HTML，恐怕您将无法实现您想要的效果。

您从 XHR 请求收到的 xhr.responseText 是一个 HTML 字符串。当你这样做时:

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

您将获取该 HTML 字符串并将其分配给该元素的 innerHTML 属性。 innerHTML 属性解析该 HTML 字符串并将结果节点指定为该元素的子节点。解析后的 H​​TML 中的任何 URL 都将使用当前文档的基本 URL。

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

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

<小时/>

如果您决定修改 HTML 字符串是可以接受的，您可以执行以下操作:

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

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