JavaScriptでaタグを作る
- カテゴリ:
- CSS
- JavaScript
- コメント数:
- Comments: 0
◆どちらかというとCSS
document.createElement("a")するだけでしょ?
と思った方残念でした
もうちょっとだけ複雑なんじゃよ
いきなりですがここに完成品があります
普通のaタグ

偽物のaタグ

サンプル
linkとなるdiv要素にカーソルを合わせるとCSSで左下にボックスを表示するというだけです
JavaScriptなのはクリックするとwindow.openするところだけです
今回はChromeとほぼ一緒なデザインにしていますが好みでデザインを変えることも出来ます
OSやバージョンによってデザインが多少変わるので上のサンプルを見ても標準のaタグのと違ってるかもしれないです
・JavaScriptでリンクを制御したいとき
かなと思います
そこまで理由があって作ったわけじゃないので けっこう適当です
検索エンジンのロボットとか ページランク関係でリンクと判断されたくないという時にはいいのかなと思います
ただ 普通に<span>などをクリックした時にwindow.openするというだけだと それがリンクなのかわかりづらいです
「押せるのかどうか」 と 「押した時にどこに飛ぶのか」 がわかるほうが使う人が嬉しいです
熟練したネットサーファーは 感覚で 「ここ押せそう」と感じる気もしますが どこに飛ぶのかが左下にでるのは熟練してる人のほうが重視してると思います
そんなわけでリンクになってるならaタグっぽく見せかけるのは良いことだと思います
JavaScriptでリンク関係を制御したいときはaタグ以外のタグを使ってリンクさせたほうが簡単です
aタグだと 左クリック・ホイールクリック・右クリックからの開く・エンターキー押した時などいろいろな方法でリンクを開けます
ホイールクリックはChromeはonclickでイベント受け取れるのでキャンセルできますがFirefoxはできません
右クリックから新しいタブで開くを押した時もキャンセルやイベント受け取りできません
なのでdivやspanにonclickイベントを受け取ってwindow.openするのがリンク開く時に必ず何かしたいときに実行できます
リファラ消しアクセスなどで有効ですね
Googleの検索結果のページだとaタグを使っていて mousedownがあるとaタグのhref属性を書き換えてアクセスログを記録するためのページにアクセスするようにされています
そのページを通して検索結果のページに行くようになっているので特に気にせず使えています
mousedownはクリックより先に起きるイベントなので これでもページを開く前にリンク先がgoogleのページになっています
これでもよさそうですが ページ遷移しない場合は aタグのリンク先が書き換わっているのを左下のリンク先表示で見えてしまいます
個人的にはコレは嫌なのでリンク先を開く時に何かしたいならJavaScriptで開くようにしたいです
と思った方残念でした
もうちょっとだけ複雑なんじゃよ
いきなりですがここに完成品があります
普通のaタグ

偽物のaタグ

サンプル
ソースコード
<style>
/* この辺関係ないデザイン */
#contents{width:500px;margin:auto;}
ul{margin-top:30px;list-style:none;}
li{margin:5px;padding:10px;background:#f0f0f0;border:#d0d0d0 dotted 2px;}
/* リンク文字列。divをわざわざinlineにしてるのはspanの中にdivあるとおかしいから */
.link{color:blue;text-decoration:underline;display:inline;cursor:pointer;}
/* 左下のナビゲーション */
.nav{position:fixed;left:0;bottom:0;padding:4px 10px 1px 3px;border-radius:0 3px 3px 0;font-family:meiryo,arial;font-size:15px;display:none;background:#e0e0e0;color:#707070;}
/* リンクにカーソル乗せたらナビゲーションを表示する */
.link:hover>.nav{display:block;}
</style>
<div id="contents">
<h1>普通のリンク</h1>
<ul>
<li><a href="https://www.google.co.jp/">google</a></li>
<li><a href="http://www.yahoo.co.jp/">yahoo japan</a></li>
<li><a href="https://www.bing.com/">bing</a></li>
</ul>
<h1>偽物のリンク</h1>
<ul>
<li><div class="link" onclick="window.open('https://www.google.co.jp/')">google<div class="nav">https://www.google.co.jp/</div></div></li>
<li><div class="link" onclick="window.open('http://www.yahoo.co.jp/')">yahoo japan<div class="nav">http://www.yahoo.co.jp/</div></div></li>
<li><div class="link" onclick="window.open('https://www.bing.com/')">bing<div class="nav">https://www.bing.com/</div></div></li>
</ul>
</div>
linkとなるdiv要素にカーソルを合わせるとCSSで左下にボックスを表示するというだけです
JavaScriptなのはクリックするとwindow.openするところだけです
今回はChromeとほぼ一緒なデザインにしていますが好みでデザインを変えることも出来ます
OSやバージョンによってデザインが多少変わるので上のサンプルを見ても標準のaタグのと違ってるかもしれないです
どこで使えるか というと
・コンピュータにリンクと判断されたくないとき・JavaScriptでリンクを制御したいとき
かなと思います
そこまで理由があって作ったわけじゃないので けっこう適当です
検索エンジンのロボットとか ページランク関係でリンクと判断されたくないという時にはいいのかなと思います
ただ 普通に<span>などをクリックした時にwindow.openするというだけだと それがリンクなのかわかりづらいです
「押せるのかどうか」 と 「押した時にどこに飛ぶのか」 がわかるほうが使う人が嬉しいです
熟練したネットサーファーは 感覚で 「ここ押せそう」と感じる気もしますが どこに飛ぶのかが左下にでるのは熟練してる人のほうが重視してると思います
そんなわけでリンクになってるならaタグっぽく見せかけるのは良いことだと思います
JavaScriptでリンク関係を制御したいときはaタグ以外のタグを使ってリンクさせたほうが簡単です
aタグだと 左クリック・ホイールクリック・右クリックからの開く・エンターキー押した時などいろいろな方法でリンクを開けます
ホイールクリックはChromeはonclickでイベント受け取れるのでキャンセルできますがFirefoxはできません
右クリックから新しいタブで開くを押した時もキャンセルやイベント受け取りできません
なのでdivやspanにonclickイベントを受け取ってwindow.openするのがリンク開く時に必ず何かしたいときに実行できます
リファラ消しアクセスなどで有効ですね
Googleの検索結果のページだとaタグを使っていて mousedownがあるとaタグのhref属性を書き換えてアクセスログを記録するためのページにアクセスするようにされています
そのページを通して検索結果のページに行くようになっているので特に気にせず使えています
mousedownはクリックより先に起きるイベントなので これでもページを開く前にリンク先がgoogleのページになっています
これでもよさそうですが ページ遷移しない場合は aタグのリンク先が書き換わっているのを左下のリンク先表示で見えてしまいます
個人的にはコレは嫌なのでリンク先を開く時に何かしたいならJavaScriptで開くようにしたいです