使用 Javascript 从 Atom 提要中提取图像源答案

【问题标题】：Extracting the source of an image from an Atom feed using Javascript使用 Javascript 从 Atom 提要中提取图像源
【发布时间】：2012-06-21 22:13:50
【问题描述】：

我正在为 Blogger 网站开发一个小工具。我想使用 Javascript 从网站提要（Atom）中带有特定标签的前四个帖子中获取标题、链接和第一张图片。到目前为止，我有来自这些帖子的标题和链接，并在小工具中显示为 HTML。代码如下：

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="Retrieve Featured Blog Posts" height="150" author="John Behan" />
<Content type="html">
    <![CDATA[
        <script type="text/javascript" src="http://www.google.com/jsapi"></script>
        <script type="text/javascript">
            google.load("feeds", "1");              
        </script>
        <script type="text/javascript">
            function initialize() {

                var feed = new google.feeds.Feed("http://test-ohomind.blogspot.com/feeds/posts/default/-/featured");
                feed.load(function(result) {
                    if (!result.error) {
                        var container = document.getElementById("feed");
                        for (var i = 0; i < result.feed.entries.length; i++) {
                            var entry = result.feed.entries[i];

                            var myElement = document.createElement('div');
                            var content = entry.content;
                            myElement.innerHtml = content;

                            var imagesrc = myElement.getElementsByTagName("img")[0].src;

                            var mydiv = document.getElementById("mydiv");
                            var newcontent = document.createElement('p');

                            newcontent.innerHTML = '<a href="' + entry.link + '">' + entry.title + '</a><br />' + imagesrc;

                            while (newcontent.firstChild) {
                                mydiv.appendChild(newcontent.firstChild);
                            }
                        }
                    }

                });
            }
            window.onload = initialize();
        </script>
            <body>

                <div id="mydiv">

                </div>
            </body>
    ]]>
</Content>
</Module>

上面的代码给出了一个空白的小工具和 Firebug 报告

myElement.getElementsByTagName("img")[0] 未定义

我试着改变了一下：

var imagesrc = myElement.getElementsByTagName("img");

在小工具中给出这个

[对象节点列表]

谁能告诉我我做错了什么？我只需要获取第一张图片的来源（src）。小工具的其余部分我可以做，但这个小问题让我在这个阶段完全感到沮丧。

提前致谢。

【问题讨论】：

标签： javascript google-api blogger

【解决方案1】：

我在您的代码中注意到的一个潜在问题是您的 window.onload 实际上正在运行 initialize() 脚本函数，而不是像我相信您的意图那样设置 window.onload = initialize 或 window.onload = function(){initialize()};。

鉴于您的代码在 onload 之前运行，它可以解释为什么 getElementsByTagName 没有拉任何东西

编辑：我还建议查看 Best practice for using window.onload 以了解最佳做法

【讨论】：

嗨，我试过了，得到了同样的结果。如果我只使用行 var imagesrc = myElement.getElementsByTagName("img");小工具返回标题加上链接，然后返回 [object NodeList]。如果我删除图像的代码，我会得到标题和链接。