*

リファラーによってiframe内のリンク先をjavascriptで変更する

公開日: : ノウハウ

CSS_seiketukannoarucs1292500

リファラーによってインラインフレーム内にあるリンクのリンク先を変えれたら便利になるなと思って javascript で自作してみました。こんな事したいと思う人は多分いないニッチなものだと思います。

どういう時に使いたかったかと言うと、複数の違うドメインのページから一つのページをインラインフレームで読み込みます。インラインフレームの中にはリンクがあります。

普通通り a タグでリンクを貼ればリンク先は一つのページのみです。インラインフレームを読み込んだサイトによってリンク先を変えたかったのです。

これを javascript で実現してみました。javascript をオフにしている人は…。想定外です。

まずはソースを御覧ください。このスクリプトはインラインフレーム内に記述しています。

<script type="text/javascript" language="javascript">
<!--
	var parentURL =document.referrer;
	var selectURL;
	if(String(parentURL).indexOf("webmist")!=-1){
		selectURL = "https://webmist.info/sample.html";
	}else if(String(parentURL).indexOf("pocket-se")!=-1){
		selectURL = "http://pocket-se.info/sample.html";
	}
	document.open();
	document.write("<a href='" + selectURL + "' target='_top'>リンクテキスト</a>");
	document.close();
-->
</script>

まずは javascript でリファラー(インラインフレームを読み込んだサイトのURL)を取得し、リファラーに含まれている文字列によってリンク先となる URL を selectURL という変数に格納しています。

あとは、javascript で a タグのリンクを書き出しています。

これで何が良くなったのか?このスクリプトを使わなかったらドメインごとにインラインフレーム内のページを作らなくてはいけませんでしたが、これによってインラインフレームのページは一つで済むようになりました。

前述の通り、こんな事をしたいという人は多分いないと思います。何かの参考になれば幸いです。

  • Pocket

おすすめトピックス

関連記事

divタグ
div要素のクラス名をnth-childの擬似クラスで何番目を指定しても効かない

CSS3 が登場して擬似クラス nth-child が使えるようになって、要素の何番目のみにスタイルを適用するような事が非常に簡単になりました。従来ではクラスなどを駆使して無理やり指定していました。これではソースも CS […]

videoタグのmp4動画にもサムネイル画像を表示させるには

ニコニコ動画や Youtube を始め、インターネット上で動画を見たり配信する機会が珍しくない時代となりました。むしろ毎日アップロードされる動画が多すぎて見てもらう為の競争となっていると言っても過言ではありません。 そこ […]

リストの表示数を制限する
HTMLでulタグのリスト項目の表示数を制限する

HTML で ul タグを使えば以下のようなリストを作れます。 リスト リスト リスト このようなやつですね。順序なしリストと呼ばれて、何かを箇条書する時に便利です。html タグでは以下のように記述します。 この箇条書 […]

マウス
CSSのみでマウスのロールオーバーでopacityだと背景が濃いと白くならない対処法

画像のロールオーバーと言えば、ウェブサイトでリンクが付いた画像やバナーにマウスを乗せた時に色が変わったり何かしら変化がある処理を言います。一昔前には画像のロールオーバー一つに javascript を使って大変面倒で h […]

スマホサイト
プラグイン無しで簡単に実現するスマホサイトの上からドロワーメニューの作り方【jQuery】

近年どこでもスマートフォン向けサイトが用意されているのが当たり前です。スマートフォンを使っていればいつも何気なしにスマートフォンサイトを見ていると思います。 そのスマートフォンサイトをちょっと思い出してみてください。 こ […]

画像付きリスト
関連記事などに画像付きリストをCSSで簡単に作るサンプル

画像つきリストとは上図のようなイメージです。しばしばブログなどでは関連記事や人気記事の表示などに使われている事が多いですし、インターネットショッピングサイトではサイドメニューの商品カテゴリリストに採用されています。 ポイ […]

著者について

名前:Azell
作曲したり風景写真撮ったりWeb制作したりする人です。 好きな事を楽しくブログに綴れていけたらと思います。

フォローはこちら

       

       
彦根市の緑豊かで温かい雰囲気の民家カフェ「MokuMoku」でランチ

滋賀県彦根市にある隠れ家的民家カフェ「MokuMoku(モクモ

世界一のジェラート
彦根市にある世界一のジェラート店「ジェラテリアアズーロ」で滋賀ならではの味を堪能

世界一のジェラートのお店が滋賀県に、彦根市にあるなんて。半信半

スマホで遊園地経営ゲーム「ローラーコースタータイクーンタッチ」レビュー

自分で夢のワンダーランドを作る遊園地経営シミュレーションゲーム

大垣で和風生パスタ!半個室で落ち着くニーニャニーニョ桜小町

岐阜県大垣市にニーニャニーニョ桜小町というパスタ店がありました

滋賀県の高校野球予選を観戦するのに入場料金はいくら?

夏、7月。全国の高校球児達が甲子園を目指して熾烈な野球の戦いが

→もっと見る