WIZ-CODE.blog

JavaScriptやAjaxをテーマとしたブログです。

*

リンク先を別ウィンドウ表示にするか選択できるようにするには

      2009/10/23

xhtmlがとっくの昔にtarget属性を非推奨・廃止としていることに恥ずかしながら今頃気づいてしまった。ところが、どのサイトでもいまだtarget=”_blank”を当たり前のように使っているのだ。それはさておき、別にWC3に忠誠を示すわけではないけれど、すぐさま自サイトからすべてのtarget=”_blank”を抹消することに。しかし一方で、別ウィンドウでリンクを開けなくなると、何かと困る人も出てくるものである。なので、リンクページのみ、別ウィンドウで表示するか選べるようにした。下記の簡単なJavaScriptコードを書くだけなので、よろしければぜひ利用してみてください。(注:Prototype依存です)

	 
		
リンク先を別ウィンドウで表示する
....... .......  

まずこのようなHTMLを作り、</body>の前などに次のようなJavaScriptをスクリプトを追加します。注意点として、このスクリプトはPrototype.jsに依存していて、Prototype.jsを読み込んでないページではエラーとなるので注意してください。

	 
	new Field.Observer('open_window', 0.3, function() {
		if ($F('open_window')) {
			$$('a').each(function(value) {

			//'a'の部分はそのままだとページ全体のリンクに適用されてしまいます。
			//そのため、liタグ内のリンクに限定したいならば'li a'、
			//pタグ内のリンクに限定するならば'p a'などと変更する必要があります。

				value.writeAttribute('target', '_blank');
			});
		}
		else {
			$$('a').each(function(value) {
				value.writeAttribute('target', '_self');
			});
		}
	});
	 

 - JavaScript/Ajax ,