Menu
The following code allows the user to stop the meta refresh from happening - and it successfully removes the meta refresh from the page, but the browser nonetheless refreshes the page. Any idea how to make it work?
<!doctype html>
<html>
<head>
<title>Test</title>
<meta charset="UTF-8" />
<meta http-equiv="refresh" content="5" id="refresh" />
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
$(function(){
$("a").click(function(e){
e.preventDefault();
$("#refresh").remove();
});
});
</script>
</head>
<body>
Reloaded at <span id="time"></span>
<script>
document.getElementById("time").innerHTML = Date();
</script>
<a href="#">Stop refresh</a>
</body>
</html>
EDIT: this is different from this question because that question wants a fallback solution for users not supporting javascript - this is not the case for me (most of the answers to that question do not apply to this question).
379
Just for completeness and not my recommended way. You could call:
window.stop();
To stop loading the window. Internet Explorer doesn't support this and you have to to this:
document.execCommand("Stop");
I don't think you'll be able to do this because the header is read when the page is loaded and the browser will schedule the refresh. I do not think the browser gives you a way to cancel that since it's effectively an HTTP header, not part of the document. It would be better to add an onload handler for the body element that uses a timer to schedule the refresh, then have your click handler cancel the timer.
<script type="text/javascript">
$(function(){
var timer;
$('body').on('load', function() {
timer = setTimeout(refresh, 5000);
});
$("a").click(function(e){
e.preventDefault();
if (timer) {
clearTimeout(timer);
timer = null;
}
});
function refresh() {
timer = null;
document.location.reload(true);
}
});
</script>
This worked for me wonderful! (tried in chrome)
<button onclick="pauseshow()"><img id="myImg" src="images/pause.jpg" width="45" height="45" style="position:absolute; top:10px; left:1200px;" ></button>
function pauseshow()
{
window.stop();
// Below did not work -->
// var mr = document.getElementById("mymetatag");
// mr.parentNode.removeChild(mr);
}
You are not able to remove the header later via javascript since the reload is triggert while loading the page. But deferred by 5 sec.
Instead you could change the way of thinking and reload the page with javascript instead of the meta tag:
<!doctype html>
<html>
<head>
<title>Test</title>
<meta charset="UTF-8" />
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
var timer = setTimeout(function() {
window.location = window.location;
}, 5000);
$(function(){
$("a").click(function(e){
e.preventDefault();
clearTimeout(timer);
});
});
</script>
</head>
<body>
Reloaded at <span id="time"></span>
<script>
document.getElementById("time").innerHTML = Date();
</script>
<a href="#">Stop refresh</a>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
