Question

我有一个简单的XHR来加载＆＃39; testdirectory / testpage.html＆＃39;

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指向＆＃39; testdirectory / main.png＆＃39;图像，而不只是使用XHR的当前目录？ 我正在寻找一种替代方法来更改检索到的网页的HTML，因为这会破坏我尝试做的目的。

我已经在StackOverflow上搜索了大约20分钟，而且我用Google搜索了几个不同的东西。这似乎是一个问题，必须在某个时间之前被问过，但很难说出/找到。

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/');

请注意，您需要对其他类型属性中的网址执行相同操作，例如href。

XHR从单独的目录加载资源

1 个答案: