如何使浏览器的前进和后退的工作在一个单一的页面布局?(How to make browser bac

2019-06-28 02:12发布

作为后续问题: 最有效的方法做一个横向滑动的布局 ,是有可能使用单页面布局一样,当使浏览器的前进和后退按钮的工作?

Answer 1:

您可以使用历史API在HTML5来实现这一目标。

这里有一些资源,让你开始:

  • http://diveintohtml5.info/history.html
  • http://html5demos.com/history
  • https://developer.mozilla.org/en-US/docs/DOM/Manipulating_the_browser_history

要获得旧版浏览器的支持,以及有JavaScript库,使的是:

  • https://github.com/browserstate/History.js/

高级例如通过Chrome团队,使用历史API:

  • http://www.20thingsilearned.com/en-US


Answer 2:

是的,你可以使用HTML5历史API来实现它。

  • 演示: http://html5demos.com/history
  • 文档: http://diveintohtml5.info/history.html


Answer 3:

在旧的方式,你可以尝试使用书签,例如

    <html>
    <head>
        <script type="text/javascript">
            function goPage (v) {
                var idisplay = v == 'i',
                    adisplay = v == 'a',
                    bdisplay = v == 'b';
                document.getElementById('anchor_i').style.display = idisplay? 'none' : 'block';
                document.getElementById('anchor_a').style.display = adisplay? 'none' : 'block';
                document.getElementById('anchor_b').style.display = bdisplay? 'none' : 'block';

                document.getElementById('content_i').style.display = idisplay? 'block' : 'none';
                document.getElementById('content_a').style.display = adisplay? 'block' : 'none';
                document.getElementById('content_b').style.display = bdisplay? 'block' : 'none';
            }
        </script>
    </head>
    <body>
        <a name="index"></a>
        <div id="content_i">
            index
        </div>

        <a id="anchor_i" href="#index" onclick="goPage('i');" style="display: none">to index</a>
        <a id="anchor_a" href="#page_a" onclick="goPage('a');">to page_a</a>
        <a id="anchor_b" href="#page_b" onclick="goPage('b');">to page_b</a>

        <a name="page_a"></a>
        <div id="content_a" style="display: none">
            page a
        </div>
        <a name="page_b"></a>
        <div id="content_b" style="display: none;">
            page b
        </div>
    </body>
</html>


文章来源: How to make browser back and forward work on a single page layout?