<script type="text/javascript"> <!-- window.onload = function() { for (var i = 0; i < document.links.length; i++) { var ele = document.links[i]; if (ele.href.match(/^http/)) { ele.target = "_blank"; } } } // --> </script>
アンカーに target="_blank" を指定しなくても、ページ内にあるリンクを全て新しいウィンドウで開きます。
上記のソースを追加するだけで <base target="_blank"> とほぼ同様の効果が得られます。ただし、フォームの送信や javascript スキームを使用したリンクは適用されません。
<script type="text/javascript"> <!-- window.onload = function() { for (var i = 0; i < document.links.length; i++) { var ele = document.links[i]; if (ele.href.match(/^http/)) { ele.onclick = openwin; } } } function openwin() { var url = this.href; if (document.all && !window.opera) { if (url.match(/[^\x21-\x7E]/)) { if (!window.createPopup) { this.target = "_blank"; // IE 5.5 未満は target="_blank" を適用して終了 return true; } url = escape(url); // 取得 URL をエスケープ url = decodeURIComponent(url); // エスケープした文字列をデコード url = encodeURI(url); // 正常な URI に URL エンコード } } window.open(url); return false; } </script>
これは、ページ内の http から始まる全てのリンクに onclick="openwin();" というイベントハンドラを適用して、クリックされると関数 openwin を呼び出します。
リンクをクリックすると適用しておいたイベントハンドラによって関数 openwin が呼び出され、クリックされたリンクの href 値を取得して、リンク先を window.open() によって開き、本来のクリックによる動作を無効化するために false を返します。
Internet Explorer (IE) の場合、クリックによって取得した href 値(変数 url)が自動的に unescape された値になってしまうため、2バイト文字を URL エンコードした文字列が存在する場合(たとえば http://www.example.com/%E3%81%82%E3%82%93%E3%81%BD%E3%82%93%E3%81%9F%E3%82%93 のような URL)に unescape されてしまうと URI に使用できない文字列(不正な文字列)になってしまうため escape() で元に戻してさらに正常な URI (URL) にします。※この問題は IE 7 で解消されましたので、IE 7 以降では問題ありません。
また、IE 5.5 未満で上記に一致した場合は encodeURI(), encodeURIComponent() と decodeURI(), decodeURIComponent() が使用できないため、target 値を _blank として適用してリンク先を開きますので window.open() からは開かれません。
なお、if (encodeURI) や if (decodeURI) のようにして使用可能かどうかのチェックはできません。このような場合は typeof を使用すれば判別できますが、ここでは IE 5.5 未満を除外したいので window.createPopup による IE のバージョンチェックをします。(window.createPopup は IE 5.5 以上で使用可能なメソッドです)※IE 11 では document.all 及び window.createPopup は使用不可になりました。IE11 の互換性の変更点
<script type="text/javascript"> <!-- document.onclick = function(e) { var url, ie; if (document.all) { url = window.event.srcElement.href; ie = (!window.opera) ? 1 : 0; } else if (document.getElementById && e.which == 1) { url = e.target.href || e.target.parentNode.href; } if (url && url.match(/^(https?|ftp):\/\//)) { if (ie && url.match(/[^\x21-\x7E]/)) { if (!window.createPopup) { window.event.srcElement.target = "_blank"; return true; } url = escape(url); url = decodeURIComponent(url); url = encodeURI(url); } window.open(url); return false; } } // --> </script>
このスクリプトは、クリックされたリンクの URL を取得して新しいウィンドウを開きます。
まず、このページがクリックされた時 (document.onclick) にウィンドウを開く関数が呼び出されます。そのときにブラウザによって対象オブジェクトの取得方法が異なるため、ブラウザの判別を行ないます。また、Netscape ではコンテキストメニューからは呼び出しされないようにマウスの左ボタンをクリックされた時のみ呼び出されるようにしておきます。
window.event.srcElement.href; // Internet Explorer, Opera, Google Chrome e.target.href; // Netscape 7.x, Opera, Mozilla Firefox, Google Chrome, Internet Explorer 9 〜 e.target.parentNode.href; // Netscape 6.x
ここで取得した要素の href の値を取得することでリンクの値を取得することができます。引数 e はクリックされたイベントオブジェクトです。
そして、このクリックしたリンクの値が http か ftp で始まる URL かどうか判別してマッチしたらそのリンクを新しいウィンドウで開きます。最後に本来のクリックを無効化するために false を返します。
なお、IE を使用時にクリックによって取得した URL に URL エンコードした文字列がある場合、IE 5.5 未満は target 値を _blank として適用してリンク先を開き、IE 5.5 以上は正常な URI にして window.open() でリンク先を開きます。
ページ内の一部のリンクのみ指定する場合は、マッチ処理の部分を書き換えてください。以下はその例です。
if (url && url.match(/oyoyon/)) {
window.open(url);
return false;
}
if (url && url.match(location.hostname)) { // 自分のサイトのホスト名が含まれるリンクは通常表示 return true; } else if (url && url.match(/^(https?|ftp):\/\//)) { // 上記以外のリンクは新しいウィンドウ表示 window.open(url); return false; }
if (url && url.match(/^(https?|ftp):\/\//)) { window.open(url); } return false;
このようにマッチ処理をして表示するため、任意の文字列を含むリンクのみ新しいウィンドウで開くこともできます。また、一番最後に return false を追加すると、マッチした URL 以外のクリックが全て無効化されるためクリックでは開かなくなります。ただし、JavaScript 無効時やコンテキストメニュー(右クリック)からは開くことができます。(通常の使用ではこの部分は必要ありません)
ウィンドウのプロパティに大きさ等を指定すれば開かれるウィンドウサイズ等を変更することもできますが、マッチした URL 全てに適用されるためご注意ください。