Question

我在使用pushstate / popstate的WebForms中遇到问题。 popstate event.state通常是未定义的，而document.location是它刚在其页面上的URL。

在这种情况下，我正在尝试在configuration.aspx中使用div来加载用户请求的内容。然后，我更新浏览器历史记录以反映内容的变化。

示例：

myserver / configuration / home
myserver /配置/安全性/用户
myserver /配置/安全性/用户组

我的路线定义为：

routes.MapPageRoute("configurationRoute", "configuration", "~/pages/configuration.aspx");
routes.MapPageRoute("configurationHome", "configuration/{GroupName}", "~/pages/configuration.aspx");
routes.MapPageRoute("configurationRouteWithSubPage", "configuration/{GroupName}/{SubPage}", "~/pages/configuration.aspx");

下面是我用于pushState的代码。

function showContent(g, s) {
    var pageName = getPageName(g, s);                    
    $("#dynamicContent").load(pageName, null, function (content) {                
        var pageHistory = '/configuration' + pageName.substring(basePath.length - 1);
        if (pageHistory.indexOf('.aspx')) 
          pageHistory = pageHistory.substring(0, pageHistory.length - 5);
        var subTitle = groupName.length > 0 ? groupName + '|' + subPage : subPage;
        var title = brand + ' [Configuration (' + subTitle + ')]';
        window.history.pushState(subTitle, title, pageHistory);
        document.title = title;
        $(this).hide().fadeIn("slow");
    });
}

当用户单击“后退”按钮时，我只想用正确的内容更新页面。

window.addEventListener('popstate', function (event) {
    var area = '';
    var groupName = '';
    var pageName = '';
    var segments = document.location.pathname.split('/');        
    area = segments[1];
    if(segments.length > 2){
        groupName = segments[2];
        pageName = segments[3];            
    }
    if (area.toLowerCase() === 'configuration') {                
        showContent(groupName, pageName);                
    }
    else { console.log("Nothing Doing: "); }
});

加载内容效果很好。用户第一次单击也可以正常工作。之后，每次单击后退按钮就是一次又一次的同一页面。

复制步骤：

打开浏览器
导航到Stackoverflow.com <<-加载正常
导航到您的站点<<-加载正常
导航到每个子页面<<-加载正常
- 安全性/用户
- 安全/用户组
- 管理/列表
单击后退按钮<<-加载正常
再次单击它<<-请求相同的页面URL，URL历史记录被修剪为（SO，初始页，安全性/用户组）。您无法单击回到SO网站。

我正在引用jquery-3.2.0.min.js，如果有帮助的话。

我要去哪里错了？

如何在WebForms中使用pushstate / popstate？

0 个答案: