2010-06-16 89 views
3

我試圖遍歷包含遠程網頁(HTML輸出)的AJAX響應。jQuery:在Chrome/Safari中遍歷AJAX響應

我的目標是遍歷遠程頁面的'腳本','鏈接'和'標題'元素 - 在必要時加載它們,並將其內容嵌入到當前頁面。 Chrome瀏覽器/ Safari瀏覽器似乎忽略了下面的部分中的所有內容:Chrome瀏覽器/ Safari瀏覽器似乎省略了所有在瀏覽器中的所有內容,但Chrome/Safari瀏覽器的行爲有所不同: 當我在響應中運行.each這一頁。

這裏是我當前的代碼:

$.ajax({ 
    url: 'remoteFile.php', 
    cache: false, 
    dataFilter: function(data) { 
     console.log(data); 
     /* The output seems to contain the entire response, including the <head> section - on all browsers, including Chrome/Safari */ 

     $(data).filter("link, script, title").each(function(i) { 
      console.log($(this)); 
      /* IE/FF outputs all of the link/script/title elements, Chrome will output only those that are not in the <head> section */ 
     }); 

     console.log($(data)); 
     /* This also outputs the incomplete structure on Chrome/Safari */ 

     return data; 
    }, 
    success: function(response) {} 
}); 

我一直在這個問題苦苦掙扎了好一會兒,我曾經發現在谷歌搜索一些其他類似的情況,但沒有真正的解決方案。 這發生在jQuery 1.4.2和jQuery 1.3.2上。

我真的不想用.indexOf()和.substring()來解析響應 - 在我看來,這對客戶端來說會是一種矯枉過正。

非常感謝提前!

回答

1

我認爲這與jQuery如何處理HTML字符串並從中創建DOM節點有關。在其他許多事情中,jQuery將創建一個臨時<div>並將其innerHTML設置爲您傳遞給$(...)的任何HTML,從而生成一堆DOM節點,這些DOM節點可以從<div>中提取出來並作爲jQuery集合交還給您。

的問題,我相信,發生的原因<html><head><body>元素,所有這些都沒有很好地被附加到<div>元素迴應。瀏覽器的行爲往往不同,有些人似乎忽略了這些頂級元素,只是把你的內容交給你 - 其他人完全忽略了這些元素,甚至不會給你的後代。

看來,避免這種跨瀏覽器問題的方法是在解析之前簡單地用一些其他假元素替換麻煩的元素。例如。

$(
    // replace <html> with <foohtml> .. etc. 
    data.replace(/<(\/?)(head|html|body)(?=\s|>)/g, '<foo$1$2') 
).filter("link, script, title").each(function(i) { 
    console.log($(this)); 
    // do your stuff 
}); 

此外,我不認爲filter將是足夠的,因爲它不會針對後代元素。這可能是更好的方法:

$(
    // replace <html> with <foohtml> .. etc. 
    data.replace(/<(\/?)(head|html|body)(?=\s|>)/g, '<foo$1$2') 
).find('link,script,title').andSelf().filter("link,script,title").each(function(i) { 
    console.log($(this)); 
    // do your stuff 
}); 
+0

非常感謝! 我永遠不會猜測這是問題的根源,您的解決方案效果很好! 謝謝您的建議! 非常感謝 – jitzo 2010-06-16 11:48:31