아래 코드는 드롭 다운이 선택된 경우에만 iframe을 새로 고칩니다. 이것은 훌륭하지만 누군가가 초기 값을 변경할 때만 시작됩니다.
그 이후로 값이 변경되지 않는 한 상위 페이지가 기본값 인 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>
선택한 값을 유지하려면 해당 값을 어딘가에 저장해야하므로 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>
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다