合ってるか分からないJSなブログ

strictなXHTMLでは,target=”blank”を書くことは禁止されれています。

ということで、jQueryでそれを実現してしまいましょうというTips。
サンプルはこちらを御覧下さい。

まず、headの中に

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$('a[rel=_blank]').click(function(){
		this.target = "_blank";
	});
});
</script>

↑と書きます。(説明は後述)

そして、別ウインドウで開きたいリンクに

<a href="http://www.google.co.jp/" rel="_blank">blankだ </a>

↑このように「rel=”_blank”」を追加します。
 
 
jQueryでは、
$(‘タグ名[属性=値])
とすると、指定のタグのうち「属性=”値”」が設定された要素を検索することができます。
 
今回の例では、$(‘a[rel=_blank]‘)と設定していますので、
aタグのうち「ref=”_blank”」という属性が設定されたaタグのみを抜き出しています。
 
そして検索されたaタグに対して、
「.click( function(){ } );」
を行っているわけですが、これはクリックされたとき{ }の中を実行せよという意味です。
aタグのうち「ref=”_blank”」という属性が設定されたaタグがクリックされたとき、
{ }の中を実行せよと行っているわけですね。
 
 
ではその、{}を見てみましょう。
thisという言葉が現れました。
これはそのまんまですね「コレ」。つまり、検索されたaタグのことですね。
 
このthisに「.target = “_blank”;」がついています。
これはこのまんま。thisに対して「target = “_blank”」をつけろって言ってるわけです。
 
 
注意点としては、たぶんこのTipsは、
strictなXHTMLでは「target = “_blank”」を書けないってだけで、
ブラウザ自体にはこの機能があるので、無理やりつけたっていうTipsになります。
したがって、HTML5の時代になっても通用する方法なのかは、正直疑問はあります。
正しくやるとすれば、LightBox系のライブラリや擬似ウインドウライブラリを利用するべきでしょう。

コメント

コメント(2) “target=”_blank”をjQueryで実現”

  1. Surprisingly well-wretitn and informative for a free online article.

コメントする