javascriptでのリンク表示

このQ&Aのポイント
  • javascriptを使用して、main.htmlのリンクをクリックすると、サンプル図(3)の部分に変換されたリンクが表示されるかどうかを確認したいです。
  • 具体的には、main.htmlのリンクをクリックしたときに、URLに「b.html?url=」が含まれているリンクを検知し、その部分を削除して新しいタブで開くようにしたいです。
  • このためには、javascriptを使用してクリックイベントを監視し、URLの変換と新しいタブでの開き方を設定する必要があります。具体的なコードについては後述します。
回答を見る
  • ベストアンサー

javascriptでのリンク表示

サンプル図(http://lancerevolution.tuzikaze.com/sampletest.html) main.htmlと言うページとmenu.htmlと言うページがあります。 main.htmlと言うページには、  ⇒<a href="b.html?url=http://yahoo.co.jp" target="_blank">Yahoo Japanへ!</a>  ⇒<a href="b.html?url=http://www.google.co.jp/" target="_blank">Googleへ!</a>  ⇒<a href="b.html?url=http://jp.msn.com/" target="_blank">msnへ!</a> と言う3つのリンクがあります。 この3つリンクの内どのリンクでもいいのでクリックした時に、サンプル図の(3)の部分に、  ⇒<a href="http://yahoo.co.jp" target="new">Yahoo Japanへ!</a>  ⇒<a href="http://www.google.co.jp/" target="new">Googleへ!</a>  ⇒<a href="http://jp.msn.com/" target="new">msnへ!</a> として出力することはできますでしょうか? つまり、main.htmlにあるリンクをクリックした時に、main.htmlの「b.html?url=」を含んでいる、リンク全てを(3)の部分に出力("b.html?url="の部分を削除、targetを"new"にして出力)できますか?ってことです。 もし、できるようならどのようなjavascriptが必要でしょうか?どうぞ、よろしくお願いします。

質問者が選んだベストアンサー

  • ベストアンサー
回答No.1

出来るんじゃないですかね。 javascriptが必要になると思います。 <script type="text/javascript"> var title = ''; document.location.match(/url=(.*)/); var url = RegExp.$1; if (url.match(/yahoo/)) { title = 'Yahoo Japanへ!'; } else if (url.match(/google/)) { title = 'Googleへ!'; } else if (url.match(/msn/)) { title = 'msnへ!'; } document.getElementById('idname').innerHTML = '<a href="' + url + '"​ target="new">' + title + '</a>'; </script> ちょっとしょぼいですがこんなのはどうでしょう。 menu.htmlに書くjavascriptです。 (3)の部分のタグに、 id="idname" とか書くと書かれると思います。

destroiyar
質問者

お礼

もっと効率がいい方法が見つかりましたので、そちらのほうでまた質問させていただこうかと思います。 どうもありがとうございました

destroiyar
質問者

補足

サンプルプログラムありがとうございます。 ===================================================== if (url.match(/yahoo/)) { title = 'Yahoo Japanへ!'; } else if (url.match(/google/)) { title = 'Googleへ!'; } else if (url.match(/msn/)) { title = 'msnへ!'; } ================================================= この部分なんですが、menuと言うページ1つしか使用しないため、このように書くと、リンクが100とかに増えるととんでもないことになります。 そこで、もう少し噛み砕いて何がしたいのか改めて書かせてもらおうかと思います。 ◆プログラム的に説明すると 1.親ウィンドウをクリックした時に子ウィンドウが開きます 2.親ウィンドウの「b.html?」を含める「aタグ」「タイトル」一覧を取得します 3.取得したaタグ一覧を<a href="××.html" target="××">title</a>として子ウィンドウに出力します ◆上のプログラムを実際に説明すると 1.main.htmlのリンクをクリックした時に、新規ウィンドウで子ウィンドウmenu.htmlが開きます 2.この時に、main.htmlの  ⇒<a href="b.html?url=​http://yahoo.co.jp"​ target="_blank">Yahoo Japanへ!</a>  ⇒<a href="b.html?url=​http://www.google.co.jp/"​ target="_blank">Googleへ!</a>  ⇒<a href="b.html?url=​http://jp.msn.com/"​ target="_blank">msnへ!</a> リンクをクリックした時に、「b.html?url=」を含める「aタグ」「タイトル」一覧を取得します 3.取得したaタグ一覧とタイトルを <a href="http://yahoo.co.jp.html" target="new">Yahoo Japanへ!</a> <a href="http://www.google.co.jp/"​ target="new">Googleへ!</a> <a href="http://jp.msn.com/"​ target="new">msnへ!</a> として(3)の部分に出力します 以上の、動作をjavascriptでやりたいと思っています。最初に書いた説明が分かりにくくてすみません@@ *main.htmlのリンクが変更されたら、menu.htmlの(3)の部分も変更されるようにしたいのです。 *menu.htmlは、1ページしか使いません *配列でもなんでも使用してもかまいませんので、どうぞよろしくお願いします

関連するQ&A

  • リンクのクリック数を把握したい

    現在、以下のようなjavascriptを書いて、リンクを作っています。 <script type="text/javascript"> <!-- A01=new Array(); A01[0]='<a href="http://www.yahoo.co.jp/" target="blank">yahoo</a>'; A01[1]='<a href="http://www.google.co.jp/" target="blank">google</a>'; a01=Math.floor(Math.random()*A01.length); B01=new Array(); B01[0]='<a href="http://www.livedoor.co.jp/" target="blank">livedoor</a>'; B01[1]='<a href="http://www.goo.co.jp/" target="blank">goo</a>'; b01=Math.floor(Math.random()*B01.length); --> </script> とgoogleとyahoo、;livedoorとgooを配列に入れておき、 どちらかがランダムで出てくるようにして実際の表示部に以下を配置しています。 <script type="text/javascript"> <!-- document.write(A01[a01]); --> </script> <script type="text/javascript"> <!-- document.write(B01[b01]); --> </script> このスクリプトで、A01(yahoo or google)とB01 (livedoor or goo)が それぞれ何回クリックされたのかを把握したいです。 どのようにすれば良いか、ご教示頂けると幸いです。

  • 一つのリンクに複数のURLを指定

    一つのリンクに複数のURLを指定できますでしょうか? 想像タグ <a href="http://www.google.co.jp/" & "http://www.yahoo.co.jp/" target="_blank">検索</a> JavaScriptでも 構いません。 ネットではこんなのが見つかりました。 Bridges  |  BridgeURL http://bridgeurl.com/

    • ベストアンサー
    • HTML
  • 一つのリンクに複数のURLを表示した場合の画面

    QNo.6787451について 一つのリンクに複数のURLを指定できますでしょうか?の回答で 下記などいろいろありますが <a href="http://www.google.co.jp/" onclick="window.open('http://www.yahoo.co.jp/')" target="_blank">リンク</a> リンクは 開いても googleだけです。具体的にどのようにリンクを開くと表示されるのですか。表示画面を張り付けて観たいのですが お願いできますか。 よろしくお願いします。

  • 文字リンクの設定について。

    文字リンクの設定っていろいろありますが、いったいどう違うのでしょう? 例えば・・・ <a href="リンクしたいURL" target="_blank">ここだよ</a> や、 <a href="www.***.***.com">ここだよ</a> など・・・ もしかして、それぞれサイトの設定によってはできるものと、できないものが、あるんでしょうか? これだったらどこでも設定可能!というリンクの貼り方がありましたら教えていただけないでしょうか? よろしくお願いします。

  • リンクがつながってしまって困っています

    ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ <a href="http://tslove.net/" target="_blank">4.T'sLOVE-女装・ニューハーフSNS</a> 性同一性障害・トランスジェンダーを対象とした超レアなSNS <A Href="http://tslove.net/" Target="_blank"> <Img Src="http://cool.secret.jp/tslove.jpg"</A> 上記4サイト以外にも招待状が無くても 入会出来るアダルトSNSを2つ知っています。 ご希望の方には 2サイトのURLをお伝えさせて頂きます^^ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ の 上記4サイト以外にも招待状が無くても 入会出来るアダルトSNSを2つ知っています。 ご希望の方には 2サイトのURLをお伝えさせて頂きます^^ の部分が上のリンクとつながってしまって ただの文章にしたいのにリンクになってしまいます。 私はHTMLは詳しくないので Googleで検索して調べましたが無理でした。 詳しい方、完成型を教えて頂けると大変ありがたいです。 どうぞよろしくお願い致します。

  • 以下条件を実現させるエクセルコードが分かりません。

    A列にカンマ区切りで短いテキストを複数(2~4つ程度)書いて B列に URL(http://○○.com/)を書いて  ⇒ C列に以下のように出力させる にはどんなエクセル用コードで実現できるでしょうか? ■イメージ A列セル内          B列セル内 あああ,いい,うううう     http://○○.com/    ↓ C列セル内(3つ出来上がる)  <a href="http://○○.com/" target="_blank">あああ</a>  <a href="http://○○.com/" target="_blank">いい</a>  <a href="http://○○.com/" target="_blank">うううう</a> A列に一つのテキストだったら  ="<a href="""&B1&""" target=""_blank"">"&A1&"</a>" で大丈夫なんですが、A列にカンマ区切りとなると、分かりません。

  • フレーム内のリンク先を別ウィンドウに表示する

    お世話になります。 ページ内にフレーム領域を作りました。 フレーム内のリンクをクリックするとフレーム内で別ウィンドウが開きます。 <iframe src="aaaaaa.html"name="bbbbb"width="800"height="500"></iframe> 上の様に書きました。フレーム内のaaaaaa.html内のリンクをクリックするとフレーム内に別ウィンドウが開きます。 そうではなくて、_blankを使った様に別ウィンドウを開きたいのです。 <a href="aaaaaa.html内のURL"target="_blank" <iframe src="aaaaaa.html"name="bbbbb"width="800"height="500"></iframe> </a> <iframe src="aaaaaa.html"name="bbbbb"width="800"height="500"><a href="aaaaaa.html内のURL"target="_blank"</a></iframe> 上記の様にしても結果は同じでした。 RCCの知識が無いために、ページ内にブログのページを強引に表示しました。 よろしくお願いします。

  • リンクを同じウインドウで開くには

    <A HREF="a.htm" target="_blank">A</A> も <A HREF="b.htm" target="_blank">B</A> も <A HREF="c.htm" target="_blank">C</A> も同じウインドウにする方法を教えていただけますか。 現在、それぞれ別に開きます。 Aを開いていて、BをクリックするとAの内容がBに変わるようにしたい。

  • 外部JSファイルでランダム表示と一度クリックで2箇所リンクのものを組み合わせたいんです。

    初心者で申し訳ありません。 外部JSファイルでランダム表示をつかっているのですが、リンクの箇所で一回のクリックで2箇所にリンクするのを組み合わせたいと思ってます。 ランダム表示 <!-- //並べ替え表示スクリプト function Random(x) { //fは掲載する広告数 f =3; var Num = new Array(f - 1); var Chk = new Array(f - 1); var Mess = new Array(f - 1); //***ここに広告表示HTMLの配列作成 Mess[0] = ' <A href="http://aa.com" target="_blank">testtest</A>'; Mess[1] = ' <A href="http://bb.com" target="_blank">testtest</A>'; Mess[2] = ' <A href="http://cc.com" target="_blank">testtest</A>'; //***ランダムで0~f-1の値を並べ替え for (i=0;i<f;i++) // { Num[i] = Math.floor(Math.random()*f); if (Chk[Num[i]] == 1){ while(Chk[Num[i]] == 1){ Num[i] = Math.floor(Math.random()*f); } Chk[Num[i]] = 1; } else { Chk[Num[i]] = 1; } } //HTML作成部分 for (i=0;i<x;i++) // { document.write(Mess[Num[i]]); document.write(Mess[Num[i+1]]); document.write(Mess[Num[i+2]]); } } //--> 上のランダムに出力されるリンクを下のような形みたいに、それぞれのURLが1クリックで2箇所リンクされるようにしたいです。 <A href="http://aa.com" target="_blank" onclick="window.open('http://dd.com')" >test</A> もしお分かりの方がいたら何卒よろしくお願いします。 もしわかりづらかったらごめんなさい。

  • ulインラインブロックの文字数オーバーの非表示

    <html> <body> <head> <style> li { float: left; width: 100px; font-size: 13px; text-align: center; padding: 4px; background: #ccc; margin-right: 10px; margin-bottom: 10px; border-radius: 4px; text-shadow: 0 1px 0 #fff; } </style> </head> <ul> <li><A href="http://www.google.co.jp" TARGET="_blank">グーグルへリンク</A></li> <li><A href="http://www.google.co.jp" TARGET="_blank">グーグルへリンク</A></li> <li><A href="http://www.google.co.jp" TARGET="_blank">グーグルへリンク</A></li> <li><A href="http://www.google.co.jp" TARGET="_blank">グーグルへリンクグーグルへリンクグーグルへリンク</A></li> <li><A href="http://www.google.co.jp" TARGET="_blank">グーグルへリンク</A></li> </ul> </body> </html> ULブロック要素をスタイルシートでインラインブロック要素にして、 横に並べたて表示しているのですが、表のように表示した時に、 そのliの一つ一つのブロックから文字がはみ出すことがあります。 overflow:hidden;を設定しても文字数の数だけ、liブロックを拡大して表示されてしまうのですが、 どのように表記すれば、うまくいくでしょうか?よろしくお願いします。

    • 締切済み
    • CSS

専門家に質問してみよう