JavaScript控件轉變

Question

首先我是一個完整的新手，所以請作出相應的反應...

我已成功地創建具有三個html頁面動態序列中每1500毫秒加載一個iframe（www.online95.com/代理html.html）

在每個加載到iframe（/ budget，html，voluntary.html和robust.html）的html頁面中，我添加了一行圓圈（white = off和red = on），其中如果點擊將相應頁面加載到iframe中

問題是原始腳本沒有鏈接到單個html頁面，所以無論您手動將哪個頁面加載到iframe或加載它時，原始序列會持續每隔1500ms加載一次

我正在尋找一些腳本來將原始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 onload事件改變當前頁面的索引（i），

這裏是你如何能做到，

<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屬性，

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

UPDATE：

據我瞭解，你想改變的iframe頁面時用戶點擊（零頁頁單頁二）on this page.

你可以改變這樣的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"); 
     } 
    } 
}