RSS给了我未封闭的标签链接,无法获得innerHTML

时间:2018-02-13 23:27:34

标签: javascript jquery html

我正在使用RSS进行研究,但网站为我提供了一个带有未封闭标签的RSS,然后我无法获得此标签的innerHTML。

我不知道如何使用jquery解决问题并使标记关闭或这样的可能解决方案。

以下是代码:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" content="xml">
    <script type="text/javascript" src="api/jquery.js"></script>
</head>
<body>

<p id="someElement" visibility="hidden"></p>
<p id="anotherElement"></p>

    <script type="text/javascript">
        var x = new XMLHttpRequest();
        x.open("GET", "http://www.lemonde.fr/rss/une.xml", true);
        x.onreadystatechange = function () {
        if (x.readyState == 4 && x.status == 200)
        {
            var doc = x.responseXML;
            var string = (new XMLSerializer()).serializeToString(doc); 
            $("#someElement").append(string);

            alert("test");


            var tag = document.getElementsByTagName("item");

            for(var i = 0, max = tag.length; i < max; i++){

                var htmli = tag[i];
                //alert(htmli.innerHTML); 
               //uncomment the alert to see the xml got from the rss 
                var title = htmli.getElementsByTagName("title")[0].innerHTML;
                var link = htmli.getElementsByTagName("link")[0].innerHTML;
                var description = htmli.getElementsByTagName("description")[0].innerHTML;
                var toAdd = "<ul><li> title : " +title+"</li><li> link : "+ link +" </li><li> description :"+description+" </li></ul>";

                $("#anotherElement").append(toAdd);
            }
        }
    };
    x.send(null);
    </script>
</body>
</html>

对此有何解决方案?

我在名为api的文件夹中有jquery。

非常感谢!!

1 个答案:

答案 0 :(得分:0)

(我注意到,当你在脚本标记中包含jQuery时,你并没有在你的代码中实际使用它。使用jQuery的功能来管理AJAX请求是一种更好的做法。序列化,如果您将要使用它,因为它们涵盖了更多情况和浏览器版本。我还建议retrieving jQuery from a CDN而不是自己托管它.jQuery有能力解析XML本身就是1.5。以下是使用1.12编写的。)

我在RSS Feed中遇到了与未关闭标签相同的问题,并提出了一个可怕的解决方案。我没有测试过这个跨浏览器,也不建议将它合并到生产代码中,但它可以帮我解决一次性问题。

我们的想法是获取RSS项目文本的原始输出,将其填入jQuery HTML解析器,然后手动检查其输出,直到我们找到它认为可能是HTML&lt的项目为止; LINK&GT;标签。因为我们知道RSS链接标记没有关闭,所以它遇到的下一件事应该被解析为HTML Text对象,我们可以为永久链接URL提取它。

这里是我如何重写你的脚本以更好地利用jQuery并整合我的hack。 (我假设您已经设置了CORS或其他内容,以便您可以实际从lemonde.fr跨域检索Feed。)

&#13;
&#13;
<!DOCTYPE html>
<html>

<head>
  <title></title>
  <meta charset="utf-8" content="xml">
  <script type="text/javascript" src="//code.jquery.com/jquery-1.12.4.min.js"></script>
</head>

<body>

  <p id="someElement" visibility="hidden"></p>
  <p id="anotherElement"></p>

  <script type="text/javascript">
    (function($, window, document) {

      function fetchFeed(url) {
        // use jQuery to handle AJAX
        $.get(url, function(data) {
          // parse XML result with jQuery
          var $XML = $(data);
          $XML.find("item").each(function() {
            // ensure that we have a jQuery-wrapped _this_ object and 
            // create a new object with the properties we want
            var $this = $(this),
              item = {
                title: $this.find("title").text(),
                description: $this.find("description").text(),
                link: ""
              };
            // since the XML parser will treat the unclosed <link> as valid,
            // we instead send the raw output to the HTML parser and tell it do to its best
            var $redigested = $($this.html());
            // jQuery should produce an array of HTML DOM objects
            for (var i = 0; i < $redigested.length; i++) {
              // if we found an HTMLLinkElement--a <link> tag--followed by a Text element, that's our URL
              if ($redigested[i] instanceof HTMLLinkElement && $redigested.length >= i + 1 && $redigested[i + 1] instanceof Text) {
                item.link = $redigested[i + 1].data;
                break;
              }
            }
            console.log("link: " + item.link);
            var toAdd = "<ul><li> title: " + item.title + "</li><li> link: " + item.link + " </li><li> description: " + item.description + " </li></ul>";
            $("#anotherElement").append(toAdd);
          });
        });
      }

      $(function() {
        // call the fetch function on DOM ready
        fetchFeed("http://www.lemonde.fr/rss/une.xml");
      });

    })(jQuery, window, document);
  </script>
</body>

</html>
&#13;
&#13;
&#13;