Question

我在domain1上托管了一个页面，我通过ajax调用检索了一个包含一些标记的HTML片段。这些代码有一个相对src网址，我想为这些代码设置一个指向另一个域的基本网址，例如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行，浏览器向http://domain1/relativepath/To/Image1发出了不必要的请求，然后在http://domain2/relativepath/To/Image1行images[image].src = 'http://domain2'+ images[image].getAttribute('src');进行了（正确）调用

还有另一种修改src属性的方法吗？（或者在本地设置基本URL）

Answer 1

使用HTMLData获取阵列图像时会发生什么？您可以先更改HTMLData，然后将其分配给容器。

在HTML片段中为img标记设置baseUrl

1 个答案: