我有一个允许用户标记图片的网站。可以对标签进行投票。我有两个选项来排序标签:"排序顶部"answers"排序新的"，这是不言自明的。例如，当用户点击"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中工作
在不同的浏览器中不同的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
:
>>> 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)，然后再使用它。
解析backgrounimage字符串的代码(仅在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));