Question

我想在chrom扩展http://code.google.com/chrome/extensions/getstarted.html上添加一个用于入门示例（Hello，World）的搜索框，我能够添加一个搜索框，以便我可以更改单词用于获取不同的缩略图（ “文本问候=％20world”）。

我面临的问题是如何使用新的缩略图刷新内容，例如：

如果我想搜索耶路撒冷一词并点击“转到”按钮，内容（缩略图）将使用新的耶路撒冷缩略图进行更新

我需要使用AJAX吗？请解释一下。

Thanx寻求帮助。

==================== 我在popup.html中包含了jquery

在showPhotos（）函数中，我做了以下内容：

function showPhotos() {
//Remove previous thumbs if any
for (var i = document.images.length; i-- > 0;) document.body.removeChild(document.images[i]);

var photos = req.responseXML.getElementsByTagName("photo");
for (var i = 0, photo; photo = photos[i]; i++) {
    var img = document.createElement("image");
    var span = document.createElement("span");
    var span1 = document.createElement("span");

    $(span1).attr('id', 'innerSpan');
    $(span1).attr('style', 'text-align:center;color:#ffffff;');
    $(span1).addClass('tooltip black bottom center w100 slide-up');
    $(span1).html('<i>' + photo.getAttribute("title") + '</i>');

    $(span).addClass('savytip');
    $(span).attr('id', 'outerSpan');

    $(img).attr('src', constructImageURL(photo));

    $(span1).appendTo(span);
    $(img).appendTo(span);

    $(span).appendTo('body');
}}

扩展只是第一次工作而go按钮停止响应，我的代码中哪里错了？

Answer 1

此示例已使用AJAX，即XHR（XMLHttpRequest）。您需要做的就是将请求放在一个函数中，以便以后再次调用它。此外，您需要在添加新的拇指之前删除它们（请参阅“showPhotos”功能的第一行）。

这是一个有效的例子：的 popup.html

<html> <head> <script type="text/javascript" src="popup.js"></script> <link rel="stylesheet" type="text/css" href="popup.css"> </head> <body onload="search()"> <input id="query" value="Hello World"><input type="button" value="go" onclick="search()"> </body> </html>

<强> popup.js

function search() { request(document.getElementById('query').value); return false; } function request(query) { window.req = new XMLHttpRequest(); req.open( "GET", "http://api.flickr.com/services/rest/?" + "method=flickr.photos.search&" + "api_key=90485e931f687a9b9c2a66bf58a3861a&" + "text="+encodeURI(query)+"&" + "safe_search=1&" + // 1 is "safe" "content_type=1&" + // 1 is "photos only" "sort=relevance&" + // another good one is "interestingness-desc" "per_page=20", true); req.onload = showPhotos; req.send(null); } function showPhotos() { //Remove previous thumbs if any for(var i=document.images.length;i-->0;) document.body.removeChild(document.images[i]); var photos = req.responseXML.getElementsByTagName("photo"); for (var i = 0, photo; photo = photos[i]; i++) { var img = document.createElement("image"); img.src = constructImageURL(photo); document.body.appendChild(img); } } // See: http://www.flickr.com/services/api/misc.urls.html function constructImageURL(photo) { return "http://farm" + photo.getAttribute("farm") + ".static.flickr.com/" + photo.getAttribute("server") + "/" + photo.getAttribute("id") + "_" + photo.getAttribute("secret") + "_s.jpg"; }

<强> popup.css

body { min-width:357px; overflow-x:hidden; } img { margin:5px; border:2px solid black; vertical-align:middle; width:75px; height:75px; }

添加搜索框以开始搜索框

1 个答案: