Question

I’m new to Javascript, and JQuery. After searching the internet for solutions, I decided to post this question.

The problem: When the user clicks on a link within the iframe, it updates the progressbar on the parent, which is only triggered once. BUT, when the user goes to another page, and comes back, the page in the iframe is reloaded, and so is the javascript, meaning that the progressbar can be updated again for that button, which I don’t want. Is there any way of keeping track of which elements are clicked, after reload and disabling that function? URL-Parameters??

HTML in iframe:

<div id="sidenav">
   <ul>
      <li><a href="../right/section1/page1.html" target="presentation" class="active" name="position">positioning</a></li> 
      <li><a href="../right/section1/page2.html" target="presentation">comparisons</a></li>
    </ul>
</div>

Javascript in iframe page:

$('#sidenav ul li a').one('click', window.parent.updateBar);

Answer 1

Something like localStorage. The only drawback is that it is persistent even after rebooting etc, but you can reset the value if your complete website is reloaded. Also it’s not supported by IE7 and lower.

function updateBar() {
    if(localStorage['pressed'] == 'true') return; // abort if already pressed

    // do things

    localStorage['pressed'] = 'true'; // save the data that it is pressed
}