我有一个简单的 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 搜索了一些不同的内容。这似乎是一个以前一定被问过但很难表达/找到的问题。
最佳答案
如果不更改检索到的 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
)中的 URL 执行相同的操作。
关于javascript - XHR 从单独的目录加载资源,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34297145/