Question

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

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

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

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

我也使用类似的代码将一些其他图像绘制到canvas元素中，并且它可以在任何地方和每次都正常工作。

//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文件位于同一服务器上。

Answer 1

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

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

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

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

Jquery两个.get（）函数的工作方式不同

1 个答案: