Question

我为我的网络应用程序创建了一个主页面（包含页眉，侧边栏和页脚），我只使用元素加载来更改此页面的内容：

<aside class="main-sidebar">
    <!-- sidebar: style can be found in sidebar.less -->
    <section class="sidebar">
        <!-- sidebar menu: : style can be found in sidebar.less -->
        <ul class="sidebar-menu">
            <li class="header">MAIN NAVIGATION</li>
            <li sec:authorize="hasAnyRole('ROLE_ADMIN')">
                <a onCLick="testAction('/test')">
                    <i class="fa fa-search" aria-hidden="true"></i>
                    <span>Test</span>
                </a>
            </li>
        </ul>
    </section>
</aside>

<!-- Content Wrapper. Contains page content -->
<div id="main_content" class="content-wrapper"></div>
<footer class="main-footer"></footer>
<!-- Dashboard js -->
<script th:src="@{/static/assets/js/index.js?date=17102017}" type="text/javascript"></script>

在javascript中我有：

function testAction(url){
    $("#main_content").load(url, function(responseTxt, statusTxt, xhr){
        if(statusTxt == "error")
            $("#main_content").load("/404", function(responseTxt, statusTxt, xhr){              
            });
    });
}

通过这种方式，我只加载页面的内容，而不是像我在此更改之前那样加载所有页面（我使用了Thymeleaf Layout Dialect）。但我有一个问题：现在所有页面的网址都相同，因为我只更改了内容，现在后退/下一步按钮不起作用。我试过

window.history.pushState

但只更改网址并按回内容仍然相同。你知道如何让这些按钮工作吗？谢谢 PS：如果不存在嵌入式功能，我应该使用带有页面历史记录的列表，并在下一个/后退捕捉按钮上手动加载

仅当HTML内容发生更改时，浏览器返回/下一个箭头

0 个答案: