btmup Blog

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

JavaScript・jQuery

yuga.js で、別ウィンドウで開かないドメインを追加する方法。

投稿日:

yuga.js」という jQuery プラグインが便利すぎて、最近ではほとんどデフォルトで使わせていただいています。

中でも重宝しているのが、「外部リンクの場合は別ウィンドウで開く」という機能。
余計なタグや属性を追加することなく、外部リンクが設定された<a>タグを自動的に判別して、別ウィンドウで開いてくれます。
しかも、同一ドメインのリンクがフルパスで設定されていても、きっちり見分けて同一ウィンドウで遷移します。
class やアイコン画像を追加することもできるなど、充分すぎるくらいに高機能なのです。

ただ、「同一ドメイン以外のフルパスはすべて別ウィンドウ」という動作になるため、「ドメインは違うんだけど同じウィンドウで展開したいなぁ」という場合(共用 SSL を使ってるとか)も新しいウィンドウが開いてしまいます。
「同一ドメイン」以外にも別ウィンドウを開かない URL やドメインを設定できれば良いのですが、そのようなパラメータは残念ながら用意されていないようです。

というワケで、ちょちょっと弄ってみたらいけそうなので、その方法をアップしときます。
(一応ライセンスも確認したんですけど、中身を触っても大丈夫です。よね? ね?)

基本動作を確認

現状の最新バージョンが「0.7.1」なので、それに沿って話を進めます。
もし今後バージョンが変わった場合、同じような記述があるところを適当に見つけてください。

さて、触るところは 148 行目。この1箇所のみです。
デフォルトの状態はこんな↓感じ。

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

実はあまりよく分かってないんですが、要するに「現在のドメインじゃなかったら(not)、<a>タグに設定されている URL で先頭が「http://」の値を変数 e に代入」ということみたいです。
つまり、「not」に設定されている条件を変更(追加)すれば、任意の URL やドメインを別ウィンドウで開かないように設定できそうだということが分かるワケです。

別ウィンドウで開かない値を追加するには

じゃ、どうすれば良いのかというと、単純に URL やドメインを追加するだけです。
「not」に設定されている条件を見ると、

a[href^="' + uri.schema + '://' + uri.host + '/' + '"]

となっており、少々ややこしそうに思えるのですが、これは動的にドメイン(正確には URI のスキーマとホスト名)を拾ってきているためで、静的に決め打ちで設定してやれば、何も難しくありません。

「not」に複数の条件を設定するには、「,」で区切って並べるだけ。
なので、現在設定されているドメイン取得の式はそのまま残しておいて、追加したい(別ウィンドウで開きたくない)URL やらドメインやらを追加してやります。
例えば、「http://www.hoge.com/」を設定する場合は、

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

となります(赤字が追加部分)。

ここで注意するのは、「''」(シングルクォーテーション? アポストロフィ?)で囲われた中にちゃんと入れる、ということくらいでしょうか。
最初と最後の「''」で「not」で設定する条件全体を挟む必要があるので、「()」だけでなく「''」の中にあることを念のため確認しておいてください。

ちなみに、今回はドメインを設定しているので、「href^=”xxx”」として「文字列の先頭が xxx であれば」という条件にしています。
もしその必要がなければ、「^」は省いても構わないハズです。たぶん。(ちゃんと確認してないので一応検証してください)
まぁ、そんな場合は少ないと思いますけど。







-JavaScript・jQuery
-, , , ,

執筆者:


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

comment

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

関連記事

no image

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

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

no image

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

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

no image

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

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

no image

jQuery で CSS を切り替えて文字サイズを変更する 2 つの方法。

最近、文字サイズの切り替えボタンを設置しているサイトも多くなってきましたね。 自治体や病院など公共性の高いサイトを中心に、導入が進んでいるようです。 僕自身も医療系のサイトに関わることが多いのですが、 …

no image

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

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