javascript - Safari/IE 中的错误错误 x[i].getElementsByTagName("image")[1] 未定义

Question

我正在尝试以 HTML 格式显示 RSS 提要。它适用于 iPad、iPhone 和 chrome，但不适用于 Internet Explorer 或 safari。我收到一条错误消息说

x[i].getElementsByTagName("image")[1] is undefined

有谁知道我怎样才能让它工作？它使用 Apple RSS 提要来显示来自 App Store 的应用程序。错误发生在第一个 document.write 处。我也在尝试在表格中显示返回的结果。

        <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>

更新了处理“im:image”的代码，该代码现在可以在 Internet Explorer 和 safari 中运行，但不能在 chrome 中运行。

score 1 · Accepted Answer

这将给出一个结果。演示

请注意，我访问entry元素并在条目中访问 im:image 标签

更新这适用于 XP 上的 IE8、Fx Safari 和 Chrome

<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>

更新 2

jQuery版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>');
        });
      });
    }
  });
});

score 0 · Accepted Answer

您的代码基础肯定存在一些问题。例如，如果您不对图像的索引号进行硬编码，例如：

x[i].getElementsByTagName("id")[2]

但实际上证实了它们的存在，这将彻底避免错误。

如果我不得不猜测（并且我确实）关于您的特定错误的问题，我会假设这是因为image元素具有im:名称空间前缀，并且可能引发错误的浏览器没有将其识别getElementByTagName为名称空间之后的标记名。

当然，这只是一个猜测。我建议对您尝试输出的每个项目使用嵌套循环，因为这将隔离问题，防止致命错误，并且以后更易于维护和扩展。

编辑：

以下工作是否有效：

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

javascript - Safari/IE 中的错误错误 x[i].getElementsByTagName("image")[1] 未定义

2 回答 2

编辑：

Related

Reference