リンクターゲットの設定

広告

FeedControlを利用して各フィードのエントリが表示された時、エントリの概要を表示し概要に対して元記事へのリンクが設定されます。ここではリンクがクリックされた時にどのようにリンク先が表示されるのかを設定する方法を解説します。

1.setLinkTargetメソッド
2.サンプル

setLinkTargetメソッド

リンク先の表示方法を設定するにはFeedControlクラスで用意されているsetLinkTargetメソッドを使います。 

setLinkTarget(linkTarget)

引数にはHTMLのaタグに対するtarget属性と同じ意味合いを持つ値を設定します。設定可能な値は次の通りです。 

google.feeds.LINK_TARGET_BLANK    新しいウィンドウ
google.feeds.LINK_TARGET_SELF     現在のウィンドウ
google.feeds.LINK_TARGET_TOP      フレームを解除して表示
google.feeds.LINK_TARGET_PARENT   親フレーム
フレーム名                        任意のフレーム

なおデフォルトの値は google.feeds.LINK_TARGET_SELF です。明示的に設定を行う場合は次のように記述します。 

google.load("feeds", "1");

function initialize() {
  var control = new google.feeds.FeedControl();
  control.setLinkTarget(google.feeds.LINK_TARGET_BLANK);

  control.addFeed("http://www.example.com/rss", "SampleSite");
  control.addFeed("http://www.example.jp/rss", サンプルブログ");

  control.draw(document.getElementById("feed"));
}

google.setOnLoadCallback(initialize);

今回は google.feeds.LINK_TARGET_BLANK を設定していますので、エントリに設定されたリンクをクリックすると新しいウィンドウが立ち上がって表示されます。

サンプル

それでは簡単なサンプルで試してみます。 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>Google AJAX Feed API テスト</title>

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="./js/script4_1.js"></script>

</head>
<body>

<p>Google AJAX Feed API テスト</p>
<div id="feed"></div>

</body>
</html>

google.load("feeds", "1");

function initialize() {
  var control = new google.feeds.FeedControl();
  control.setLinkTarget(google.feeds.LINK_TARGET_BLANK);

  var feedurl1 = "http://googlejapan.blogspot.com/atom.xml";
  var feedurl2 = "http://googleblog.blogspot.jp/atom.xml";

  control.addFeed(feedurl1, "Google Japan");
  control.addFeed(feedurl2, "Official Google Blog");

  control.draw(document.getElementById("feed"));
}

google.setOnLoadCallback(initialize);

上記を実際にブラウザ見てみると次のように表示されます。

p4-1

出力されたエントリのリンクをクリックすると新しいウィンドウの中にリンク先が開きます。

p4-2

このようにリンク先のターゲットを指定することが可能です。

( Written by Tatsuo Ikura )