Question

首先我是一个完整的新手所以请相应地做出回应......

我设法创建一个iframe，每隔1500毫秒依次动态加载三个html页面（www.online95.com/agency.html）

在每个加载到iframe（/ budget，html，voluntary.html和robust.html）的html页面上，我添加了一行圆圈（white = off和red = on），如果点击加载相应的页面进入iframe

问题是原始脚本没有与各个html页面链接，因此原始序列每1500ms继续加载，无论您手动加载到iframe的哪个页面或加载它时

我正在寻找一些脚本来保留/agency.html上原始javascript中的变量，以便下一个动态页面加载将是手动加载页面之后的那个并将计时器停留到

此外，我希望能够添加暂停按钮

非常感谢

Answer 1

在回答你的问题之前，我不得不说这是一个非常糟糕的做法，你可以使用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>

<强>更新

据我了解，您希望在用户点击时更改iframe页面（第0页，第1页，第2页）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];
}

更新-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");
         } 
    }
}

Answer 2

我的建议是，在加载的页面上没有控件。正如您所看到的，不同加载页面之间的脚本可能非常复杂，并不是脚本真正用于的目的。

我会将控件保留在父页面上。您可以使用position:absolute; z-index:2;和top/bottom: XYZpx; left/right: ABCpx;正确定位它们（以及父级position:relative）并更正背景设置，使它们看起来叠加。

然后您需要做的就是将计时器存储在变量（var timer = window.setTimeout(...)）中，并在用户单击其中一个控件（controls.onclick = function(timer) { window.clearTimeout(timer); }）

时将其取消

iFrame页面转换的Javascript控件

2 个答案: