*

リファラーによって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

おすすめトピックス

関連記事

css3
CSS3で要素の2番目以降、1番目以外にスタイルを適用する擬似クラス

スタイルシート(CSS)はウェブサイトにデザインを適用するための言語。そのスタイルシートのバージョンは今では3になっており、かなり表現力豊かで優秀になっています。 例えば ul li タグのリストの場合、従来の CSS2 […]

これを見れば簡単!スマホサイトのフッターメニューをサクッと作るサンプル

スマートフォンなどのモバイル端末でウェブサイトを見る人が急増し、今の時代スマートフォン用サイトを作る事が当たり前となりました。スマホ用に別の html ファイルを用意するより一つの html で両方に対応するレスポンシブ […]

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

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

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

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

cssとjqueryでサイトのローディング画面を簡単に実現する作り方【プラグインなし】

現在ロード中を知らせるローディング画面(Now Loading)は今までにどこかのサイトで見たことがあるかと思います。かつて FLASH 動画全盛の時代にはこんなローディング画面を見る機会も多かったです。このようなローデ […]

スマホを操作する手
スマホでWeb閲覧時代にスマホサイトでNGだと思う事3つ

ちょっと前まではインターネットを見るなら、通販するならパソコン!という時代でしたが、既にこれは終わった時代です。ここ2,3年は、インターネットを閲覧、通販においてもスマートフォン率がだんだん上昇しています。これは当サイト […]

著者について

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

フォローはこちら

       

       
Aipo8.1.1オープンソース版で2018年の祝日設定を行う(さくらのVPS)

オープンソース版の無料グループウェア「Aipo」のサポートが2

タイヤのホイールナットが緩んで紛失、1個で買う方法はあるか

車の発進時や曲がる時にわずかなゴリッという音がする事に気づいて

高速道路
高速道路の上りと下りってどっち方面?全国高速道路総まとめ

高速道路には進行方向によって「上り」と「下り」という表現があり

名古屋久屋大通(丸の内)の「Cafe One」で居心地良い空間でおうちごはんランチ

名古屋観光で名古屋テレビ塔と久屋大通公園を見に行った際にランチ

豊田合成リンク
名古屋栄の豊田合成リンクで氷じゃないスケートリンクで滑ってきた感想

名古屋市の栄に氷じゃないスケートリンクがあるという話を連れに聞

→もっと見る