javascript - 为 HTML 片段中的 img 标签设置 baseUrl

Question

我在 domain1 上托管了一个页面，我通过 ajax 调用从中检索包含一些标签的 HTML 片段。这些标签有一个相对的 src URL，我想仅为这些标签设置一个指向另一个域的基本 URL，例如 domain2。

这是一个示例:我有一个具有以下值的字符串 HTMLData:

'<p> Foo </p> \
<img alt = "Image 1" src = "/relativepath/To/Image1"> \
<div class = "someDiv"> \
    <img alt = "Image 2" src = "/relativepath/To/Image2"> \
</div>'

我想在我的页面中添加如下内容:

'<p> Foo </p> \
<img alt = "Image 1" src = "http://domain2/relativepath/To/Image1"> \
<div class = "someDiv"> \
    <img alt = "Image 2" src = "http://domain2/relativepath/To/Image2"> \
</div>'

当然，我不知道片段的确切结构，我可能想将其扩展到其他嵌入对象标记。

这是我到目前为止所写的内容:

function setBaseURLandConstructDiv (HTMLData) {
    var container = document.createElement("div");
    container.innerHTML = HTMLData;
    var images = container.getElementsByTagName("img");
    for (var image = 0;image<images.length;image++) {
        if (images[image].src) {
            images[image].src = 'http://domain2'+ images[image].getAttribute('src');
        }
    }
    return container.innerHTML;
}

它有效，但对我来说似乎不合适。特别是，在 container.innerHTML = HTMLData 行，浏览器在执行(正确的) 在 images[image].src = 'http://domain2'+ images[image].getAttribute(' 行调用 http://domain2/relativepath/To/Image1 src');

那么还有其他方法可以修改src属性吗？ (或在本地设置基本 Url)

Answer 1

当您使用 HTML 数据获取数组图像时会发生什么？您可以先更改 HTML 数据，然后将其分配给容器。