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

btmup Blog

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
-, , , ,

Copyright© btmup Blog , 2019 All Rights Reserved Powered by AFFINGER5.