0

第一个.get()功能在所有浏览器中都能正常工作，而第二个功能只在 Firefox 中每次都有效，在 Chrome 中大约每秒钟一次，在 IE 中根本不工作。

代码被包装在一个$(document).ready函数中，所以它不应该是页面加载的问题。

第一个.get()函数从 RSS 提要中获取最新消息并将它们发布到<ul>. 第二个.get()函数从不同的 RSS 提要获取相同的内容并以类似的方式发布它们，但不同之处在于它还获取图像源，并且我<canvas>在代码的最后部分将这些图像绘制到元素中。

即使没有将图像绘制到画布元素中，也没有获取图像源，第二个 .get() 函数也不会在 Chrome 中每次都有效，在 IE 中也不会。第一个每次都适用于所有浏览器。

我还使用类似的代码将一些其他图像绘制到画布元素中，并且它随时随地都能正常工作。

//The first, working .get() function:
$.get("rss-url", function (data) {
    var $xml = $(data);
    var $i = 0;
    $xml.find("item").each(function () {
        var $this = $(this),
            item = {
                title: $this.find("title").text(),
                link: $this.find("guid").text(),
                pubDate: $this.find("pubDate").text(),
            }
        //Do something with item here...
        if ($i < 10) {
            var pv = new Date(item.pubDate).toLocaleString();
            $("#uutiset_latest > ul").append("<li><a href=" + item.link + ">" + item.title + "</a><br>" + pv + "</li>");
        }
        $i++;
    });
});


//Second, not so working .get() function:

$(function () {
    var img0, img1, img2;
    $.get("rss-url", function (data) {
        var $xml = $(data);
        var $i = 0;
        $xml.find("item").each(function () {
            var $this = $(this),
                item = {
                    title: $this.find("title").text(),
                    link: $this.find("guid").text(),
                    pubDate: $this.find("pubDate").text(),
                    pic: $this.find("description").html()
                }
            if ($i < 3) {
                var pv = new Date(item.pubDate).toLocaleString();
                var parsed = $('<div/>').html(item.pic);
                var picSrc = parsed.find("img").attr("src");
                $("#right_column_feed > ul").append("<li><a href=" + item.link + ">" + item.title + "</a><div id='tsemppi_div" + $i.toString() + "'><canvas id='tsemppi_canvas" + $i.toString() + "' width='150' height='100' class='tsemppi_canvas'></canvas></div>" + pv + "</li>");
            }
            switch ($i) {
                case 0: img0 = picSrc; break;
                case 1: img1 = picSrc; break;
                case 2: img2 = picSrc; break;
            }
            $i++;
        });
        drawImages2();
    });

//the function to draw the images into <canvas> elements:

    function drawImages2() {
        var imgWidth = 150;
        var imgHeight = 100;
        var $z = 0;

        $(".tsemppi_canvas").each(function () {
            var ctx = document.getElementById("tsemppi_canvas" + $z.toString()).getContext("2d");
            var canvImage = new Image();
            canvImage.onload = function () {
                ctx.drawImage(canvImage, 0, 0, imgWidth, imgHeight);
            }
            switch ($z) {
                case 0: canvImage.src = (img0); break;
                case 1: canvImage.src = (img1); break;
                case 2: canvImage.src = (img2); break;
            }
            $z++;
        });
    };
});

所有这些功能都在同一个 .js 文件中，图片、网页和 rss 提要与 .js 文件在同一个服务器上。

4

1 回答 1

0

好的，我想通了，就是这一行：

pic: $this.find("description").html()

我将其更改为获取文本，而不是 html，现在它可以在每个浏览器中使用：

pic: $this.find("description").text()
于 2013-07-25T09:01:11.713 回答