问题描述
我试图在JavaScript中为Chrome编写一个xkcd扩展。
要获取最新映像的网址,我从并尝试解析它。很明显,这并不奏效。
无法正确解析json,弹出窗口中显示的图像也不是硬编码网址。如何解决这些问题?
所以我的问题是:
-
如何从json中检索图片url?
-
如何将图片插入到弹出窗口?
这里是我的代码:
(我跟着一个教程,这就是为什么还有一些闪烁的片段留下来...)
manifest.json:
{
name: xkcd扩展名,
version:1.0,
description:我创建的第一个xkcd扩展名。,
browser_action:{
default_icon :icon.png,
popup:popup.html
},
权限:[
http://www.xkcd.com /
}
popup.html:
<!doctype html>
< html>
< head>
< title>入门Extension的弹出式菜单< / title>
< style>
body {
min-width:357px;
overflow-x:hidden;
}
img {
margin:5px;
border:2px纯黑色;
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>
var img = document。 createElement(image);
当然应该是
var img = document.createElement(img);
I'm trying to write an xkcd extension for chrome in javascript.To obtain the url to the latest image, I fetch the JSON from http://dynamic.xkcd.com/api-0/jsonp/comic/ and try to parse it. Obviously, that doesn't quite work.
Neither is the json parsed correctly, nor is the image from the hardcoded url shown in the popup. How can I solve these problems?
So my questions are:
How can I retrieve the image url from the json?
How can I insert the image to the popup?
Here is my code:(I followed a tutorial, that's why there's still some flicker-snippets left...)
The 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/" ] }
The popup.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>
var img = document.createElement("image");
should definitely be
var img = document.createElement("img");
这篇关于解析json并在popop中显示图像的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!