*

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

おすすめトピックス

関連記事

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

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

MP3ダウンロード
MP3を1クリックだけでストリーミングせずにダウンロードする方法

私はこのサイトとは別に、効果音や BGM の素材サイトを運営しています。ふとそのサイト名で google 検索をしてみた所、驚くべき光景を目にしました。 ポケットサウンドというのがそのサイト名なのですが、Google の […]

https通信下でjavascriptが動かない場合の対処法

https 通信下で javascript が動かない!とお困りという事は、もしかしてあなたのページは特定のページだけ https 通信を行っているのではないでしょうか?例えばログインページ、決済ページのみ暗号化を行う […]

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

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

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

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

プレースホルダ
検索窓に薄い文字を入れて何を入力するのか分かりやすくするプレースホルダ

ネット上で何かを検索したい時、どこを見ますか? そう、検索窓ですよね。検索窓は EC サイトやネットショップ、何かを検索する必要があるウェブサイトには大概付きものでお馴染みのものです。 たまに見るのが検索窓に薄い文字で予 […]

著者について

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

フォローはこちら

       

       
Illustratorでテキストをアウトライン化できない時に確認すること

Illustrator を使って印刷物などを作っている人ならテ

Gmailのエラー「Gmail requires one or more Google Play services that are not currently avaiable.」で開けない

あるいつもどおりの朝、スマートフォンで Gmail を開こうと

Amazonで自分の書いたレビューを一覧で確認する方法

世界的に最大級の通販サイト Amazon。私もよく使います。利

大垣カフェ「カフェ飯屋ピーナッツ」暖かく自然派なお食事が美味しいアットホームな場所でした

岐阜県大垣市の市民病院近くにオープンした「カフェ飯屋ピーナッツ

Illustratorで矢印に綺麗に境界線を付ける方法

Photoshop では矢印でも文字でも綺麗に境界線をつけるレ

→もっと見る