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

Question

我有一个允许用户标记图片的网站。 标签可以投票。 我对标签进行排序有两个选项：“顶部排序”和“新排序”，这很容易解释。 当用户单击例如“ sort new”时，此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 url呈现方式存在一些问题：

在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），然后再使用它。

---

解析backgroundImage字符串的代码（仅在rhino中测试）：

/// 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));