« 記事のリンク先を別ウィンドウに開くように変えました | Main | うおおっ! »

2006.04.16

JavaScriptを使ってリンクを別ウィンドウで表示する方法

昨日書いた、JavaScriptを使ってリンクを別ウィンドウで表示するようにするのって、意外とポピュラーな話題のようですね。ググって見たところ、興味がある人も多い感じです。というわけで、ざっとやり方を書いてみます。なお、center、entry-bodyなど、ココログに依存するようなものを使っているので、一応ココログ専用という感じになります(いくらか変更すれば他のシステムでも使えるでしょう)。


○手順

ソース1の内容をHTMLのヘッダ部分などに加えます。もしくは、ソース1の内容(ただし最初と最後の1行を削除)をファイルに書き込んでサイト上に置き、そのファイルをソース2のように参照するものをヘッダに部分に埋め込むという方法もあります。他にもJavaScript関数定義がいろいろあったりするのであれば後者の方がすっきりすると思います。そうでなければ前者のように直接埋め込んでもよいでしょう。
(ココログ利用上の制限のため、字下げが消えてしまい見にくいソースになっていますがご容赦下さい)

次に、HTMLのどこかにソース3の内容を埋め込みます。ただし本文より後ろの位置に入れないと、JavaScript実行時点で手を加えるべきリンクが画面上にないために効果が出ない可能性がありますのでご注意下さい。

単に別ウィンドウで表示するようにするだけならここまででよいのですが、もしユーザーが別ウィンドウで表示しないように選べるようにする場合は、ソース4をHTMLのどこか、記事中でもよいし左右のバナー部分でもよいので追加してください。ただしこの設定は画面のリロードによって元に戻ります(別ウィンドウで表示する)のでご注意下さい。設定を保存したりするにはもっと手を加えないと出来ません。

では、興味ある方は各自トライしてみてください!分かりにくい部分などあればコメントで質問お願いします。


○ソースなど

ソース1:
<script type="text/javascript"><!--
function addTargetBlank(){
setTargetBlank(true);
}

function delTargetBlank(){
setTargetBlank(false);
}

function setTargetBlank(adddel){
var i,j,divs,div,links,link;
divs=document.getElementById("center").getElementsByTagName("div");
for(i=0; i<divs.length; i++){
div=divs[i];
if(div.className == "entry-body"){
links=div.getElementsByTagName("a");
for(j=0; j<links.length; j++){
link=links[j];
if(adddel){
link.setAttribute("target","_blank");
}else{
link.removeAttribute("target");
}
}
}
}
}
//--></script>


ソース2:
<script type="text/javascript" src="/blog/files/maido.js"></script>


ソース3:
<script type="text/javascript"><!--
addTargetBlank();
//--></script>


ソース4:
リンク先を別ウィンドウで開く: <input type="checkbox" checked="checked" onclick="if(this.checked){addTargetBlank()}else{delTargetBlank()}" />

|

「ウェブログ・ココログ関連」カテゴリの記事

TrackBack

TrackBack URL for this entry:
http://app.cocolog-nifty.com/t/trackback/14497/9613970

Listed below are links to weblogs that reference JavaScriptを使ってリンクを別ウィンドウで表示する方法:

Comments

スカイプに虜になり自分でホームページを作り始め、説明するのに、このjavaスクリプトを早速使ってみます。スカウプも使ってくださいね。便利な特長と詳細をこちらにwww.skypetokyo.com説明しました。

Posted by: Yonemoto | 2006.06.14 at 09:38 PM

Yonemotoさんどうもです。
使っていただけるとありがたいです。

変なところとかあったらいってくださいね。出来るだけ頑張ります(^^)

Posted by: カズヒロ(管理者) | 2006.06.15 at 08:26 PM

カズヒロ様

ありがとうございます。有効に役に立たせていただきます。
http://www.skypetokyo.com

スカイプ東京

Posted by: SkypeTokyo | 2006.06.27 at 07:11 AM

Post a comment



(Not displayed with comment.)




[関連書籍等の紹介]