-1

RSSフィードをHTMLで表示しようとしています。iPad、iPhone、Chromeで動作しますが、InternetExplorerやSafariでは動作しません。エラーメッセージが表示されます

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

誰かが私がこれを機能させる方法を知っていますか？Apple RSSフィードを使用して、AppStoreのアプリを表示しています。エラーは最初の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では機能しません。

4

2 に答える 2

1

これにより結果が得られます。デモ

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バージョンデモ

$(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>');
        });
      });
    }
  });
});
于 2012-04-10T06:15:33.390 に答える
0

コードの基盤には間違いなくいくつかの問題があります。たとえば、次のように画像のインデックス番号をハードコーディングしない場合:

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);
}
于 2012-04-10T06:06:44.437 に答える