iFrame 页面过渡的 Javascript 控制

Javascript control of iFrame page transitions

本文关键字：Javascript 控制 iFrame      更新时间：2023-09-26

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

我已经设法创建了一个 iframe，其中包含每 1500 毫秒（www.online95.com/agency.html）按顺序动态加载三个 html 页面

在加载到iframe中的每个html页面（/budget，html，自愿.html和健壮.html）上，我添加了一排圆圈（白色=关闭和红色=打开），如果单击，则将相应的页面加载到iframe中

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

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

到

我也希望能够添加一个暂停按钮

非常感谢

在回答你的问题之前，我不得不说这是一个非常糟糕的做法，你可以使用 jQuery 和一个 jQuery 滑块插件，它会更有效。

做你想做的事对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页面。

您可以像这样更改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");
         } 
    }
}
我的

建议是，不要在加载的页面上使用控件。如您所见，不同加载页面之间的脚本可能非常复杂，并不是脚本的真正用途。

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

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

相关文章：