Geek Answers Handbook

How to move the current page to browser history

I have a page that a user can use to enter a filter result. After entering some characters into the input entry, instead of deleting it manually, people like to use the return button in the browser to return to the “empty” input state.

But the result is retrieved by AJAX, which means that the behavior of the back button is incorrect (you can’t clear the input, just return to the previous page), is it possible to push the empty or current URL into the back stack so that the user can get the result as desired?

To be clear, I want:

1) user enter some characters to the input entry
2) user press "filter" button
3) user press back button
4) the input entry is cleared
+5
source share
1 answer

. " ", .

API .

:

<body onhashchange="hashChanged()" onload="hashChanged()">

<input id='query'></input><button onclick="location.hash = '#'+document.getElementById('query').value">Query</button>

<script type="text/javascript">

function query(str) {
    // do your ajaxy thing
}

function hashChanged() {
    var str = location.hash.substring(1);
    document.getElementById('query').value = str;
    query(str);
}

</script>
</body>

ie8, firefox 3.6 chrome 5. - .

API

<body onload="queryChanged();">

<input id='query'></input><button onclick="history.pushState(str, "", "?query="+str);query(document.getElementById('query').value)">Query</button>

<script type="text/javascript">

function query(str) {
    // do your ajaxy thing
}

function queryChanged() {
    var str = "";
    var re = /[\?|&]query=([^&]*)/
    if (re.test(location.search)) {
        str = re.exec(location.search)[1];
    }
    document.getElementById('query').value = str;
    query(str);
}

window.onpopstate = queryChanged;
</script>
</body>

firefox chrome, ie10.

, , , . Really Simple History, jquery, , . BBQ hashchange.

+2

More articles:


All Articles