CODEWITHSUNDEEP
javascriptmeta-tags
user1162541
user1162541

Reputation:

Can I stop a meta refresh using javascript?

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).

Upvotes: 13

Views: 16659

Answers (4)

Amresh
Amresh

Reputation: 363

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);

}

Upvotes: 3

Claudio P
Claudio P

Reputation: 2203

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");

Upvotes: 18

Spectator
Spectator

Reputation: 79

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>

Upvotes: 1

tvanfosson
tvanfosson

Reputation: 532505

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>

Upvotes: 4

Related Questions