iFrameページリフレッシュ開始onload

以下のコードは、ドロップダウンが選択されている場合にのみ、iframeをリフレッシュします。これは素晴らしいことですが、誰かが初期値を変更したときにのみ開始されます。iFrameページリフレッシュ開始onload

親ページの値が変更されていない限り、親ページがデフォルト値の1分に読み込まれたときに起動しようとしています。

したがって、ページの読み込み時にデフォルト値が1分の場合、ユーザーは5分を選択して親ページを更新し、5分が表示され、その選択から自動的にタイマーが開始されます。しかし、ユーザーが最初に親ページをロードすると、1分が表示され、タイマーが開始されます。

私はonload関数でロードしようとしましたが、うまく動作しません。

<!DOCTYPE html> 
<html> 
<head> 

<title>refresh</title> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 

<script type="text/javascript"> 

     var interval = 0; 
var auto_refresh = 0; 
$(document).ready(function() { 
    $('#reload_interval').change(function() { 
    var reload = $(this).val(); 
    interval = reload * 1000; 
    if (auto_refresh) { 
     clearInterval(auto_refresh); 
    } 
    if (reload) { 
     auto_refresh = setInterval(function() { 
      // function to run 
     document.getElementById('iframe').contentWindow.location.reload(); 
      // 
     }, interval); 
    } 

    }); 
}); 
</script> 

</head> 
<body> 

<select id="reload_interval"> 
    <option></option> 
    <option value='10'>10 sec</option> 
    <option value='30'>30 sec</option> 
    <option value='60'>1 min</option> 
    <option value='300'>5 min</option> 
    <option value='600'>10 min</option> 
</select> 

<br><br> 

<iframe id="iframe" name="iframe" src="test.html" style="border-style: none; border:0px; background-color:transparent;" frameborder="0" width="743" height="300"></iframe> 

</body> 
</html>

出典

2017-03-10 New Era Fuels

あなたがどこかにその値を格納する必要がありますので、私はlocalStorageを選択した永続化するために選択された値を取得します。以下のコードを見て、物事がどこで起こるかを指摘するためにいくつかの注意を頼んでいるすべてのことを行うべきです。

<!DOCTYPE html> 
<html> 
<head> 

<title>refresh</title> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 

<script> 

    $(function(){ 

    // Set interval from localStorage or set it to 1 minute. 
    var interval = localStorage.interval ? localStorage.interval : 60000; 
    var autoRefresh; 

    // Separate function for setting interval to keep things clean. 
    var setter = function (val) { 
     var currentInterval = setInterval(function() { 
     $('iframe').attr('src', 'test.html'); 
     }, val); 
     return currentInterval; 
    } 

    // Create our handler function for the change event. 
    $('#reload_interval').change(function() { 
     // Update interval & localStorage.interval values 
     interval = $(this).val() * 1000; 
     localStorage.interval = interval; 

     // Clear our old interval and/or set the new one 
     if (autoRefresh) { clearInterval(autoRefresh); } 
     autoRefresh = setter(interval); 
    }); 

    // Set the <select> tag value 
    $('#reload_interval').val(localStorage.interval/1000); 
    // Fire the change event to set things going. 
    $('#reload_interval').trigger('change'); 
    }); 


</script> 

</head> 
<body> 

<select id="reload_interval"> 
    <option></option> 
    <option value='10'>10 sec</option> 
    <option value='30'>30 sec</option> 
    <option value='60'>1 min</option> 
    <option value='300'>5 min</option> 
    <option value='600'>10 min</option> 
</select> 

<br><br> 

<iframe id="iframe" name="iframe" src="test.html" style="border-style: none; border:0px; background-color:transparent;" frameborder="0" width="743" height="300"></iframe> 

</body> 
</html>

出典

2017-03-10 17:52:37

こんにちはLevi Mootz、これとコードポイントのおかげで、これは大いに助けになり、意味があります。私は気にしない2つの問題に気付いた。 1.ページが読み込まれると、最初のドロップダウン値が "0"であることがループに入ります。 2. iframeがリフレッシュされると、それをtest.htmlドキュメントに送り返します。現在のページをリロードするにはどうすればよいですか？例えば、このコードは「document.getElementById（ 'iframe'）.contentWindow.location.reload（）; ' –

です。これは私の問題を修正しました。ループ内でページをリフレッシュするif文を追加しました。 ' if（interval> 0）{autoRefresh = setter（interval）; } ' と私はフレームが現在のページにリロードし、デフォルトのtest.htmlページに戻って再ロードすることを許可している上記のコードスニペットを追加しました。ありがとうございます –

iFrameページリフレッシュ開始onload

答えて

関連する問題