Fatal编程技术网
  • javascript/
  • Javascript 如何检查附加的<；img/>；src属性使用jQuery&；是相对的还是绝对的；IE7？

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

javascript jquery html

Javascript 如何检查附加的<；img/>；src属性使用jQuery&；是相对的还是绝对的；IE7？,javascript,jquery,html,internet-explorer-7,Javascript,Jquery,Html,Internet Explorer 7,我有一个包含以下代码的网站： <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> 我有以下JavaScrip

我有一个包含以下代码的网站：

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

$（文档）.ready（函数（）{
$（'#wrap'）。追加（''）；
警报（$（'img_1'）.attr（'src'））；
警报（$（'img_2'）.attr（'src'））；
});
在IE7中

第一个警报显示：“images/sample.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>


$（文档）.ready（函数（）{
函数配置（）{}
Config.Framework={
RemoteRoot:“http://remote-root.com/",
RemoteHostName:“remote root.com”，
LocalHostName:window.location.hostname
};
$（'#wrap'）。追加（''）；
$（'#wrap'）。追加（'-1）{
img.attr（'src'，src.replace（Config.Framework.LocalHostName，Config.Framework.RemoteHostName））；
}否则{
img.attr（'src'，Config.Framework.RemoteRoot+src）；
}
}
});
因此set_src函数检查本地主机名是否在src字符串中，如果在src字符串中，我将用远程主机名替换它。如果拉入图像的页面位于根文件夹中，则这是正常的。但很多时候情况并非如此

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

如果在根目录中，它会：

  • 原件：“”

  • 在函数“”之后

如果在根目录之外：

  • 原件：“”

  • 在函数“”之后

  • 我需要的是：“”

如果您在jQuery中添加图像，如以下代码所示，您将获得相对url，因此无需检查此项，因为您的所有图像都将与相对url链接：

<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>
更新：

我已经修改了你的代码。这取决于图像是否位于
的“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'));
}
看，这确实管用。但我所做的是抓取远程设备的所有标记并将其附加到页面。所以我不是一次添加一张图片，而是一次添加所有图片。然后，我运行一个函数，检查它们的src属性是绝对属性还是相对属性，如果是相对属性，则将远程主机名预先附加到它。IE7问题之所以出现，是因为每个img src属性都被读取为绝对值。我已经更新了答案以替换本地主机名。它将删除本地主机名和根文件夹之外的所有文件夹名，例如带有“”的“”。我接受这一点。从一般意义上讲，这基本上也是我采用的方法。我还必须为我的特定用例做一些特定的事情。 
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'));
}