在IE和Chrome中使用Javascript獲取背景圖片的問題

我有一個網站，允許用戶標記圖片。標籤可以被投票。我有兩個選擇標籤的選項：「排序頂部」和「排序新」，這是非常明顯的。當用戶點擊，例如，「新排序」，這個JS函數被調用：在IE和Chrome中使用Javascript獲取背景圖片的問題

<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中工作。

來源

2012-01-02 Mark Lyons

讓我把你介紹給我的所謂的朋友[鮑比表（http://bobby-tables.com/：它分析和backgroundImage字符串（僅在犀牛測試）

代碼） – DaveRandom 2012-01-02 18:46:17

也許你只是發佈顯示實際要求的網址？ – hakre 2012-01-02 18:53:35

http://www.ewsprojects.com/~lyons/new.php – 2012-01-02 19:02:21

有一些問題，在不同的瀏覽器不同的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));

來源

2012-01-02 20:47:21 petraszd

你認爲你可以指出我在解析這個方面的正確方向嗎？我無法找到任何真正的 – 2012-01-02 22:38:08

我已經添加了兩種可能的方式來解析該字符串。 – petraszd 2012-01-02 23:59:48

在IE和Chrome中使用Javascript獲取背景圖片的問題

回答

相關問題