如何在使用https加载页面时从CSS调用图像
如何在使用https加载页面时从CSS调用图像
提问于 2009-12-23 23:35:06
这个快把我逼疯了。这是IE6/7的另一个特性，但我的一个网页需要使用https加载。在IE6/7中，我得到了可怕的“包含安全和不安全的项目”的消息，这是导致用户恐慌。我已经从头到尾看了一遍代码，并将问题(正如IE所看到的)与我的CSS中的背景图像隔离开来。但是，这些使用的是绝对路径...
background: url(/images/imagename.jpg);看起来这会使IE出错，并导致https上的不安全消息。有没有人知道怎么解决这个问题？任何帮助都非常感谢。
回答 4
Stack Overflow用户
发布于 2009-12-23 23:38:51
这应该不会给你带来任何麻烦，只要CSS文件本身也来自HTTPS。没有明确协议的绝对路径(例如，/path/to/file而不是http://example.com/path/to/file)继承调用它们的文件的协议，无论是HTML还是CSS。
我们能看看你的页面吗？有可能你忽略了页面上的其他东西。
Stack Overflow用户
发布于 2009-12-24 00:16:24
您是正确的，背景样式中的相对url路径将导致此消息出现在IE6/7中。
我唯一成功使用的方法是从可用的浏览器数据构建绝对路径，或者硬编码绝对路径。以下是如何使用JavaScript构建绝对路径的示例：
使用像这样的顶级样式定义：
<style type="text/css">
.fixBgImage {
background: url(/images/imagename.jpg);
}
</style>您可以使用JavaScript函数查找该规则，并更改该规则的backgroundImage样式。(请记住，此示例假设您已在工作表上定义了规则)
// 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;
}
}
}Stack Overflow用户
发布于 2009-12-23 23:36:50
尝试使用：
background: url(//images/imagename.jpg);根据this answer的说法，这应该是可行的。尝试将其用于样式表，例如：
<link rel="stylesheet" type="text/css" src="//style/style.css" />页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/1953469
复制相关文章
相似问题
腾讯云开发者
