btmup Blog

Web 制作のことを中心に、ちょっとした Tips などを掲載しています。「自分用メモ」が基本スタンス。

JavaScript・jQuery

yuga.js で、外部リンクを別ウィンドウで開く機能を area 要素にも適用する方法。

投稿日:

小ネタです。
JavaScript が分かる人なら何の造作もないことなんですけど、分からなくて困ってる人が居るかも知れないので一応メモ。

設定方法

yuga.js の「外部リンクは別ウィンドウで開く」という機能は、デフォルトでは a 要素にのみ適用されます。
その記述がされているのは、以下の箇所(バージョン 0.7.1 で 148 行目)。

var e = $('a[href^="http://"]').not('a[href^="' + uri.schema + '://' + uri.host + '/' + '"]');

つまり、「a 要素の href 属性に、先頭が http:// の文字列が設定されていたら」という条件になっているわけです。
(ちなみに後半の「.not」以降は、URL が同じドメインだった場合、別ウィンドウで開く対象から外す、という処理(「ドメイン」って言っていいのかどうか分からないですけど))

なので、ここに条件を追加してやれば、a 要素以外でも別ウィンドウで開いてくれるようになるわけですね。
結果として、以下のようになります。

var e = $('a[href^="http://"], area[href^="http://"]').not('a[href^="' + uri.schema + '://' + uri.host + '/' + '"]');

作業内容としては、コピペしてカンマでつないで「a」を「area」に書き替えるだけです。

仕組みとしては単純なので、必要に応じて色々対応できそうですね。

逆に、「異なるドメインへのリンクでも、別ウィンドウで開く対象から外したい」という場合は、別記事に書いてますのでそちらをご覧ください。
»yuga.js で、別ウィンドウで開かないドメインを追加する方法。

小ネタでした~。







-JavaScript・jQuery
-, , , ,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

yuga.js で自ページへのリンクを設定している画像がロールオーバーしてくれない。

yuga.js という非常に便利な JavaScript があります。 多くの機能が一つにまとまっていて、使い方も簡単で重宝させていただいているのですが、今回はその多機能が故にハマってしまったという例 …

no image

jQuery で奇数番目・偶数番目を指定するときの注意点。

ちょっとはまったのでメモ。 リストやテーブルに対して、jQuery で奇数番目・偶数番目の要素を指定するときの注意点です。 例えば、以下のような HTML があるとします。 <ul id=”li …

no image

アクセシブルなスライダーをJavascriptで実現 – 「Accessible News Slider」

ここで言う「スライダー」とは、「同じ構造の要素を限られたスペースで表示するために、要素ごとスライドさせて表示させるためのもの」という意味。 (↓こんなのです) 音量を調整するような「つまみ」のことでは …

no image

JavaScriptによるシンプルなロールオーバー。

ものすごくシンプルで使いやすいロールオーバーをご紹介。 最近、特別な理由がない限りこの方法でロールオーバーの設定をしています。 オリジナル版 使うのは「CSS HappyLife」さんの「ソースがシン …

no image

リンクしているパスから JavaScript(jQuery)でファイル名を抽出する方法。

PHP には「basename()」や「dirname()」という便利な関数があり、それぞれファイル名とディレクトリ名を、指定したパスから抽出することができます。 しかし、JavaScript にそん …