所以我正在尝试制作一个 Chrome 扩展程序，它以查询的形式接收用户输入，从 Flickr 的 API 中获取与该查询相关的图像（有效地搜索查询），然后放置它们，以及指向他们的位置，在页面上。我从一个教程网站上偷了它，它的示例扩展在没有用户输入和链接的情况下完成了上述操作。我试图自己做链接，但我失败了，所以不得不在这里寻求帮助。现在，我在设置用户输入方面失败了。我首先尝试了 PHP，它使我的 chrome 崩溃了，因为它显然在扩展中不起作用，所以现在我正在尝试一直使用 JS。我尝试为我的搜索表单做一个 onsubmit 事件，然后我意识到我必须将所有代码都放在{}我的 onsubmit 函数。不幸的是，由于在 JavaScript 中声明变量的方式，它不起作用，因为如果一切都在一个函数中，那么所有声明的变量都呈现为private。因此， main 中的其他功能无法使用它们，从而使脚本无用。理想的解决方案是在函数中声明公共变量，不幸的是，在搜索了半个小时后，我找不到任何可行的方法/我理解的方法。有人可以帮帮我吗？我会对任何其他方法感到非常满意，如果你告诉我我的所有预测都是错误的以及为什么 - 我会很高兴。
到目前为止我的代码：
var req = new XMLHttpRequest();
req.open(
"GET",
"http://api.flickr.com/services/rest/?" +
"method=flickr.photos.search&" +
"api_key=90485e931f687a9b9c2a66bf58a3861a&" +
"text=cake&" +
"safe_search=1&" +
"content_type=1&" +
"sort=relevance&" +
"per_page=24",
true);
req.onload = showPhotos;
req.send(null);
function showPhotos() {
var photos = req.responseXML.getElementsByTagName("photo");
for (var i = 0, photo; photo = photos[i]; i++) {
var photos = req.responseXML.getElementsByTagName("photo");
var a = document.createElement("a");
a.setAttribute("href",constructImageURL(photo));
a.setAttribute("target","_blank");
var img = document.createElement("img");
img.setAttribute("src",constructImageURL(photo));
a.appendChild(img);
document.getElementById("images").appendChild(a);
}
}
function constructImageURL(photo) {
return "http://farm" + photo.getAttribute("farm") +
".static.flickr.com/" + photo.getAttribute("server") +
"/" + photo.getAttribute("id") +
"_" + photo.getAttribute("secret") +
"_s.jpg";
}
这没有我失败的 onsubmit 代码。HTML 页面本身只包含一个导入上述脚本的标签、一个用于图像的 div 和一个表单：
<div id="images">
</div>
<form name="queryForm" onsubmit="javascript: querySubmit()">
Search: <input type='text' name='query'>
<input type="submit" />
</form>
有人可以帮忙吗？