窗口popstate後2次點擊只觸發，每兩個

Question

OK，大家好，我是新來的堆棧溢出（只要被註冊而言），但經常用它來尋找解決方案。我已經搜索了我的問題，雖然我發現了幾篇與我的問題幾乎相關的文章和問題，但沒有一篇真正回答我的確切問題。非常抱歉，如果這已被問及一百萬次！

我是相當新的JQuery的，但必須有一些JavaScript的經驗一般。我對我試圖在我的新網站上實現的history.pushstate和history.popstate方法完全陌生。我沒有使用ajax來加載我在iframe中加載的內容，但同樣的原則適用，我需要頁面URL進行相應更新，並且能夠在瀏覽器中前後移動。

請在您的回答溫柔的我，而我是相當稱職的，因爲你會從我的代碼，我不是太先進的看！

好吧，我已經成功實現了pushstate，並且頁面加載似乎正常工作（示例在這裏... http://beta.casafondaradio.com），但是當我點擊瀏覽器後退按鈕時，它沒有達到預期效果。即似乎我必須點擊兩次popstate函數才能觸發。我搞不清楚我做錯了什麼。

在相關鏈接上使用onclick屬性觸發主函數。我知道有這樣做的更優雅的方式，但我只是想保持簡單易讀！

我的鏈接（在ASP.NET）的格式如下：

<li runat="server" data="home" id="liHome" class="menuList"><asp:HyperLink ID="hlHome" onclick="return pageLoader(this);" data="home" CssClass="menuLink" runat="server" ToolTip="Home | CasafondaRadio.com" NavigateUrl="~/"><i class="fa fa-home" aria-hidden="true"></i>&nbsp;HOME</asp:HyperLink></li> 
<li runat="server" data="schedule" id="liSched" class="menuList"><asp:HyperLink ID="hlSched" onclick="return pageLoader(this);" data="schedule" CssClass="menuLink" runat="server" ToolTip="Schedule | CasafondaRadio.com" NavigateUrl="~/schedule.aspx"><i class="fa fa-clock-o" aria-hidden="true"></i>&nbsp;SCHEDULE</asp:HyperLink></li> 
<li runat="server" data="events" id="liEvent" class="menuList"><asp:HyperLink ID="hlEvent" onclick="return pageLoader(this);" data="events" CssClass="menuLink" runat="server" ToolTip="Events | CasafondaRadio.com" NavigateUrl="~/events.aspx"><i class="fa fa-star" aria-hidden="true"></i>&nbsp;EVENTS</asp:HyperLink></li> 
<li runat="server" data="residentdjs" id="liDJs" class="menuList"><asp:HyperLink ID="hlDJs" onclick="return pageLoader(this);" data="residentdjs" CssClass="menuLink" runat="server" ToolTip="Resident DJs | CasafondaRadio.com" NavigateUrl="~/residentdjs.aspx"><i class="fa fa-headphones" aria-hidden="true"></i>&nbsp;DJS</asp:HyperLink></li> 
<li runat="server" data="about" id="liAbout" class="menuList"><asp:HyperLink ID="hlAbout" onclick="return pageLoader(this);" data="about" CssClass="menuLink" runat="server" ToolTip="About | CasafondaRadio.com" NavigateUrl="~/about.aspx"><i class="fa fa-info-circle" aria-hidden="true"></i>&nbsp;ABOUT</asp:HyperLink></li> 
<li runat="server" data="contact" id="liCont" class="menuList"><asp:HyperLink ID="hlCont" onclick="return pageLoader(this);" data="contact" CssClass="menuLink" runat="server" ToolTip="Contact | CasafondaRadio.com" NavigateUrl="~/contact.aspx"><i class="fa fa-envelope" aria-hidden="true"></i>&nbsp;CONTACT</asp:HyperLink></li> 
<li runat="server" data="webplayers" id="liPlay" class="menuList"><asp:HyperLink ID="hlPlay" onclick="return pageLoader(this);" data="webplayers" CssClass="menuLink" runat="server" ToolTip="Web Players | CasafondaRadio.com" NavigateUrl="~/webplayers.aspx"><i class="fa fa-cog" aria-hidden="true"></i>&nbsp;PLAYERS</asp:HyperLink></li> 

<iframe id="contentFrame" frameborder="0" style="height:100px;" scrolling="no" src='<asp:Literal ID="mainFrameSource" runat="server"></asp:Literal>'></iframe> 

在頭節我的JavaScript代碼...身體前

<script type="text/javascript"> 
     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'); 
     } 
    </script> 

我在JavaScript代碼關閉標記是...

<script type="text/javascript"> 
     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(); 
    </script> 

如上所述，我已經將示例上傳到上面鏈接的測試版網址，它位於當前狀態（即不工作）。任何幫助將不勝感激，顯然我做錯了什麼，但我不知道它是什麼。

在此先感謝！

解決！ 修改了我的loadPageData()功能如下...

function loadPageData(urlToOpen) { $('#contentFrame').remove(); var ifr = $('<iframe/>', { id: 'contentFrame', src: '/' + urlToOpen, style: 'height:100px;', load: function() { resizeiFrame(); } }); $('#frameContainer').append(ifr); }

而且在它原來的iframe加入frameContainer的ID給DIV！

Answer 1

好吧，我解決了它...這是iframe這是問題，更改src是從iframe推入歷史記錄項。因此，第一次點擊後面的內容是將iframe放回去，而不是觸發頂部windowpopstate。我的解決方案是重寫iframe。我用我的新代碼更新了我的「問題」。