次のコードがあるとしましょう:
<div id="link_other">
<ul>
<li><a href="http://www.google.com/">google</a></li>
<li>
<div class="some_class">
dsalkfnm sladkfm
<a href="http://www.yahoo.com/">yahoo</a>
</div>
</li>
</ul>
</div>
この場合、JavaScriptはtarget="_blank"
内のすべてのリンクにlink_other
を追加します。
JavaScriptを使用してこれを行うにはどうすればよいですか?
/* here are two different ways to do this */
//using jquery:
$(document).ready(function(){
$('#link_other a').attr('target', '_blank');
});
// not using jquery
window.onload = function(){
var anchors = document.getElementById('link_other').getElementsByTagName('a');
for (var i=0; i<anchors.length; i++){
anchors[i].setAttribute('target', '_blank');
}
}
// jquery is prettier. :-)
また、タイトルタグを追加して、これを実行していることをユーザーに通知し、警告することもできます。
$('#link_other a').attr('target', '_blank').attr('title','This link will open in a new window.');
非jquery:
// Very old browsers
// var linkList = document.getElementById('link_other').getElementsByTagName('a');
// New browsers (IE8+)
var linkList = document.querySelectorAll('#link_other a');
for(var i in linkList){
linkList[i].setAttribute('target', '_blank');
}
これを行うことは、一般にWeb開発者とユーザビリティの専門家によって悪い習慣と見なされていることに留意してください。 Jakob Nielsonは、ユーザーのブラウジングエクスペリエンスの制御を削除することについて次のように述べています。
可能な限り複数のブラウザーウィンドウを生成しないでください。ユーザーから[戻る]ボタンを離すと、ユーザーのエクスペリエンスが非常に痛みを伴うため、提供しようとするメリットをはるかに上回ることがあります。 2番目のウィンドウを生成することを支持する一般的な理論の1つは、ユーザーがサイトを離れないようにすることです。
これが、W3CによってXHTML 1.1仕様から削除されるターゲット属性の理論的根拠だと思います。
あなたがこのアプローチをとることに夢中なら、Pim Jagerのソリューションは良いです。
より良い、よりユーザーフレンドリーなアイデアは、すべての外部リンクにグラフィックを追加し、リンクをたどると外部に移動することをユーザーに示すことです。
Jqueryでこれを行うことができます。
$('a[href^="http://"]').each(function() {
$('<img width="10px" height="10px" src="/images/skin/external.png" alt="External Link" />').appendTo(this)
});
JQueryの使用:
$('#link_other a').each(function(){
$(this).attr('target', '_BLANK');
});
すべての外部リンクにこれを使用します:
window.onload = function(){
var anchors = document.getElementsByTagName('a');
for (var i=0; i<anchors.length; i++){
if (anchors[i].hostname != window.location.hostname) {
anchors[i].setAttribute('target', '_blank');
}
}
}
列をなして:
$('#link_other').find('a').attr('target','_blank');
すべての外部リンクにこれを使用します
$('a[href^="http://"], a[href^="https://"]').attr('target', '_blank');