jquery.history.js 对HTML5 History/State APIs (pushState, replaceState, onPopState) 的封装-BFW插件库

jquery.history.js 对HTML5 History/State APIs (pushState, replaceState, onPopState) 的封装

jquery.history.js 对HTML5 History/State APIs (pushState, replaceState, onPopState) 的封装，支持所有浏览器

第一步引入bfwone

第二步执行代码

示例如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=jquery.17&err=0" type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {
            use(["jquery.history"], function() {
                // Check Location
                if (document.location.protocol === 'file:') {
                    alert('The HTML5 History API (and thus History.js) do not work on files, please upload it to a server.');
                }

                // Establish Variables
                var
                History = window.History, // Note: We are using a capital H instead of a lower h
                State = History.getState(),
                $log = $('#log');

                // Log Initial State
                History.log('initial:', State.data, State.title, State.url);

                // Bind to State Change
                History.Adapter.bind(window, 'statechange', function() {
                    // Note: We are using statechange instead of popstate
                    // Log the State
                    var State = History.getState(); // Note: We are using History.getState() instead of event.state
                    History.log('statechange:', State.data, State.title, State.url);
                });

                // Prepare Buttons
                var
                buttons = document.getElementById('buttons'),
                scripts = [
                    'History.pushState({state:1,rand:Math.random()}, "State 1", "?state=1"); // logs {state:1,rand:"some random value"}, "State 1", "?state=1"',
                    'History.pushState({state:2,rand:Math.random()}, "State 2", "?state=2"); // logs {state:2,rand:"some random value"}, "State 2", "?state=2"',
                    'History.replaceState({state:3,rand:Math.random()}, "State 3", "?state=3"); // logs {state:3,rand:"some random value"}, "State 3", "?state=3"',
                    'History.pushState(null, null, "?state=4"); // logs {}, "", "?state=4"',
                    'History.back(); // logs {state:3}, "State 3", "?state=3"',
                    'History.back(); // logs {state:1}, "State 1", "?state=1"',
                    'History.back(); // logs {}, "The page you started at", "?"',
                    'History.go(2); // logs {state:3}, "State 3", "?state=3"'
                ],
                buttonsHTML = '';

                // Add Buttons
                for (var i = 0, n = scripts.length; i < n; ++i) {
                    var _script = scripts[i];
                    buttonsHTML +=
                    '<li><button onclick=\'javascript:'+_script+'\'>'+_script+'</button></li>';
                }
                buttons.innerHTML = buttonsHTML;
            });
        });
    </script>
</head>
<body>
    <div id="wrap">

        <!-- Textarea for Logging -->
        <textarea id="log" style="width:100%;height:400px"></textarea>

        <!-- Note -->
        <p>
            Click through the buttons in order and you'll get the results demonstrated in the <a href="../README.md">README.md</a> file.
        </p>

        <!-- Buttons -->
        <ul id="buttons">
        </ul>
    </body>
</html>

jquery.history.js 对HTML5 History/State APIs (pushState, replaceState, onPopState) 的封装

网友评论0

jquery.history.js

posfixed.js

smoothscroll.min.js