特定ページから遷移した時にアクションを呼び出す（その２）

前へ 次へ
このQ&Aのポイント
  • 特定のページ以外からアクセスした際に、アクションは発動しませんが、この特定のページを複数に増やしたい場合はどのように設定すればよろしいでしょうか？
  • checkURL関数は、特定のページを設定しており、そのページ以外からアクセスされた場合にはアクションが発動しないようになっています。特定のページを複数に増やしたい場合は、どのように設定すれば良いのでしょうか？
  • checkURL関数では、pmtURLという変数に特定のページのURLを設定しています。そのため、pmtURL以外のページからアクセスされた場合にはアクションが発動しません。特定のページを複数に増やしたい場合は、pmtURLの値を複数のURLに設定する必要があります。
回答を見る
  • ベストアンサー

特定ページから遷移した時にアクションを呼び出す（その２）

以前ご質問させていただいたのですが、一点わからないことがありまして、 ご質問させていただきます。 下記jsのpmtURLは特定ページをひとつだけ設定しているので、 そのページ以外からアクセスした際に、アクションは発動しませんが、 この特定のページを複数に増やしたい場合はどのように設定すればよろしいでしょうか？ ご教示よろしくお願いいたします。 function checkURL() { var pmtURL = "http://www.***.jp"; if(document.referrer != pmtURL) return; var s = location.search.substring(1); if(s == "") { setActiveStyleSheet('Home'); fadeOut_toggle_setTime(); } else if (s == "news") { fadeIn_toggle(); setActiveStyleSheet('News'); setTimeout(function() { $( selectScene(1)) }, 1500 ); } } ↓こちらは前回の質問内容です。 http://oshiete1.watch.impress.co.jp/qa5076750.html

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

  • ベストアンサー
  • 2hosi2
  • ベストアンサー率100% (2/2)
回答No.2

var pmtURL = "http://www.***.jp/a.htm"; var pmtURL2 = "http://www.***.jp/b.htm"; とし、if文に演算子『||』を使用してはどうですか？ 『||』は、『または』を意味し、 "if(document.referrer != pmtURL || document.referrer != pmtURL2)" は、"もしdocument.referrerがpmtURLでない、または、document.referrerがpmtURL2でないならば"を意味します。 | はl(英字のエル小文字)やI(英字のアイ大文字)ではありません。 キーボードの右上の\(エンマーク)のキーをshiftと同時に押せば書けます。 蛇足ですがほかにも演算子には『&&』もあり、『&&』は『且つ』と訳せます。 "if(document.referrer != pmtURL && document.referrer != pmtURL2)" は、"もしdocument.referrerがpmtURLでなく、且つdocument.referrerがpmtURL2でないならば"という意味になります。

rocketpunk
質問者

お礼

ご返答ありがとうございます。 おかげさまで動作させることができました！ ありがとうございました。

その他の回答 (1)

  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.1

