title: window popstate only being triggered after 2 back clicks, and every two
body: <p>OK, hi all, I am new to Stack Overflow (as far as being registered is concerned) but use it regularly to find solutions. I have had a search for my problem, and while I have found several articles and questions almost relating to my issue, none really answer my exact problem. So apologies if this has been asked a million times!</p>
  
  <p>I am fairly new to JQuery, but have have some experience of JavaScript generally. I am totally new to the history.pushstate and history.popstate methods which I am trying to implement on my new website. I am not using ajax to load content I am loading it in an iframe, but the same principles apply, I need the page URL to update accordingly and be able to go back and forwards in the browser.</p>
  
  <p>Please be gentle with me in your answers, while I am fairly competent, as you will see from my code I am not overly advanced!</p>
  
  <p>OK, I have successfully implemented the pushstate, and the page loading seems to work fine (the example is here... <a href="http://beta.casafondaradio.com" rel="nofollow">http://beta.casafondaradio.com</a> ) but when I click the browser back button, it is not having the desired effect. i.e. it seems that I have to click it twice for the popstate function to fire. I can't work out what it is I am doing wrong.</p>
  
  <p>The main function is fired with an onclick attribute on the relevant links. I know there is a more elegant way of doing this, but I just wanted to keep it simple and legible for me!</p>
  
  <p>My links (in ASP.NET) are formatted as follows:</p>
  
  <pre><code>&lt;li runat="server" data="home" id="liHome" class="menuList"&gt;&lt;asp:HyperLink ID="hlHome" onclick="return pageLoader(this);" data="home" CssClass="menuLink" runat="server" ToolTip="Home | CasafondaRadio.com" NavigateUrl="~/"&gt;&lt;i class="fa fa-home" aria-hidden="true"&gt;&lt;/i&gt;&amp;nbsp;HOME&lt;/asp:HyperLink&gt;&lt;/li&gt;
  &lt;li runat="server" data="schedule" id="liSched" class="menuList"&gt;&lt;asp:HyperLink ID="hlSched" onclick="return pageLoader(this);" data="schedule" CssClass="menuLink" runat="server" ToolTip="Schedule | CasafondaRadio.com" NavigateUrl="~/schedule.aspx"&gt;&lt;i class="fa fa-clock-o" aria-hidden="true"&gt;&lt;/i&gt;&amp;nbsp;SCHEDULE&lt;/asp:HyperLink&gt;&lt;/li&gt;
  &lt;li runat="server" data="events" id="liEvent" class="menuList"&gt;&lt;asp:HyperLink ID="hlEvent" onclick="return pageLoader(this);" data="events" CssClass="menuLink" runat="server" ToolTip="Events | CasafondaRadio.com" NavigateUrl="~/events.aspx"&gt;&lt;i class="fa fa-star" aria-hidden="true"&gt;&lt;/i&gt;&amp;nbsp;EVENTS&lt;/asp:HyperLink&gt;&lt;/li&gt;
  &lt;li runat="server" data="residentdjs" id="liDJs" class="menuList"&gt;&lt;asp:HyperLink ID="hlDJs" onclick="return pageLoader(this);" data="residentdjs" CssClass="menuLink" runat="server" ToolTip="Resident DJs | CasafondaRadio.com" NavigateUrl="~/residentdjs.aspx"&gt;&lt;i class="fa fa-headphones" aria-hidden="true"&gt;&lt;/i&gt;&amp;nbsp;DJS&lt;/asp:HyperLink&gt;&lt;/li&gt;
  &lt;li runat="server" data="about" id="liAbout" class="menuList"&gt;&lt;asp:HyperLink ID="hlAbout" onclick="return pageLoader(this);" data="about" CssClass="menuLink" runat="server" ToolTip="About | CasafondaRadio.com" NavigateUrl="~/about.aspx"&gt;&lt;i class="fa fa-info-circle" aria-hidden="true"&gt;&lt;/i&gt;&amp;nbsp;ABOUT&lt;/asp:HyperLink&gt;&lt;/li&gt;
  &lt;li runat="server" data="contact" id="liCont" class="menuList"&gt;&lt;asp:HyperLink ID="hlCont" onclick="return pageLoader(this);" data="contact" CssClass="menuLink" runat="server" ToolTip="Contact | CasafondaRadio.com" NavigateUrl="~/contact.aspx"&gt;&lt;i class="fa fa-envelope" aria-hidden="true"&gt;&lt;/i&gt;&amp;nbsp;CONTACT&lt;/asp:HyperLink&gt;&lt;/li&gt;
  &lt;li runat="server" data="webplayers" id="liPlay" class="menuList"&gt;&lt;asp:HyperLink ID="hlPlay" onclick="return pageLoader(this);" data="webplayers" CssClass="menuLink" runat="server" ToolTip="Web Players | CasafondaRadio.com" NavigateUrl="~/webplayers.aspx"&gt;&lt;i class="fa fa-cog" aria-hidden="true"&gt;&lt;/i&gt;&amp;nbsp;PLAYERS&lt;/asp:HyperLink&gt;&lt;/li&gt;
  
  &lt;iframe id="contentFrame" frameborder="0" style="height:100px;" scrolling="no" src='&lt;asp:Literal ID="mainFrameSource" runat="server"&gt;&lt;/asp:Literal&gt;'&gt;&lt;/iframe&gt;
  </code></pre>
  
  <p>My Javascript code in the head section is...</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
          function resetiFrame(obj) {
              $('#contentFrame').css("height", "100px");
          }
          function resizeiFrame(obj) {
              if ($('#contentFrame').attr('src') != '') {
                  var dochgt = $(obj.contentWindow.document).height();
                  $('#contentFrame').css("height", dochgt + "px");
              }
          }
  
          // Page Loader Functions
          var pageUrl = "", pageTitle = "", pageRef = "", pageContent = "",
          lastPageUrl = "", lastPageTitle = "", lastPageRef = "", lastPageContent = "";
  
          init = function() {
              // Do this when a page loads.
              // Page initialisation stuff will go here
          };
  
          function pageLoader(objLink) {
              var data = objLink.getAttribute('data'),
                  titText = objLink.getAttribute('title'),
                  url = objLink.getAttribute('href');
  
              // alert('data = ' + data + '\ntitle = ' + titText + '\nurl = ' + url);
  
              lastPageUrl = pageUrl; lastPageTitle = pageTitle; lastPageRef = pageRef; lastPageContent = pageContent;
              pageUrl = url; pageRef = data; pageTitle = titText; pageContent = data + "Content.aspx";
              historyUpdate(pageRef, pageTitle, pageUrl);
              loadPageData(pageContent);
              addActiveClass(data);
              return false;
          }
  
          function historyUpdate(data, title, url) {
              window.history.pushState(data, title, url);
          }
  
          function loadPageData(urlToOpen) {
              $("#contentFrame").attr('src', urlToOpen);
              init();
          }
  
          function addActiveClass(data) {
              $('#list li').removeClass('active');
              $('.menuList').filter('[data="' + data + '"]').addClass('active');
          }
      &lt;/script&gt;
  </code></pre>
  
  <p>My javascript code in the before body close tag is...</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
          theiFrame = document.getElementById("contentFrame");
  
          $('#contentFrame').load(function () {
              resetiFrame(theiFrame);
              resizeiFrame(theiFrame);
          });
  
          $(window).resize(function () {
              resetiFrame(theiFrame);
              resizeiFrame(theiFrame);
          });
  
          $(window).on("popstate", function (e) {
              var origState = e.originalEvent.state;
              if (origState !== null) {
                  // Load previous content
                  alert(origState);
                  if (origState == lastPageRef) {
                      alert("is last Page Ref!");
                  }
              } else {
                  alert('else : ' + e.originalEvent.state);
              }
          });
  
          init();
      &lt;/script&gt;
  </code></pre>
  
  <p>As mentioned I have uploaded the example to the beta URL linked above and it is in the current state (i.e. not working). Any help would be greatly appreciated, clearly I am doing something wrong, but I have no clue what it is.</p>
  
  <p>Thanks in advance!</p>
  
  <p><strong>RESOLVED!</strong>
  Modified my <code>loadPageData()</code> function as follows...</p>
  
  <p><code>function loadPageData(urlToOpen) {
          $('#contentFrame').remove();
          var ifr = $('&lt;iframe/&gt;', {
              id: 'contentFrame',
              src: '/' + urlToOpen,
              style: 'height:100px;',
              load: function () {
                  resizeiFrame();
              }
          });
          $('#frameContainer').append(ifr);
      }</code></p>
  
  <p>And added an ID of <code>frameContainer</code> to the DIV with the original <code>iframe</code> in it!</p>