解析json并在popop中显示图像

我正在尝试在javascript中为Chrome编写一个xkcd扩展。要获取最新图像的网址，我从http://dynamic.xkcd.com/api-0/jsonp/comic/获取JSON并尝试解析它。显然，这并不奏效。解析json并在popop中显示图像

无论是json解析正确，也没有从弹出窗口中显示的硬编码URL的图像。我该如何解决这些问题？

所以我的问题是：

我怎样才能检索JSON的图像网址是什么？
如何将图像插入弹出窗口？

这里是我的代码：（我也跟着教程，这就是为什么有仍然留下了一些闪烁的片段...）

在manifest.json：

{ 
"name": "xkcd extension", 
"version": "1.0", 
"description": "The first xkcd extension that I made.", 
"browser_action": { 
    "default_icon": "icon.png", 
    "popup": "popup.html" 
}, 
"permissions": [ 
"http://www.xkcd.com/" 
] 
}

弹出html的：

<!doctype html> 
<html> 
<head> 
    <title>Getting Started Extension's Popup</title> 
    <style> 
     body { 
      min-width:357px; 
      overflow-x:hidden; 
     } 

     img { 
      margin:5px; 
      border:2px solid black; 
      vertical-align:middle; 
      width:300px; 
      height:300px; 
     } 
    </style> 

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"> 
    </script> 
    <script> 
     showPhotos(); 

     function showPhotos() { 
      //    var url="http://xkcd.com/info.0.json"; 
      var url = "http://dynamic.xkcd.com/api-0/jsonp/comic/"; 
      alert(url); 
      //    var imgURL; 
      //    $.getJSON(url, function(data) { 
      //     alert(data.img); 
      //     imgURL=data.img; 
      //    }); 
      //alert(imgURL); 

      var img = document.createElement("image"); 
      alert(img); 
      img.src = 'http://imgs.xkcd.com/comics/wrong_superhero.png'; 
      alert(img.src); 
      document.body.appendChild(img); 
     } 

    </script> 
</head> 
<body> 
    <div id="result"> 
    </div> 
</body> 
</html>

来源

2012-02-05 bogus

var img = document.createElement("image");

绝对应该

var img = document.createElement("img");

来源

2012-02-05 16:30:30

谢谢，我改变了这一点。但是，为什么漫画不显示？ – bogus 2012-02-05 16:37:22

我知道[此线程]（http://stackoverflow.com/questions/9140632/parse-json-from-url），但由于未知原因getJSON只是不给我想要的属性 – bogus 2012-02-05 17:19:59

行，其他的一点是，在你的DOM（特别是“document.body”）准备就绪之前，你正试图调用'showPhotos（）**。而不是直接调用'showPhotos（）'，而是在一个'onload'处理函数中调用它：'> - 这对我有用。 – 2012-02-06 07:23:48

解析json并在popop中显示图像

回答

相关问题