【DOM】XHTMLにおける、　Aタグでtargetを使わないやり方。

2011年8月2日 9:14 PM

XHTMLになり、aタグのtargetが非推奨になり、XHTML1.1では廃止ですので、targetを使わない別リンクへの移動方法をJavascriptで行おうというメモ。

target=”_blank”は、記述も簡単で便利だったが、ユーザビリティに配慮し強制でウィンドウを移動するのはユーザが選択するべき事項で、サイト側で指定するものではないとの事ですので、JavaScriptで以下のように記述する事にしました。

色んな参考書を参考にして使用していますが、ご了承ください。

説明時のサーバー内ディレクトリは以下のようになっています。

index.html
└　 js
├ dom.js
└set.js

—HTMLファイル内（index.html）—

ヘッダー内に以下の行を追加

<script type=”text/javascript” src=”./js/dom.js”></script>
<script type=”text/javascript” src=”./js/set.js”></script>

body内のリンクがある部分に記述：以下は例題

<div id=”event”>
<a href=”http://www.explowd.co.jp/”> <img src=”./img/banner_jp.jpg” alt=”” width=”234″ height=”60″ /> </a>
</div>

—JavaScriptファイル内—

（  dom.js  ）

var dom = new Object();
dom.event = new Object();
dom.event.addEventListener = function(elm, type, func, useCapture) {
if(! elm) {return false; }
if(! useCapture) { useCapture = false; }
if(elm.addEventListener) {
elm.addEventListener(type, func, false);
} else if(elm.attachEvent) {
elm.attachEvent(‘on’+type, func);
} else {
return false;
}
return true;
};

dom.event.removeEventListener = function(elm, type, func, useCapture) {
if(! elm) { return false; }
if(! useCapture) { useCapture = false; }
if(elm.removeEventListener) {
box.removeEventListener(type, func, false);
} else if(elm.detachEvent) {
elm.detachEvent(‘on’+type, func);
} else {
return false;
}
return true;
};

dom.event.target = function(evt) {
if(evt && evt.target) {
if(evt.target.nodeType == 3) {
return evt.target.parentNode;
} else {
return evt.target;
}
} else if(window.event && window.event.srcElement) {
return window.event.srcElement;
} else {
return null;
}
};

dom.event.preventDefault = function(evt) {
if(evt && evt.preventDefault) {
evt.preventDefault();
evt.currentTarget[‘on’+evt.type] = function() {return false;};
} else if(window.event) {
window.event.returnValue = false;
}
};

dom.event.stopPropagation = function(evt) {
if(evt && evt.stopPropagation) {
evt.stopPropagation();
} else if(window.event) {
window.event.cancelBubble = true;
}
};

————（  dom.js  ）ここまで——————–

（  set.js  ）

dom.event.addEventListener(window, ‘load’, initDocument);

function initDocument() {

var event = document.getElementById(‘event’).childNodes;
for(var i=0; i<event.length; i++) {
var elm = event.item(i);
if(elm.tagName != “A”) {
continue;
}
dom.event.addEventListener(elm, ‘click’, openWin);
}

}

function openWin(evt) {
dom.event.preventDefault(evt);
var target = dom.event.target(evt);
var url = target.parentNode.href;
var w = window.open(url);
w.focus();
}

————（  set.js  ）ここまで——————–

※緑文の部分は、使用方法により置き換えてください。
例では、<div id=”event”></div>内にある<a>だけにonclick要素でopenwin関数を呼び出すようにinitDocumentで指定しています。
div内には、何個でもあaタグを含める事ができます。
後は応用してみてください。
※dom.jsの後に、set.jsをヘッダー内に記述してください。
※青色部分は、aタグ内が画像ではなくテキストの場合は、削除してください。

以下がjsファイルです。気に入ったら使ってください。

index.txt ※保存したら拡張子をhtmlに変えてくださいね。

dom.js
set.js

カテゴリー：JavaScript, Tips ： コメント（0）