＜論理演算子＞ http://www.rfs.jp/sb/javascript/01/06.html#4.論理演算子 http://www.site-cooler.com/kwl/jslibrary/4.htm#4-5 ＜練習？＞ http://www.rsch.tuis.ac.jp/~mizutani/online/javascript/multi-condition.html

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • 1分毎にHTMLを切り替えるJavaScript

    <script> function getImageFile(date){ var dir = 'min_img/'; var ext = 'jpg'; var hour = date.getHours(); if(hour < 10){ hour = '0' + hour; } var minute = date.getMinutes(); if(minute < 10){ minute = '0' + minute; } return dir + hour + minute + '.' + ext; } function updateClock(){ var date = new Date(); var image = getImageFile(date); date.setTime(date.getTime() + 60 * 1000); var next_image = getImageFile(date); $('#clock').fadeOut(1000, function(){ $('#clock') .html('<img src="' + image + '"><img src="' + next_image + '" style="display:none;">') .fadeIn(1000); }); setTimeout('updateClock()', 60 * 1000); } $(document).ready(function(){ updateClock(); }); </script> <body> <div id="clock"></div> </body> 上記のJavaScriptは1分毎に画像が切り替えるものです。 画像でなく、インフレームでHTMLを表示したいのですが、うまくいきません。 <script> function getImageFile(date){ var dir = 'html/'; var ext = 'html'; var hour = date.getHours(); if(hour < 10){ hour = '0' + hour; } var minute = date.getMinutes(); if(minute < 10){ minute = '0' + minute; } return dir + hour + minute + '.' + ext; } function updateClock(){ var date = new Date(); var image = getImageFile(date); date.setTime(date.getTime() + 60 * 1000); var next_image = getImageFile(date); $('#clock').fadeOut(1000, function(){ $('#clock') .html('<a href="' + image + '"></a><a href="' + next_image + '" style="display:none;"></a>') .fadeIn(1000); }); setTimeout('updateClock()', 60 * 1000); } $(document).ready(function(){ updateClock(); }); </script> <body> <iframe id="clock"></a></iframe> </body> 宜しくお願いします。

  • 【jQuery】setInterval

    jqueryの初心者です。 3つの画像を3秒間隔でクロスフェードさせ、それを繰り返したいのですが setIntervalの使い方が違うのか、思うような動きになりません。 何が原因なのかと、無駄な部分があると思いますので なるべくシンプルで初心者レベルのコードを教えて頂きたいです。 宜しくお願いします。 $(function(){ setInterval(function(){ setTimeout(function(){ $(".photo-1").fadeOut(1000); },3000); setTimeout(function(){ $(".photo-2").fadeIn(1000); },3000); setTimeout(function(){ $(".photo-2").fadeOut(1000); },6000); setTimeout(function(){ $(".photo-3").fadeIn(1000); },6000); setTimeout(function(){ $(".photo-3").fadeOut(1000); },9000); setTimeout(function(){ $(".photo-1").fadeIn(1000); },9000); },3000); }); <div id="photo-box"> <p class="photo-1"><img src="img/01.jpg" width="500" height="150" alt="" /></p> <p class="photo-2"><img src="img/02.jpg" width="500" height="150" alt="" /></p> <p class="photo-3"><img src="img/03.jpg" width="500" height="150" alt="" /></p> </div>

  • ページのフェードアウトインについて

    フェードインアウトの勉強をしているのですが、画像をクリックしてページをフェードアウトインさせる場合、<body>にはどのように書けばいいのでしょう？ <head> <!-- //fadeoutin var fade_outincount = 100; var fade_outincount_str = 100; var fade_clear2; var fade_outinspeed = 3; var fade_outintimer = 100; var wait_timer2 = 1000; //fadeout function fade_outin(){ clearTimeout(fade_clear2); if(document.all || document.getElementById){ if ( fade_outincount_str > 0){ fade_outincount_str = fade_outincount; if(document.all){ if(fadeoutin.filters["alpha"]){ fadeoutin.filters["alpha"].Opacity = fade_outincount_str; } } else if(document.getElementById){ document.getElementById('fadeoutin').style.MozOpacity = fade_outincount_str/100; } fade_outincount = fade_outincount - fade_outinspeed; fade_clear2 = setTimeout("fade_outin()",fade_outintimer); }else{ fade_clear2 = setTimeout("fade_outin2()",wait_timer2); } } } //fadein function fade_outin2(){ if ( fade_outincount_str < 100){ fade_outincount_str = fade_outincount; if(document.all){ if(fadeoutin.filters["alpha"]){ fadeoutin.filters["alpha"].Opacity = fade_outincount_str; } } else if(document.getElementById){ document.getElementById('fadeoutin').style.MozOpacity = fade_outincount_str/100; } fade_outincount = fade_outincount + fade_outinspeed; fade_clear2 = setTimeout("fade_outin2()",fade_outintimer); }else{ fade_clear2 = setTimeout("fade_outin()",wait_timer2); } } //--> </SCRIPT> </head> 宜しくお願いします

    • ベストアンサー
    • CSS
  • 一秒後に実行するようにしたところ全く動かない

    一秒後に実行するようにしたところ全く動かなくなってしまいました。 ・これは動く //fadein-from-スクロール350後に実行 $(function(){ $(window).scroll(function (){ $('.js-translate3d-lower-right').each(function(){ var elemPos = $(this).offset().top; var scroll = $(window).scrollTop(); var windowHeight = $(window).height(); if (scroll > elemPos - windowHeight + 350){ $(this).addClass('scrollin'); } }); }); }); ・これが動かない //一秒後に実行 // setTimeout(function(){ // $(this).addClass('scrollin'); // },1000); //fadein-from-スクロール350後に実行 $(function(){ $(window).scroll(function (){ $('.js-translate3d-lower-right--delay-one-s').each(function(){ var elemPos = $(this).offset().top; var scroll = $(window).scrollTop(); var windowHeight = $(window).height(); if (scroll > elemPos - windowHeight + 350){ //一秒後に実行 setTimeout(function(){ $(this).addClass('scrollin'); },1000); } }); }); }); ・下記に間違いがあるのでしょうか？ if (scroll > elemPos - windowHeight + 350){ //一秒後に実行 setTimeout(function(){ $(this).addClass('scrollin'); },1000); }

  • アニメーションをループさせたい

    すみませんjquery初心者です。 下記の様な簡単なスライドショーを作りたいのですが、 ---------------------------------------------------------------- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.js"></script> <script> setTimeout(function() { $(".slide01").hide(); $(".slide02").show(); }, 3000); setTimeout(function() { $(".slide02").hide(); $(".slide03").show(); }, 6000); setTimeout(function() { $(".slide03").fadeOut(2000); $(".slide04").fadeIn(2000); }, 9000); setTimeout(function() { $(".slide04").fadeOut(2000); $(".slide01").fadeIn(2000); }, 15000); </script> <style> p.slide01, p.slide02, p.slide03, p.slide04 { position: absolute; } </style> <div class="slide"> <p class="slide01"><img src="images/image01.jpg" alt="" /></p> <p class="slide02" style="display:none;"><img src="images/image02.jpg" alt="" /></p> <p class="slide03" style="display:none;"><img src="images/image03.jpg" alt="" /></p> <p class="slide04" style="display:none;"><img src="images/image04.jpg" alt="" /></p> </div> ---------------------------------------------------------------- 下記の様にループさせようとすると何やら挙動がおかしくなってしまいます。。 ---------------------------------------------------------------- setInterval( function () { setTimeout(function() { $(".slide01").hide(); $(".slide02").show(); }, 3000); setTimeout(function() { $(".slide02").hide(); $(".slide03").show(); }, 6000); setTimeout(function() { $(".slide03").fadeOut(2000); $(".slide04").fadeIn(2000); }, 9000); setTimeout(function() { $(".slide04").fadeOut(2000); $(".slide01").fadeIn(2000); }, 15000); },0); ---------------------------------------------------------------- どのようにすればループさせることが出来るのでしょうか？ ご教授頂けると非常に助かります。 よろしくお願いします。

  • サムネイルで画像を切り替えるjQuery

    下記サイトを参考にサムネイルで画像を切り替えるjQueryを作成しました。 http://tam-tam.co.jp/tipsnote/javascript/post3351.html 自動で切り替えしないようにスクリプトを一部修正して下記を設置しています。 chromeなどでは問題なくスムーズに切り替わるのですが、 firefoxでは、メイン画像とサムネイルが切り替わる際に （フェードイン・フェードアウトの時） 背景が黒くなってしまいます。 また少し動作が不安定に感じます。 背景は白のままで、出来れば動作も改善させたいのですが、 原因が分からず困っています。 どなたか参考サイトのサンプルで原因が分かる方がおられましたら ご教授いただけないでしょうか。 どうぞ宜しくお願い致します。 $(function (){ //設定 var active="active",interval=6000; var index=0, timerId=null; var tabs=$("#thumbBtn > li"), content=$("#view > p"), cap=$("#caption > li"); //クラスの付与 tabs.each(function(){$(this).removeClass(active);}); content.hide(); cap.hide(); tabs.eq(0).addClass(active); content.eq(0).fadeIn("fast"); cap.eq(0).fadeIn("fast"); //クリックされたらactiveというクラスを付与、 //切り替え、タイマーをリセット tabs.click(function(){ if($(this).hasClass("active")) return; if(timerId) clearInterval(timerId),timerId=null; change(tabs.index(this)); setTimer(); return false; }); //タイマー // setTimer(); // function setTimer(){ // timerId=setTimeout(timeProcess,interval); // return false; // } function timeProcess(){ change((index+1)%tabs.length); timerId=setTimeout(arguments.callee,interval); } //切り替え function change(t_index){ tabs.eq(index).removeClass(active); tabs.eq(t_index).addClass(active); //fadeout setTimeout(function(){ content.eq(index).stop(true, true).fadeOut(3000), cap.eq(index).stop(true, true).hide() ;}, 300); //fadein setTimeout(function(){ index=t_index; content.eq(index).fadeIn(3000), cap.eq(index).fadeIn(3000) ;}, 400) } });

  • 画像がフェードイン・アウトするクラスの作り方教えて．．

    前置き：別に困っているわけでもありません ・こんな質問許されないかも（ご容赦を） ・自分で勉強しろと言われるかも（ごもっとも） ・ごみプログラムがさらにごみプログラムを生んでいるかも（ごめんなさい） 本題： いつぞやのタイトルくるくるのサンプルを基に、画像がフェードイン、 フェードアウトするオブジェクト指向っぽいスクリプトを作りました。 下のソースです。スタイル属性の変更をwindow.setIntervalを使って counter値に達するまでループ実行しているだけです。 似たような処理のfadeinクラスとfadeoutクラスを作って、 　fadein.start(ターゲット,インターバルミリ秒); 　fadeout.start(ターゲット,インターバルミリ秒); でフェードイン、フェードアウトを開始していますが、 fadeinクラスとfadeoutクラスをfadeinoutクラス一つにまとめちゃって、 fadeinoutクラスのメソッド(?)としてfadein、fadeoutを使えるように するには、どうやって作ればよいのかと言うのが質問です。 本当は、 　var myobj = new fadeinout(ターゲット,インターバルミリ秒); とインスタンスして 　myobj.fadein; 　myobj.fadeout; みたく使うためのコーディングがよくわからんのです。 抜本的に書き換えた方がよいのでしょうか... ＜作ったサンプル＞ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja-JP"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>FadeIn/FadeOut</title> <style type="text/css"></style> <script type="text/javascript" charset="utf-8"> <!-- var fadein = function (node,interval){ this.counter = 0; this.target = node; this.interval = interval; this.timerId = setInterval((function(that){ return function(){that.loop();}; })(this),this.interval); this.stop = function () { this.timerId && clearInterval(this.timerId); this.timerId = null; }; this.loop = function(){ this.target.style.width=this.counter+"px"; this.target.style.height=this.counter+"px"; this.target.style.opacity = this.counter / 100; this.target.style.filter = "alpha(opacity=" + this.counter + ")"; if( ++this.counter>100) this.stop(); }; }; var fadeout = function (node,interval){ this.counter = 100; this.target = node; this.interval = interval; this.timerId = setInterval((function(that){ return function(){that.loop();}; })(this),this.interval); this.stop = function () { this.timerId && clearInterval(this.timerId); this.timerId = null; }; this.loop = function(){ this.target.style.width=this.counter+"px"; this.target.style.height=this.counter+"px"; this.target.style.opacity = this.counter / 100; this.target.style.filter = "alpha(opacity=" + this.counter + ")"; if( --this.counter<0) this.stop(); }; }; fadein.start = function(target,interval){ new fadein(target,interval ); } fadeout.start = function(target,interval){ new fadeout(target,interval ); } function fadein_s(){ var target=document.getElementById("target"); fadein.start(target,1); } function fadeout_s(){ var target=document.getElementById("target"); fadeout.start(target,1); } // --> </script> </head> <body> <div> <image id="target" src="image/yahagi.png" style="width:0px;height:0px;"> </div> <button onclick="fadein_s();">フェードイン</button> <button onclick="fadeout_s();">フェードアウト</button> </body> </html>

  • 同一ページ内の複数のタグに同一のJQueryを実行

    JQuery初心者です 同一ページ内にサムネイル付ギャラリーを複数作り、 ギャラリーごとに横にスクロールする形で作っています。 今の状態ですと、1ページ目は正常動作で問題はありません。 ただ、1ページ目のJQuery処理前に<a href="#pege2">ページ2へ</a>で2ページ目にスクロールすると、2ページ目のメイン画像抜けてしまいます。 恐らく、前ページでのJQueryの処理が終了してないからだと思います。しばらくすると 前ページの処理が終了し2ページ目のメイン画像に反映されます。 これをどうにか<section id="pege●">ごと、もしくは<a href="#pege●">ページ●へ</a>をクリックしたらJQueryが実行する事が出来ないでしょうか？ 色々調べてみましたが、出来ませんでした。 ご享受の程、宜しくお願いいたします。 参照ページ（http://www.tam-tam.co.jp/tipsnote/javascript/post68.html） html（こんな感じで作ってます） <article> <section id="pege1"> <section id="view"><!-- メイン画像--> <p><img src="images/big_a01.jpg" width="" height="" alt="" /></p> <p><img src="images/big_a02.jpg" width="" height="" alt="" /></p> </section> <ul id="thumbBtn"><!-- サムネイル画像--> <li><img src="s_a01.jpg" width="" height="" alt="" /></li> <li><img src="s_a02.jpg" width="" height="" alt="" /></li> </ul> <div id="details"><!-- 説明--> <h2>説明文</h2> <p><a href="#pege2">ページ2へ</a></p> </div> </section></section> <section id="pege2"> <section id="view"><!-- メイン画像--> <p><img src="images/big_b01.jpg" width="" height="" alt="" /></p> ・以下同じ <p><a href="#pege3">ページ3へ</a></p> </section></section> <section id="pege3"> ・以下同じ </section></section> </section> </article> JQueryの記述は次の通りです。 <script type="text/javascript"> $(function (){ //設定 var active="active",interval=5000; var index=0, timerId=null; var tabs=$("#thumbBtn > li"), content=$("#view > p"), cap=$("#caption > li"); tabs.each(function(){$(this).removeClass(active);}); content.hide(); cap.hide(); tabs.eq(0).addClass(active); content.eq(0).fadeIn(0); cap.eq(0).fadeIn(0); //クリックされたらactiveというクラスを付与、 //切り替え、タイマーをリセット tabs.click(function(){ if($(this).hasClass("active")) return; if(timerId) clearInterval(timerId),timerId=null; change(tabs.index(this)); setTimer(); return false; }); //タイマー setTimer(); function setTimer(){ timerId=setTimeout(timeProcess,interval); return false; } function timeProcess(){ change((index+1)%tabs.length); timerId=setTimeout(arguments.callee,interval); } //切り替え function change(t_index){ tabs.eq(index).removeClass(active); tabs.eq(t_index).addClass(active); //fadeout setTimeout(function(){ content.eq(index).stop(true, true).fadeOut(0), cap.eq(index).stop(true, true).hide() ;}, 0); //fadein setTimeout(function(){ index=t_index; content.eq(index).fadeIn(0), cap.eq(index).fadeIn(0) ;}, 0) } }); </script>

  • substringとlengthの連携コード

    Smessage = Smessage.substring(2,Smessage.length) + Smessage.substring(0,2);の部分ですが、動きがイマイチわからないです。 substringで配列2つ目(= S2)とlengthで持ってきた値=4(だがsubstringの終了インデックスはその前の数字を考えるので3つ目= S3)を抜き出し、2つ目のsubstringで配列0番目(= S1)=と2番目(= S3)を抜き出し、 結果S2とS4　+ S1とS3をSmessageに代入しているんですか？ 順番としてはS2が最初に来て次にS4、 S1最後にS3が来るのではないんですか？ でも実行結果はS1、S2、S3、S4と順番通りになっています。この辺が良くわかりません。 <!DOCTYPE HTML> <html><head> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> <title></title> <script type="text/javascript"> <!-- var TC = 0 ; var S1 = "１つ目の空白 "; var S2 = "２つ目の空白 "; var S3 = "３つ目の空白 "; var S4 = "ここにメッセージ......。"; var Smessage = S1+S2+S3+S4; var timeID=setTimeout("",1) ; function Message() { if (TC < 1000) { TC++ ; window.status = Smessage; Smessage = Smessage.substring(2,Smessage.length) + Smessage.substring(0,2); clearTimeout(timeID) timeID = setTimeout("Message()",300); } else { window.status = " " } } //--> </script> <style type="text/css"> <!-- body { background-color: #AFEEEE; } --> </style> </head> <body onLoad="Message()"> ★ステータス行に文字を流してます </body></html>

  • Javascript スライドショー

    Webページを作成しているのですが、JavaScriptで指定フォルダ内の画像をスライドショー形式で表示したいと思って、以下のコードを書いたのですが、どうも、上手く動作しないです。 おそらく最後の $('#rotatingimage').fadeOut(1000,function(){ $(this).attr('src',images[currentImage].src); $(this).fadeIn(); } が上手く動いていないと思うのですが、よく分かりません。 どなたか、分かる方いらっしゃいましたら、教えて頂けると助かります。 よろしくお願い致します。 <script type='text/javascript'> var images=new Array(); images[0]='images/1.jpg'; images[1]='images/2.jpg'; images[2]='images/3.jpg'; images[3]='images/4.jpg'; var currentImage = 0; var preloaded=false; var preloading = false; function preload(){ preloading=true; for(var i=0; i<images.length; i++){ var img = new Image(); img.src=images[i]; images[i] = img; } preloaded=true; } function animateImages(){ // if already preloading, we just want to return nothing if(!preloaded && preloading) return; // if not preloaded, we want to preload if(!preloaded) preload(); // considering we have already loaded stuffs currentImage++; currentImage = currentImage % 4; $('#rotatingimage').fadeOut(1000,function(){ $(this).attr('src',images[currentImage].src); $(this).fadeIn(); } ); } </script>

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する