Javascript - JQuery - clearInterval/setInterval - iframeサイクルがクリックで停止しない

私は一般的にJavascriptの新機能を備えており、このサイトでほとんど見つかったものから小さなスクリプトをまとめて小さなiframeを取得しようとしていますそれはすばらしいことです。しかし、ユーザーがiframeやその内容をクリックしたときにサイクリングを止めたいと思っています。Javascript - JQuery - clearInterval/setInterval - iframeサイクルがクリックで停止しない

これまでのコードは次のとおりです。 HTMLページにはiframeが1つしかありません。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<script type="text/javascript" charset="utf-8"> 
<!-- 
var sites = [ 
    "side/html5.html", 
    "side/silverlight.html", 
    "side/wordpress.html", 
    "side/mysql.html", 
    "side/php.html", 
    "side/css3.html" 
]; 
var currentSite = sites.length; 
var timerId; 
var iframeDoc = $("iframe").contents().get(0); 

$(document).ready(function() 
{ 
    var $iframe = $("iframe").attr("src","side/html5.html"); 

    timerId = setInterval(function() 
    { 
    (currentSite == 0) ? currentSite = sites.length - 1 : currentSite = currentSite -1; 
    $iframe.attr("src",sites[currentSite]); 
    }, 4000); 

    $(iframeDoc).bind('click', function() 
    { 
    clearInterval(timerId); 
    }); 

}); 
//--> 
</script> 
</head> 

<body> 

<sidebar> 
<iframe name="sideframe" src="side/html5.html"></iframe> 
</sidebar> ..etc..

私は早く私ができるようにJavascriptを学ぶしようとしていますが、私の知る限り、それは動作するはずですが、それは本当にない、助けてください。

ご協力いただきありがとうございます。本当に感謝しています。

EDIT：

さて、私はほとんどエリアスの仕事のオフに基づいて、新しいスクリプト今持っているが、それはどちらか動作しません。私はFirebugにそれを固定して、それを明示的にチェックする$ iframeのsrc値を見つけることができませんが、timerCallback.currentSiteの値が正しく更新されていると言っています。私が知る限り、変数を適切に更新しています。iframeを正しく更新していないだけです。私はこのコードでiframeを正しく呼び出す/設定していますか？また、私の目的のために十分なjqueryライブラリにリンクされていますか？私はこれがためのiFrameのヘッダを取得することができ、このため

var iframeDoc = $("iframe").contents().get(0);

のコードが動作していないと思う...

<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script> 
<script type="text/javascript" charset="utf-8"> 

<!-- 

var sites = 
[ 
    "side/html5.html", 
    "side/silverlight.html", 
    "side/wordpress.html", 
    "side/mysql.html", 
    "side/php.html", 
    "side/css3.html" 
]; 

var $iframe = $("iframe").attr("src","side/html5.html"); 

function timerCallback() 
{ 
    timerCallback.currentSite = (timerCallback.currentSite ? timerCallback.currentSite : sites.length) -1; 
    $iframe.attr("src",sites[timerCallback.currentSite]); 

    $($('iframe').contents().get('body')).ready(function() 
    { 
     $(this).unbind('click').bind('click',function() 
     { 
      var theWindow = (window.location !== window.parent.location ? window.parent : window); 
      theWindow.clearInterval(theWindow.timerId); 
     }); 
    }); 

} 

var timerId = setInterval(timerCallback, 4000); 

//--> 

</script>

出典

2012-04-20 Sarah Carter

また、ユーザーがiframeにマウスを乗せたときに一時停止するのはどうですか？ –

'$（ 'iframe'）'ビットは機能しません。ページのiframeの数に応じて1以上の配列が返されます。申し訳ありませんが、擬似コードです。 '$（ 'iframe'）[0]'を使ってみるか、iFrameにidをつけて '$（ '＃iFrameId'）' –

