Question

好的，大家好，我是Stack Overflow的新手（就注册而言），但经常使用它来寻找解决方案。我已经找到了我的问题，虽然我发现了几个与我的问题几乎有关的文章和问题，但没有一个真正回答我的确切问题。如果这被问了一百万次，那就道歉了！

我对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); }

并在DIV中添加了frameContainer的ID，其中包含原始iframe！

Answer 1

好的，我已经解决了......问题是iframe，更改src正在从iframe推送历史记录条目。因此，第一次点击后退是将iframe取回而不是点击顶部window popstate。我的解决方案是重写iframe。我用新代码更新了上面的“问题”。

window popstate仅在2次单击后触发，每两次触发一次

1 个答案: