0

まったくの初心者ですので、よろしければ回答お願いします。...

1500 ミリ秒ごとに 3 つの html ページが順番に動的にロードされる iframe を作成することができました (www.online95.com/agency.html)。

iframe (/budget,html、voluntary.html、robust.html) にロードされる各 html ページに、円 (白 = オフ、赤 = オン) の行を追加しました。これをクリックすると、対応するページがiframe

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

/agency.html の元の javascript に変数を保存するスクリプトを探しています。これにより、次の動的ページの読み込みは、ページが手動で読み込まれた後のものになり、タイマーを休ませます。

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

どうもありがとう

4

2 に答える 2

1

あなたの質問に答える前に、これは本当に悪い習慣であると言わなければなりません、あなたはjQueryとjQueryスライダープラグインを使うことができます、それはより効果的です。

やりたいことをするのはiframeでもっと複雑になりますが、それはできます。現在のページインデックス（i）を変更するには、iframeonloadイベントを使用する必要があります。

これがあなたができる方法です、

<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）。

このように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");
         } 
    }
}
于 2012-04-24T16:29:44.093 に答える
0

私の提案は、読み込まれたページにコントロールを持たないことです。これまで見てきたように、ロードされた異なるページ間のスクリプトは非常に複雑になる可能性があり、スクリプトが実際に意図しているものではありません。

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

次に、タイマーを変数に保存し ( var timer = window.setTimeout(...))、ユーザーがコントロールの 1 つをクリックしたときにタイマーをキャンセルするだけです ( controls.onclick = function(timer) { window.clearTimeout(timer); }) 。

于 2012-04-24T15:17:48.153 に答える