使用https加载页面时如何从CSS调用图像

这件事快把我逼疯了。这是IE6/7的另一个特性，但我的一个网页需要使用https加载。在IE6/7中，我收到了令人恐惧的“包含安全和不安全项”消息，这会导致用户恐慌。我从头到尾检查了代码，并将问题（如IE所见）隔离到CSS中的背景图像。但是，这些使用绝对路径

background: url(/images/imagename.jpg);

看起来这是IE的绊倒，导致https上的消息不安全。有人知道怎么避开这件事吗？非常感谢您的帮助

试试：

background: url(//images/imagename.jpg);

根据这一点，这应该是可行的。也可以尝试将其用于样式表，例如：

<link rel="stylesheet" type="text/css" src="//style/style.css" />

---

只要CSS文件本身也来自HTTPS，就不会给您带来任何麻烦。没有明确协议的绝对路径（即

/path/to/file

而不是

http://example.com/path/to/file

）继承调用它们的文件的协议，可以是HTML或CSS

---

我们能看看你的页面吗？您可能忽略了页面上的其他内容。

您是正确的，背景样式的相对url路径将导致此消息出现在IE6/7中

我成功使用的唯一方法是从可用的浏览器数据构建绝对路径，或者硬编码绝对路径。下面是一个如何使用JavaScript构建绝对路径的示例：

使用如下顶级样式定义：

<style type="text/css">
    .fixBgImage {
        background: url(/images/imagename.jpg);
    }
</style>

.fixBgImage{
背景：url（/images/imagename.jpg）；
}

可以使用JavaScript函数查找该规则，并更改该规则的背景图像样式。（请记住，本例假设您已在工作表[0]上定义了规则）

//加载页面后需要运行此函数
//（body.onload、window.onload或类似内容）
函数fixBackgroundImages（）{
//使用此页上首先定义的工作表0
var rule=getRule（'.fixBgImage'，document.styleSheets[0]）；
如果（规则！=null）{
var bgUrl=rule.style.backgroundImage.replace（/^url |[\（\）]/g，”）；
bgUrl=fixHttpsBgUrl（bgUrl）；
rule.style.backgroundImage='url（'+bgUrl+''）；
}
}
函数getRule（名称、工作表）{
var规则=（sheet.rules）？sheet.rules:sheet.cssRules；
对于（var i=0；i=0）{
var basepath=document.URL.substring（0，document.URL.lastIndexOf（'/'）+1）；
var pcol=document.location.protocol+'/'；
var host=document.location.hostname；
var port=（document.location.port）？'：'+document.location.port:''；
if（imgUrl.indexOf（'/'）==0{///服务器根路径
imgUrl=pcol+host+port+imgUrl；
}
else{//app root
imgUrl=basepath+imgUrl；
}
}
}

IE对于相对路径映像应该绝对没有问题，只要它们是相对于安全根的。您遇到的问题很可能是由其他地方引起的

---

对不起，我恐怕无法在此提供链接。我已经检查了所有的HTTP请求，只是CSS图像。我还尝试了没有样式表的页面，IE很高兴。我的样式表也像href=“/\u css/screen.css”一样被引用，因此也没有http ref。您能为页面提供经过净化的源代码吗？同样，这种路径不应该是这种行为的原因。您是如何监视HTTP请求的？我会使用Fiddler，很容易过滤掉非HTTPS请求。恐怕也无法提供源代码-抱歉。相当高的流量/显著的网站。至于监视HTTP请求，我不能使用Fiddler，因为我在Mac上。我刚刚查看了源代码中的所有http://请求，以及Firefox Web Developer工具栏中的“查看页面信息”。如果您正在测试IE是否存在问题，那么可以肯定的是，您周围有一台Windows机器，可以使用Fiddler。但您应该阅读下面的IEInternals文章，以获取有关此类问题的更多帮助。尝试了此操作，但图像从所有浏览器中消失：-（如果你想让这个语法起作用，你必须像这样使用它：//hostname/images/file.jpgSorry，对如何实现这一点有点困惑。我需要为每个图像创建一个var吗？对不起，我给出的解决方案并不是真正的自动插入。我将上面的函数更改为一个函数，使其更加模块化。你可以用JavaScript构建一个新的样式规则。）at使用此函数定义背景样式。我将立即给出一个示例。非常感谢。令人惊讶的是，对于人们来说，这不是一个更常见的问题。编辑了我的回复，以包括一个关于如何使用原始函数的示例…享受！

        // this function needs to be run after the page has loaded
        // (body.onload, window.onload or something similar)
        function fixBackgroundImages() {
            // using sheet 0 defined first on this page
            var rule = getRule('.fixBgImage', document.styleSheets[0]);         
            if (rule != null) {
                var bgUrl = rule.style.backgroundImage.replace(/^url|[\(\)]/g, '');
                bgUrl = fixHttpsBgUrl(bgUrl);
                rule.style.backgroundImage = 'url("' + bgUrl + '")';
            }
        }

        function getRule(name, sheet){
            var rules = (sheet.rules) ? sheet.rules : sheet.cssRules;

            for (var i = 0; i < rules.length; i++) {
                if (rules[i] && rules[i].selectorText == name) {
                    return rules[i];
                }
            }

            return null;    
        }

       // This function returns an absolute path if https is used
       function fixHttpsBgUrl(imgUrl){
          if (document.location.protocol.indexOf('https') >= 0){
            var basepath = document.URL.substring(0, document.URL.lastIndexOf('/') + 1);
            var pcol = document.location.protocol + '//';
            var host = document.location.hostname;
            var port = (document.location.port) ? ':' + document.location.port : '';

            if (imgUrl.indexOf('/') == 0){ // server root path
              imgUrl = pcol + host + port + imgUrl;
            }
            else{  // app root
              imgUrl = basepath + imgUrl;
            }
          }
        }