iFrameのページ遷移のJavascriptの制御

Question

まず、私は完全な初心者だそう...それに応じ

をご回答下さい私は3つのhtmlページを動的シーケンス内のすべての1500msをロードすると、IFRAMEを作成するために管理している（www.online95.com/ （/ budget、html、voluntary.html、robust.html）に読み込まれているhtmlページのそれぞれに、円の列を追加しました（白=オフ、赤=オン）。クリックされた場合、対応するページをiframeにロードする

問題は、元のスクリプトが個々のHTMLページにリンクされていないことです元のシーケンスは、iframeに手動でロードしたページや読み込んだページに関係なく、1500ミリ秒ごとにロードされ続けます。

元のjavascriptの変数を/agency.htmlに置き換えるスクリプトを探しています。次dymanicページのロードを手動でロードされたページの後に一つである。また、私は

に私の提案は、ドンになり感謝

Answer 1

を一時停止ボタンを追加できるようにしたいと思い

にタイマーを休まます読み込まれたページにコントロールがありません。ご存じのように、読み込まれた異なるページ間のスクリプトは非常に複雑になる可能性があり、スクリプトが実際に意図するものではありません。

私は親ページにコントロールを保持します。 position:absolute; z-index:2;とtop/bottom: XYZpx; left/right: ABCpx;を使用して、それらを正しく配置し（親と同様にposition:relative）、正しい背景設定を使用して、それらをオーバーレイするように見えるようにすることができます。

は次にあなたがする必要があるだろう、すべての変数（var timer = window.setTimeout(...)）でタイマーを格納し、ユーザーがあなたの質問に答える前に、コントロールのいずれか（controls.onclick = function(timer) { window.clearTimeout(timer); }）

Answer 2

をクリックしたときに、私はこれがあると言っている、それをキャンセルしています本当に悪い練習、あなたはjQueryとjQuery Slider Pluginを使用することができます、それはより効果的です。

iframeでもっとうまくいくのですが、できます。あなたは

は

は

<iframe id="agencyframe" onload="contentChanged(this)" src="/budget.html"> 
</iframe> 

、あなたが行うことができる方法である

<script type="text/javascript"> 

var pages=new Array(); 
     pages[0]="/budget.html"; 
     pages[1]="/voluntary.html"; 
     pages[2]="/robust.html"; 

var i=0; 
var time=4000; // this is set in milliseconds 
var timer = false; 
var timerSetter; 

function pageChange() { 
document.getElementById("agencyframe").src=pages[i]; 
i++; 
if(i==pages.length) { 
    i=0; 
} 
timerSetter = setTimeout("pageChange()",time); 
} 

function contentChanged(e) { 
    if (!timer) { pageChange(); timer=true;} 
    if (timerSetter) { 
     clearTimeout(timerSetter); 
     timerSetter = setTimeout("pageChange()",time); 
    } 
    var newSrc = e.contentWindow.location.href; 
    for (var j=0; j < pages.length; j++) { 
     if (newSrc.match(pages[j])) { 
      i = j+1; 
      if(i==pages.length) { 
       i=0; 
      } 
     } 
    } 
} 
</script> 

とiframeのためのonload属性を設定することを忘れないでくださいここ

、現在のページインデックス（i）を変更するためのiframeのonloadイベントを使用する必要があります

UPDATE：

私はあなたがインラインフレームのページを変更したい理解したように、ユーザーのクリック（ページゼロページ1ページ2）あなたはこのようなIFRAMEの場所を変更することができます

、

document.getElementById("agencyframe").src = "/budget.html"; 

はそう

function pageZero() { 
    document.getElementById("prin_div1").setAttribute("class", "prin_on"); 
    document.getElementById("prin_div2").setAttribute("class", "prin_off"); 
    document.getElementById("prin_div3").setAttribute("class", "prin_off"); 
    document.getElementById("agencyframe").src = pages[0]; 
} 

function pageOne() { 
    document.getElementById("prin_div1").setAttribute("class", "prin_off"); 
    document.getElementById("prin_div2").setAttribute("class", "prin_on"); 
    document.getElementById("prin_div3").setAttribute("class", "prin_off"); 
    document.getElementById("agencyframe").src = pages[1]; 
} 

function pageTwo() { 
    document.getElementById("prin_div1").setAttribute("class", "prin_off"); 
    document.getElementById("prin_div2").setAttribute("class", "prin_off"); 
    document.getElementById("prin_div3").setAttribute("class", "prin_on"); 
    document.getElementById("agencyframe").src = pages[2]; 
} 

、このようなあなたの機能を変更するUPDATE -2：よう

変更contentChanged機能これは、

function contentChanged(e) { 
    if (!timer) { pageChange(); timer=true;} 
    if (timerSetter) { 
     clearTimeout(timerSetter); 
     timerSetter = setTimeout("pageChange()",time); 
    } 
    var newSrc = e.contentWindow.location.href; 
    for (var j=0; j < pages.length; j++) { 
     if (newSrc.match(pages[j])) { 
      i = j+1; 
      document.getElementById("prin_div"+i).setAttribute("class", "prin_on"); 
      if(i==pages.length) { 
       i=0; 
      } 
     } else { 
      document.getElementById("prin_div"+(j+1)).setAttribute("class", "prin_off"); 
     } 
    } 
}