How do you stop a javascript showing on refresh/browser back?

Forum Moderators: open

Message Too Old, No Replies

How do you stop a javascript showing on refresh/browser back?

internetheaven

9:49 pm on Mar 8, 2013 (gmt 0)

If you have a javascript that loads a popup form when the user lands on the site - how do you stop that form showing again on that page if:

a) the user refreshes the page.

b) the user follows a link on the page but clicks "back" on their browser.

I only want the form to load once. e.g.

<SCRIPT type=\"text/javascript\">
if (document.getElementById || document.all)
document.write('<script type="text/javascript" src="http://www.mysite.com/form.js"><\/script>')
</SCRIPT>

How do I make the stuff in the document.write area not happen/vanish on refresh or browser back?

Thanks
Mike

Fotiman

9:59 pm on Mar 8, 2013 (gmt 0)

You'd probably want to write to a cookie when the form is shown the first time, then check that cookie to see if it's been shown.

internetheaven

9:41 am on Mar 12, 2013 (gmt 0)

Okay, well I have this script:

<script type="text/javascript">

function createCookie(name,value) {
var expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}

function eraseCookie(name) {
createCookie(name,"",-1);
}

if (!readCookie('oneOff')){
document.write('My message is here.');
createCookie('oneOff', 'oneOff');
}

</script>

but it won't work in IE9? Only Chrome, Firefox, Safari and IE6 ... any ideas?

phranque

10:43 am on Mar 12, 2013 (gmt 0)

have you checked your Privacy and Security settings in IE9's Internet Options?

Fotiman

1:23 pm on Mar 12, 2013 (gmt 0)

I'm not sure. I don't have IE9 available at the moment, but it works in IE8. Here's a complete test I put together quickly (note, the document.write version worked too, but I modified it to use jQuery's append method instead):


<!doctype html>
<html>
<head>
<title>Cookie Example</title>
</head>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
function createCookie(name,value) {
  var expires = "";
  document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
  var nameEQ = name + "=";
  var ca = document.cookie.split(';');
  for(var i=0;i < ca.length;i++) {
    var c = ca[i];
    while (c.charAt(0)==' ') c = c.substring(1,c.length);
    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
  }
  return null;
}

function eraseCookie(name) {
  createCookie(name,"",-1);
}

// The first time through, this will display 'My message is here'.
// The second time, it will display 'oneOff'.
var cookieValue = readCookie('oneOff');

if (!cookieValue){
  $(document.body).append(
    $('<div></div>', {
      text: 'The cookie was not set. Setting it now to "Hello World"'
    })
  );
  createCookie('oneOff', 'Hello World');
}
else {
  // The cookie was set
  $(document.body).append(
    $('<div></div>', {
      text: cookieValue
    })
  );
}

$(document.body).append(
  $("<input>", {
    type: 'button',
    value: 'Erase Cookies'
  })
  .on('click', function() {
    eraseCookie('oneOff');
    alert('Nom Nom Nom! Cookie eaten! Refresh the page to test.');
  })
);
</script>
</body>
</html>

internetheaven

8:08 pm on Mar 12, 2013 (gmt 0)

Thank you very much for your help and I may try that more modern version.

As for the original, I found the problem ... the doctype needed to be changed from html to xhtml.

Seriously ... six hours of trying everything else and THAT was the problem? I don't even know why. It was just another random-fingers-crossed change that seemed to work!