0

さて、Chrome拡張機能を作ろうとしています。私はこれにかなり慣れていないので、チュートリアル サイトから拡張機能の例を取得し、それに何かを追加することから始めました。覚えていないサイトから入手しました。本当に帰属が必要な場合は、検索できます。コード：

var req = new XMLHttpRequest();
req.open(
"GET",
"http://api.flickr.com/services/rest/?" +
    "method=flickr.photos.search&" +
    "api_key=90485e931f687a9b9c2a66bf58a3861a&" +
    "text=hello_world&" +
    "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 img = document.createElement("image");
    img.src = constructImageURL(photo);
    document.getElementById("images").appendChild(img);
  }
}

function constructImageURL(photo) {
  return "http://farm" + photo.getAttribute("farm") +
  ".static.flickr.com/" + photo.getAttribute("server") +
  "/" + photo.getAttribute("id") +
  "_" + photo.getAttribute("secret") +
  "_s.jpg";
}

とにかく、拡張機能が行うことは、XMLHttpRequest を Flickr の API に送信し、いくつかの画像 (XML 形式の img タグ) を取得することです。次に、これらのタグを for ループでループし、すべてのタグに対して createElement() を使用して新しい img 要素を作成し、constructImageURL() 関数を使用して src 属性を与え、ポップアップ ページに追加します。私がやりたかったのは、実際にそれらの画像をクリックして画像のページに移動できるようにすることです。画像要素を作成するコードに基づいてコードのスニペットを作成しようとしましたが、for ループに追加したアンカー (a) 要素を作成しました。次のようになります。

var a = document.createElement("link");
a.href = constructImageURL(photo);
a.target = "_blank";
document.getElementById("images").appendChild(a);

次に、 img 要素をアンカー要素に追加するコードを追加して、効果的に<a><img /></a>構造を作成しました。

document.a.appendChild(img);

しかし、うまくいきません。誰か助けてくれませんか？

4

1 に答える 1

1

ブラウザ アクションを右クリックし、[Inspect popup] をクリックして開発者ツール コンソールをチェックし、何が問題なのかを確認する必要があります。

setAttribute念のため、を使用したいと思うかもしれません。リンクの要素は<a>ではなく<link>、画像の要素も ではあり<img>ません<image>。また、画像を現在の変数document.a.appendChildに追加したいわけではありません。したがって、次のようになります。

function showPhotos() {
    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);
}
于 2012-05-30T04:42:57.390 に答える