WEBページを見ていて意図しないページに遷移させられてしまう事がありますが、個人的に非常にもどかしい為、そうした外部リンクを可視化できるコードを書いて見ました。
例えば、ニュース記事ページを見ていて、文中の特殊な単語にリンクが付いているような場合、wikipediaなどでは、そのリンクの説明ページに遷移しますが、アメブロなどの場合は、ページ内でポップアップで説明文がフローティング表示されます。
その場での説明は、「ウザい」と感じる事もありますが、ページ遷移するよりはましですね。
ページ遷移した時にまた前のページにもどらないといけないような場合は本当にメンドくさい事この上ありません。
そんな時に対応できるソースコードなので、興味のある人は見て見てください。
やりたい事
- ページ内のリンク一覧を拾い出して、それぞれ内部リンクなのか外部リンクなのかを判断する。
- 内部リンクの場合は何もしないが外部リンクの場合は、見た目でわかるように外部リンクアイコンを追加する。
- さらに外部リンクの場合は、ブラウザの別タブで開くようにtarget="_blank"属性を埋め込む
※これは個人的思考やサイトポリシーなどもあるため、気に入らない人はソースコードから除外してください。
ソース
<html>
<head>
<meta charset="utf8">
<title>外部リンク</title>
</head>
<body>
<p>内部リンク</p>
<div><a href="./link.html">link.html</a></div>
<p>外部リンク</p>
<div><a href="https://google.com">https://google.com</a></div>
<div><a href="//yahoo.jp">yahoo.co.jp</a></div>
</body>
</html>
<script src="externalLink.js"></script>
;(function(){
var $$ = function(){
$$.prototype.setStyle();
var links = $$.prototype.searchLinks();
for(var i=0; i<links.length; i++){
if($$.prototype.isExternalLink(links[i])){
$$.prototype.setTargetBlank(links[i]);
$$.prototype.addIcon(links[i]);
}
}
};
// ページ内のリンク一覧の取得
$$.prototype.searchLinks = function(){
return document.links;
};
// URLから外部リンクの判断
$$.prototype.isExternalLink = function(element){
var localdomain = location.host;
var linkDomain = element.href.split("/")[2];
// 別ドメイン（外部ドメイン）
if(localdomain !== linkDomain){
return true;
}
// 同一ドメイン（内部リンク）
else{
return false;
}
};
// 別タブで開く処理追加
$$.prototype.setTargetBlank = function(element){
element.target = "_blank";
};
// add style
$$.prototype.setStyle = function(){
if(document.getElementById("externalLink")){return;}
var style = document.createElement("style");
style.type = "text/css";
style.id = "eternalLink";
var css = "";
css += 'a[data-externalLink="1"]:after{';
css += 'content:" ";';
css += 'background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGlkPSJMYXllcl8xIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA2NCA2NDsiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDY0IDY0IiB4bWw6c3BhY2U9InByZXNlcnZlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48c3R5bGUgdHlwZT0idGV4dC9jc3MiPgoJLnN0MHtmaWxsOiMxMzQ1NjM7fQo8L3N0eWxlPjxnPjxnIGlkPSJJY29uLUV4dGVybmFsLUxpbmsiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDM4Mi4wMDAwMDAsIDM4MC4wMDAwMDApIj48cG9seWxpbmUgY2xhc3M9InN0MCIgaWQ9IkZpbGwtMTE4IiBwb2ludHM9Ii0zNTIuMywtMzQzLjQgLTM1NC42LC0zNDUuNyAtMzI4LjgsLTM3MS40IC0zMjYuNiwtMzY5LjIgLTM1Mi4zLC0zNDMuNCAgICAiLz48cG9seWxpbmUgY2xhc3M9InN0MCIgaWQ9IkZpbGwtMTE5IiBwb2ludHM9Ii0zMjYsLTM1NC45IC0zMjkuNCwtMzU0LjkgLTMyOS40LC0zNjguNiAtMzQzLjEsLTM2OC42IC0zNDMuMSwtMzcyIC0zMjYsLTM3MiAgICAgIC0zMjYsLTM1NC45ICAgICIvPjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0tMzM0LjYtMzI0aC0zNC4zYy0yLjgsMC01LjEtMi4zLTUuMS01LjF2LTM0LjNjMC0yLjgsMi4zLTUuMSw1LjEtNS4xaDE4Ljl2My40aC0xOC45ICAgICBjLTAuOSwwLTEuNywwLjgtMS43LDEuN3YzNC4zYzAsMC45LDAuOCwxLjcsMS43LDEuN2gzNC4zYzAuOSwwLDEuNy0wLjgsMS43LTEuN1YtMzQ4aDMuNHYxOC45Qy0zMjkuNC0zMjYuMy0zMzEuNy0zMjQtMzM0LjYtMzI0ICAgICAiIGlkPSJGaWxsLTEyMCIvPjwvZz48L2c+PC9zdmc+);';
css += 'background-size:contain;';
css += 'width:16px;';
css += 'height:16px;';
css += 'vertical-align:middle;';
css += 'display:inline-block;';
css += 'margin:0 4px;';
css += '}\n';
style.innerHTML = css;
document.getElementsByTagName("head")[0].appendChild(style);
};
// アイコン追加
$$.prototype.addIcon = function(element){
element.setAttribute("data-externalLink" , "1");
};
new $$;
})();
使い方
基本的には、javascriptをそのままデバッグコンソールに貼り付けて実行するだけで、ページ内に反映されます。
※この時点で「難しい」と感じる人は、dotinstallの「デバッグコンソール」を閲覧してみてください。
注意点としては、今回のリンクはAタグのリンクをピックアップしています。
javascriptでbuttonアクションなどで書かれているようなリンクには対応していません。
また、formのsubmitなどのページ遷移にも対応していないので、ご理解ください。
簡単解説
非常にシンプルなソースコードなので、説明はさほどいらないかと思いますが、初心者向けに書いておきます。
基本的に無名関数ないの"$$"実行変数で処理しています。
任意のタイミングで使いたい場合は、"new $$;"の箇所を省いて、読み込んだ後で任意の場所でnewしてください。
"$$.prototype.searchLinks"は、ページ内のAリンクをあつめているだけなので、ここで任意のリンクに絞りたい場合は、for文書いて条件判定をいれてあげてください。
"$$.prototype.isEternalLink"は外部リンク判断している箇所で、Aタグのhref属性と、今開いているページのhost部分を比較して同じかどうかで判定しています。
サブドメインを判定しようかと思ったんですが、Googleのルールに基づき、サブドメインは別ドメイン扱いにしています。
"$$.prototype.setStyle"では、ページ内にリンクアイコンを表示する為のstyleタグを生成していて、擬似要素のafterに入れ込んでます。
リンク手前にアイコン表示したい場合はbeforeに書き直すと表示できます。
"$$.prototype.addIcon"最後に、styleを適用させるために、”data-eternalLink"属性に"1"を入れて終わります。
リンクはリアルタイムに切り替わらないので、そのあとの監視などは行なっていないのですが、もし入れ替わる場合は、属性値を無くすか、"1"以外の値にすると、アイコンは消え去ります。
最後に
今回このツールを作って見てみて 以外に便利に使えることがわかったので、そのうちにchrome機能拡張で作って見たいと思います。
0 件のコメント:
コメントを投稿