を使ってみてください。 '$（ 'iframe'）[0]は未定義です'をエラーとして返します（他の場合も同様です）。完全に： 'var $ iframe = $（ 'iframe'）[0] .attr（" src "、" side/html5.html "）;' - これをオンラインにして、実際に見てみましょう。編集：それはhttp://www.gandcdesign.co.uk/を参照してください。 –

にリンクするすべてのこれらのライブラリの失わ少しですiframeDocの値をiframeの最初の子、つまりheadタグに保存しています。実際にiframeDocがundefinedになるようにするには、iframeが1つ以上あれば、$("iframe")はドキュメントのすべてのiframeを取得します。

<iframe id="myFrame" src="http://www.google.com/"></iframe>

とスクリプト：今

BTW your currentSite value condition is wrong, you asign the same value for both conditions

私はあなたの例を与える

<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script> 
<script type="text/javascript"> 

var sites = [ 
"site1", 
"site2" 
]; 

var myFrame = document.getElementsByTagName('iframe')[0]; 
var currentSite = myFrame.getAttribute('src'); 
var timerId; 

var myFrameDoc = window.frames[0].document; 

$(document).ready(function() 
{ 
    myFrame.setAttribute('src', 'side/html5.html'); 

    timerId = setInterval(function() 
    { 
     //WRONGG 
     (currentSite == 0) ? currentSite = sites.length - 1 : currentSite = currentSite -1; 
     myFrame.setAttribute('src', sites[currentSite]); 
     $(myFrame).off("click").on("click", clearInterval(timerId)); 
    }, 4000); 

    //Won't work because you are trying to get events from an inside of a iframe 
    //$(myFrameDoc).on("click", clearInterval(timerId)); 
    //This may work 
    $(myFrameDoc).off("click").on("click", clearInterval(timerId)); 
}); 

</script>

あなたはので気をつけなければならないのiframeのイベントを追跡してみてください

iframeにはjavascript用の完全に異なる文書が含まれているので、基本的には新しい文書の中に入って、使用する必要があるイベントのバインドを解除し、agaiをバインドする必要があります@Eliasが指摘しているように、あなたの機能性に反します。あなたのiframeのsrcを常に変更していることに注意してください。そうすれば、本当にその必要がある場合は、clearIntervalをバインド解除してバインドするコードを分離する必要があります。その場合、おそらく $.on()が機能します。

EDIT：のiframeのsrcが同じポートで、同じプロトコルを使用して、同じドメイン内にある場合はiframeに呼び出すと、このように動作する必要があります

var myFrameDoc = window.frames[0].document;

私は新しい変数を追加しましたiframeのドキュメントではなく、iframeのドキュメントにclickイベントをバインドまたはアンバインドする必要があるため、そのウィンドウにはiframeを使用します。あなたがフレームにアクセスしようとすると、同じポートと同じプロトコルを使用していない場合、現代のブラウザは例外をスローし、アクセスを拒否します...

さらに$.on()$.bindと$.unbind()の代わりに$.off()を使用しているのは、最初のものが新しいものであり、ここで使用していないにもかかわらず、新しい要素が追加されるとバインドするDOMを常に監視できるからです。このコードがまだ機能しない場合は、この場合に役立つ可能性があります。

var myFrameDoc = window.frames[0].window;

と、これを：：その場合は、あなたはまだこれを変更することができます

$(myFrameDoc).off("click", "document").on("click", "document", clearInterval(timerId));

これは、新しいドキュメントの追加にイベントハンドラを再バインドします。テストされていませんが、動作します。

出典

2012-04-20 11:25:32

私は両方のソリューションDavidとEliasを試しましたが、残念ながらページを循環していないようです停止機能をテストするのが少し難しくなります。私はあなたが親ウィンドウと呼ばれるiframeの難しさに対してどこから来ているのかを見分けることができます。私はそれをデバッグするためにFirebugを使用しようとしていますが、ブレークポイントを打つのを拒否しています。それはまったく実行していないのとほぼ同じです... –

