在IE和Chrome中使用Javascript获取背景图片的问题

Question

我有一个网站，允许用户标记图片。标签可以被投票。我有两个选择标签的选项：“排序顶部”和“排序新”，这是非常明显的。当用户点击，例如，“新排序”，这个JS函数被调用：

<script type="text/javascript"> 
    function sortTagsNew() 
    { 

    var sortnew = document.getElementById('sortnew'); 
    var sorttop = document.getElementById('sorttop'); 
    sortnew.style.textDecoration = 'underline'; 
    sorttop.style.textDecoration = 'none'; 
    var filename = document.getElementById('center_frame').style.backgroundImage; 

if (window.XMLHttpRequest) 
{// code for IE7+, Firefox, Chrome, Opera, Safari 
xmlhttp=new XMLHttpRequest(); 
} 
else 
{// code for IE6, IE5 
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
} 
xmlhttp.onreadystatechange=function() 
{ 
if (xmlhttp.readyState==4 && xmlhttp.status==200) 
{ 
document.getElementById("response_caption").innerHTML=xmlhttp.responseText; 
} 

} 
xmlhttp.open("GET","sortnew.php?filename="+filename,true); 
xmlhttp.send(); 


} 
</script> 

你或许可以告诉大家，那个大IF语句做一个AJAX调用。它指向下面的PHP文件sortnew.php，该文件在数据库中查询该映像下的标记。

$capfilename = $_GET['filename']; 
$acturl = substr($capfilename, 6, -3); //extracts filename from the url('') 

$new_captions = mysql_query("SELECT * from captions where image = '$acturl' ORDER BY time DESC LIMIT 5"); 
$caption = array(); 
while($rows = mysql_fetch_array($new_captions)){ 
$caption[] = $rows; 

// Includes a PHP file that designates how tags should be displayed (uses a foreach), but that's kind of irrelevant. 

我认为问题是，是，IE和Chrome不通过获得filename。当我手动为标签输入有效图像的文件名时，它可以正常工作，但无论出于何种原因，IE和Chrome都不会获取文件名，因此不会返回任何内容。我想这可能与我如何使用子字符串来提取文件名本身有关。也许Chrome和IE自动获取文件名，但我找不到任何关于此的信息。请记住它确实在FF中工作。

Answer 1

有一些问题，在不同的浏览器不同的CSS网址介绍：

在Chrome中：

> document.getElementById('center_frame').style.backgroundImage; 
"url(http://3.bp.blogspot.com/-8R0NUSKVupc/TfI92fvQY1I/AAAAAAAAAeA/B6e09X9hhqY/s1600/4.jpg)" 
> document.getElementById('center_frame').style.backgroundImage.length; 
90 

在Opera：

>>> document.getElementById('center_frame').style.backgroundImage; 
"url("http://3.bp.blogspot.com/-8R0NUSKVupc/TfI92fvQY1I/AAAAAAAAAeA/B6e09X9hhqY/s1600/4.jpg")" 
>>> document.getElementById('center_frame').style.backgroundImage.length; 
92 

，你可以看到这两个字符串是不同的在Opera和Chrome中（我不知道其他浏览器）。所以，首先你应该解析它并转换为通用格式（http://example.com/test.jpg），而不是使用它。

/// Simple parsing 
function parse1(str) { 
    str = str.slice(4, -1); 
    if (str[0] == '"' || str[0] == "'") { 
    return str.slice(1, -1); 
    } 
    return str; 
} 

// Regular Expressions magic 
function parse2(str) { 
    return str.match(/^url\(['"]?([^'"]+)['"]?\)$/)[1]; 
} 

a = "url(\"http://3.bp.blogspot.com/-8R0NUSKVupc/TfI92fvQY1I/AAAAAAAAAeA/B6e09X9hhqY/s1600/4.jpg\")"; 
b = "url(http://3.bp.blogspot.com/-8R0NUSKVupc/TfI92fvQY1I/AAAAAAAAAeA/B6e09X9hhqY/s1600/4.jpg)"; 

print(parse1(a)); 
print(parse1(b)); 
print(parse2(a)); 
print(parse2(b));