アキラのＩＴメモ：targetを使わないで新しいウインドウを開く

昔はよくリンク先を新しいウインドウを開くのにtarget属性なんかが使われていたものですが、(X)HTML Strictでは廃止される方向になり、HTML4.01 Strict、XHTML1.0 Strict、XHTML1.1なんかでページを作りたいときにはどうやれば良いのやらと思ってました。targetそのものを使わないので特に気にしてなかったのですが、知人のサイト作成を手伝った時に必要になったのでざっと調べてみました。

まず、targetを使う方法はおなじみの以下の方法で出来ます。

<a href="test.html" target="_blank">test</a>

JavaScriptを使えば以下のように書くことで同等の事ができます。ただし、JavaScriptが使えない環境では新しいウインドウが開かずにリンク先に飛びます。

<a href="test.html" onclick="window.open('test.html'); return false;">
test</a>

これだけだとあまりネタ的に弱いので他に調べてみると、簡単にウインドウを開いてリンク先に飛ばすように出来るスクリプトを見つけました。

var PopupWindow = Class.create();
PopupWindow.prototype = {
 initialize: function(className, parentElement) {
  var elements 
        = document.getElementsByClassName(className, parentElement);
  for (var i = 0, len = elements.length; i < len; i++) {
   Event.observe(elements[i], 'click', 
                 this.addPopupEvent.bindAsEventListener(this));
   Event.observe(elements[i], 'keypress', 
                 this.addPopupEvent.bindAsEventListener(this));
  }
 },
 addPopupEvent: function(event) {
  var element = Event.element(event);
  var link = element.getAttribute('href');
  window.open(link);
  Event.stop(event);
 }
}; 
Event.observe(window, 'load', function () {
 new PopupWindow('popup');
}); 

このスクリプトを読ませておくと、こんな感じで書くだけで良いみたいです。スマートになりますね。。

<a class="popup" href="test.html">test</a>

JavaScriptはあまり分かってないので、もうちょっと勉強したいです。Ajaxとかも使いたいし、GoogleMapsAPIなどのWebサービスAPIを使いこなしたいし。。時間あるかな。

コメントを投稿