EDIT：Davidのコードで、myFrameが定義されていません。 getElementsByTagNameメソッド。 –

@SarahCarter：iFrameでのサイトの読み込みにアクセスできますか、それとも外部のものですか？さもなければ、最も速い修正は、jsファイルを書いて、それらをすべてのサイトに含めることです...またはajaxを使用して、コンテンツサーバー側を取得し、そこにjsを追加します。 –

私があなただったら、私は安全に遊んでいました。あなたはJSについてかなり新しいと言っているので、非常に参考になるかもしれません。

function timerCallback() 
{ 
    timerCallback.currentSite = (timerCallback.currentSite ? timerCallback.currentSite : sites.length) -1; 
    $iframe.attr("src",sites[timerCallback.currentSite]); 
} 
var timerId = setInterval(timerCallback, 4000); 
$($('iframe').contents().get('body')).unbind('click').bind('click', function() 
{ 
    var theWindow = (window.location !== window.parent.location ? window.parent : window); 
    theWindow.clearInterval(theWindow.timerId); 
});

今私は、このコードはすべてで、テストないであることを認めなければなりません。私はそれがあなたの方法であなたを得るために物事のカップルを提供してだと思うけど：

1）それがそのコールバックでの理由

図1b）のトンのためだけの方が良いですので、間隔は、コールバック関数を使用して設定され、I関数がオブジェクトであるという事実を利用して、静的変数を作成し、サイト配列の長さ（未定義または0のいずれか）に設定した場合は、どちらも1が減算されます

2）jQueryの,get()メソッドが戻りますjqueryオブジェクトではなくDOM要素であるため、必要なメソッドを提供する新しいjQ obj $()に入れました。

3）あなたはiFrameの内部DOMを操作していることから、それはiFrameの内側にあなたが

4をバインドしたいイベント）をバインド解除するのが最善です、あなたは親ウィンドウに直接アクセスすることはできませんが、あなたの間隔はです。

あなたは、彼らが随時

EDIT faffのビットをすることができるため、のiFrameに対処する方法をよく読んですることがあります

：これはにある周り デビッド・ディーツは右である、最も簡単な方法タイムアウト機能で結合を組み込む：

function timerCallback() 
{ 
    timerCallback.currentSide = ...//uncanged 
    //add this: 
    $($('iframe').contents().get('body')).ready(function() 
    { 
     $(this).unbind('click').bind('click',function() 
     { 
      //this needn't change 
     }); 
    }); 
}

理論的には、これは体にクリックイベントをバインドする必要があり、それが

Eがロードされた後dit2

私はちょっと迷っています。コードをそのままにしておくことができます。単に機能を追加：

function unsetInterval() 
{ 
    window.clearInterval(window.timerId); 
}

をし、あなたのsetInterval関数にこれを追加します。これは、すぐにiFrameのコンテンツがロードされているようにトリガを取得します

$('#idOfIframe').load(function() 
{ 
    var parentWindow = window.parent; 
    $('body').on('click',function() 
    { 
     parentWindow.clearInterval(); 
    }); 
});

、およびクリックイベントをバインドと解除あなたが望むように、タイマー

出典

2012-04-20 11:48:39

'$（ 'iframe'）。contents（）。get（ 'body'））。バインド（ 'クリック'）。 'はすばらしい、きちんとしたトリックですが、コードがiframe内のDOMを常に変化させているため、これが機能しないことに注意してください。基本的にiframe内のイベントを追跡することはできません。もし機能が分離されていれば、 '$ .bind（）'の代わりに '$ .on（）'で動作するかもしれません。 –

@DavidDiez：理論的な回避策を追加しました。テストはしませんでしたが、基本的な考え方は 'これは 'on 'と同じ効果を持つはずです –

Javascript - JQuery - clearInterval/setInterval - iframeサイクルがクリックで停止しない

答えて

関連する問題