问题
I am trying to display an RSS feed in HTML. It works on iPad, iPhone and chrome but not in internet explorer or safari. I get an error message saying
x[i].getElementsByTagName("image")[1] is undefined
Does anyone know how I can get this to work? It is using an Apple RSS feed to display apps from the App Store. The error is occurring at the first document.write. I am trying to display the returned results in a table also.
<html>
<head>
<title>RSS Apps</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<script type="text/javascript">
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","http://itunes.apple.com/au/rss/topfreeapplications/limit=10/xml?partnerId=1002&partnerUrl=http%3A%2F%2Fwww.s2d6.com%2Fx%2F%3Fx%3Dc%26z%3Ds%26v%3D3868801%26t%3D",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
var x=xmlDoc.getElementsByTagName("feed");
for (i=0;i<x.length;i++)
{
document.write("<a href="+x[i].getElementsByTagName("id")[1].childNodes[0].nodeValue+"><img src=" + x[i].getElementsByTagName("im:image")[1].childNodes[0].nodeValue +"></a>");
document.write("</td><td>");
document.write("<a href="+x[i].getElementsByTagName("id")[2].childNodes[0].nodeValue+"><img src=" + x[i].getElementsByTagName("im:image")[4].childNodes[0].nodeValue +"></a>");
document.write("</td><td>");
document.write("<a href="+x[i].getElementsByTagName("id")[3].childNodes[0].nodeValue+"><img src=" + x[i].getElementsByTagName("im:image")[7].childNodes[0].nodeValue +"></a>");
document.write("</td></tr><tr><td>");
document.write("<font size=\"1\"><a href="+x[i].getElementsByTagName("id")[1].childNodes[0].nodeValue+">" + x[i].getElementsByTagName("name")[1].childNodes[0].nodeValue+"</a>");
document.write("</td><td>");
document.write("<font size=\"1\"><a href="+x[i].getElementsByTagName("id")[1].childNodes[0].nodeValue+">" + x[i].getElementsByTagName("name")[2].childNodes[0].nodeValue+"</a>");
document.write("</td><td>");
document.write("<font size=\"1\"><a href="+x[i].getElementsByTagName("id")[1].childNodes[0].nodeValue+">" + x[i].getElementsByTagName("name")[3].childNodes[0].nodeValue+"</a>");
}
</script>
</td></tr>
</table>
</div>
</body>
</html>
Updated code to handle "im:image" and the code now works in internet explorer and safari but not in chrome.
回答1:
This will give a result. DEMO
Notice I access the entry elements and in the entries I access the im:image tags
UPDATE This works in IE8, Fx Safari and Chrome on XP
<html>
<head>
<title>RSS Apps</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
var isIE = navigator.userAgent.indexOf('MSIE')!=-1;
var ns = {im:"http://itunes.apple.com/rss"}; // could be extracted from the root element's attributes
function getElems(obj,tagName) {
if (!obj.getElementsByTagNameNS) return obj.getElementsByTagName(tagName);
var prefix = "";
if (tagName.indexOf(":") !=-1) {
var parts = tagName.split(":")
prefix = parts[0];
tagName = parts[1];
}
if (prefix == "") return obj.getElementsByTagName(tagName);
return obj.getElementsByTagNameNS(ns[prefix], tagName);
}
window.onload=function() {
var xmlhttp;
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else {// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","http://itunes.apple.com/au/rss/topfreeapplications/limit=10/xml?partnerId=1002&partnerUrl=http%3A%2F%2Fwww.s2d6.com%2Fx%2F%3Fx%3Dc%26z%3Ds%26v%3D3868801%26t%3D",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
var x=xmlDoc.getElementsByTagName("entry");
var html = "";
for (var i=0;i<x.length;i++) {
var entry = x[i];
var id =getElems(entry,"id")[0].textContent;
var nameTag = getElems(entry,"im:name");
var name = isIE?nameTag[0].text:nameTag[0].textContent;
html += '<a href="'+id+'">'+name+'<br/>';
var images = getElems(entry,'im:image');
for (var j=0;j<images.length;j++) {
html += '<img src="'+(isIE?images[j].text:images[j].textContent)+'"/>';
}
html+='</a><hr/>';
}
document.getElementById('content').innerHTML=html;
}
</script>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div id="content"></div>
</div>
</body>
</html>
UPDATE 2
jQuery version DEMO
$(document).ready(function() {
jQuery.support.cors = true; // IMPERATIVE for IE(8) support
$.ajax({
type: "GET",
url: "http://itunes.apple.com/au/rss/topfreeapplications/limit=10/xml?partnerId=1002&partnerUrl=http%3A%2F%2Fwww.s2d6.com%2Fx%2F%3Fx%3Dc%26z%3Ds%26v%3D3868801%26t%3D",
dataType: "xml",
success: function(xml) {
$(xml).find('entry').each(function(){
var id = $(this).find("id").text();
var title = $(this).find("title").text();
$("#content").append('<hr/>'+title+'<br/>');
var images = $(this).find("image");
if (images.length ==0) images = $(this).find("im\\:image");
$.each(images,function(){
$("#content").append('<a href="'+id+'"><img src="'+$(this).text()+'"/></a>');
});
});
}
});
});
回答2:
There are definitely some issues with the foundation of your code. For instance, if you were to not hard-code in the index number of the image, such as:
x[i].getElementsByTagName("id")[2]
But instead actually confirmed they existed, that would avoid the error outright.
If I had to guess (and I do) regarding the issue with your specific error, I would assume it's because the image elements have im: namespace prefixes, and that perhaps the browsers throwing errors aren't recognizing the getElementByTagName as the tagname after the namespace.
This is, of course, only a guess. I would recommend using nested loops for each item you are trying to output, as this will isolate the problem, prevent fatal errors, and be easier to maintain and expand later.
Edit:
Does the following work:
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","http://itunes.apple.com/au/rss/topfreeapplications/limit=10/xml?partnerId=1002&partnerUrl=http%3A%2F%2Fwww.s2d6.com%2Fx%2F%3Fx%3Dc%26z%3Ds%26v%3D3868801%26t%3D",false);
xmlhttp.send();
var feed = xmlhttp.responseXML;
var entries = feed.getElementsByTagName("entry");
for (i = 0; i < entries.length; i++)
{
entry_id = entries[i].getElementsByTagName("id")[0];
entry_image = entries[i].getElementsByTagName("image")[0];
entry_name = entries[i].getElementsByTagName("name")[0];
entry_item = document.createElement("li");
entry_figure = document.createElement("figure");
entry_figure_img = document.createElement("img");
entry_figure_img.setAttribute("src", entry_image.firstChild.nodeValue);
entry_image_figcap = document.createElement("figcaption");
entry_figure.appendChild(entry_figure_img);
entry_link = document.createElement("a");
entry_link.setAttribute("href", entry_id);
entry_link_name = document.createTextNode(entry_name.firstChild.nodeValue );
entry_link.appendChild(entry_link_name);
entry_image_figcap.appendChild(entry_link);
entry_figure.appendChild(entry_image_figcap);
entry_item.appendChild(entry_figure);
document.body.appendChild(entry_item);
}
来源：https://stackoverflow.com/questions/10083682/error-in-safari-ie-error-xi-getelementsbytagnameimage1-is-undefined