Question

我的网站包含代码：

<html>
<head>
</head>
<body>
    <div id="wrap">
        <img id="img_1" src="images/sample.gif" alt="Image 1" width="200" height="40" />
    </div>
</body>
</html>

我有这个JavaScript和jQuery：

$(document).ready(function(){
    $('#wrap').append('<img id="img_2" src="images/sample_2.gif" alt="Image 2" width="200" height="40" />');

    alert($('#img_1').attr('src'));
    alert($('#img_2').attr('src'));
});

在IE7中，

第一个警告显示：'images / sample.gif'

第二个提醒显示：'http://hostname/images/sample_2.gif'

有解决方法吗？

我正在做的是通过JSONP从不同服务器上的网站引入标头并将其附加到当前页面。标题包含一些img标记的相对路径，因此我想有选择地检查它们是否确实是相对的，并在前面添加远程服务器主机名，以便它们正确显示。

由于这个问题，该功能适用于IE7的每个浏览器。

-

做了一些更多的工作。我有这个JavaScript：

<script type="text/javascript">
    $(document).ready(function(){
        function Config(){}
        Config.Framework = {
            RemoteRoot: "http://remote-root.com/",
            RemoteHostName: "remote-root.com",
            LocalHostName: window.location.hostname
        };

        $('#wrap').append('<img id="img_2" src="images/logo.gif" alt="Logo" width="100" height="93" />');
        $('#wrap').append('<img id="img_3" alt="Logo" width="100" height="93" />');
        $('#img_3').attr("src", "images/logo.gif");

        $('img', '#wrap').each(function(i){
            set_src($(this));
            alert(i + ': ' + $(this).attr('src'))
        });

        function set_src(img) {
            var src = img.attr('src');

            if ($.inArray(Config.Framework.LocalHostName, src) > -1) {
                img.attr('src', src.replace(Config.Framework.LocalHostName, Config.Framework.RemoteHostName));
            } else {
                img.attr('src', Config.Framework.RemoteRoot + src);
            }
        }
    });
</script>

因此set_src函数检查本地主机名是否在src字符串中，如果是，我将其替换为远程主机名。如果拉入图像的页面位于根文件夹中，这很好。但很多时候它不是。

如果图像被拉入不在根目录中的页面，它会将src设置为（仅在IE7中）：

如果在根目录中，它会：

原文：'http://local-hostname.com/images/logo.gif'
功能后：'http://remote-root.com/images/logo.gif'

如果在根目录外：

原文：'http://local-hostname.com/path/to/page/images/logo.gif'
功能后：'http://remote-root.com/path/to/page/images/logo.gif'
我需要的是：'http://remote-root.com/images/logo.gif'

Answer 1

如果您在jQuery中添加图片，就像在下面的代码中一样，您将获得相对网址，因此您无需检查此内容，因为您的所有图片都将与相关网址链接：

<script type="text/javascript">
$(document).ready(function(){
$('#wrap').append('<img id="img_2" alt="Image 2" width="200" height="40" />');
    $('#img_2').attr("src","images/sample_2.gif");

alert($('#img_1').attr('src'));
alert($('#img_2').attr('src'));
});
</script>

或者您可以检查src是否包含“http”：

alert($('#img_2').attr('src').indexOf("http"));

更新：

我修改了你的代码。它依赖于图像将位于"image"文件夹中。

function set_src(img) {
    var src = img.attr('src');
        alert(src);
        alert(src.indexOf('images/'));
    if (src.indexOf('/images/') > -1) {
            img.attr('src', src.replace(src.substring(0, src.indexOf('/images/') + 1),  Config.Framework.RemoteRoot));
        //img.attr('src', src.replace(Config.Framework.LocalHostName, Config.Framework.RemoteHostName));
    } else {
        img.attr('src', Config.Framework.RemoteRoot + src);
    }
        alert(img.attr('src'));
}

如何使用jQuery＆amp; amp;检查附加的<img/> src属性是相对的还是绝对的IE7？

1 个答案: