CODEWITHSUNDEEP
javascripthtmlevent-handling
sunto
sunto

Reputation: 87

How to use onpopstate, with plain JavaScript

I have a website that has 4 main pages, index, somepage, someotherPage, and LastOtherpage. They have different names, like index.php, food_and_health.php, enlightening_info.php, and about_us.php.

I have my ajax part(HTTPrequest) working fine, and the pushstate is working.

What I now want, is obviously, the popstate function working. I have read, and watched tutorials, but how would I do this with the this keyword?

I have a fiddle added, so you can see me code, its not working well in the fiddle, but works very good in chrome, firefox and late ie. I have something like this in mind for my onpopstate..

nav.history("this.object", "Title", "/this.url"); 
http://jsfiddle.net/vwd6bnjc/1/

How would the onpopstate code look like? I know it is bad to ask for all the code, but this way I actually learn, as when I read the code, I understand it. I haven't fully got the grip of javascript eventhandling yet, as you can see I use onclick in my html documentes, and not eventhandling them. But this I know, I can do, it is just a lot of changing in my documents, and first priority for me, would be to have back/forward, refresh, and share functionality to work, so that I can actually share my website out in the web, without and lack of functionality! :)

Any help is much appreciated, thanks in advance :)

Upvotes: 0

Views: 2021

Answers (3)

andrewnite
andrewnite

Reputation: 121

I used ajax in a similar way your suggesting. I took advantage of the history.pushState() state object. The history object doesn't allow access to history session urls(it's reasonably a security risk). I simulated the effect by storing the requested URL in the state object.

I have viewed your example on jsfiddle and will be using it for reference.

I suggest when using history.pushState in your function Mat(url) to add url parameter to the state object like so.

history.pushState({urlRequested:url}, 'Page Title');

It's good to remember that when using pushState method and supplying a URL for the third argument will also cause the browser URL address to change. So if you refresh the page you will be requesting the updated URL. How you handle this is up to you but by excluding it the current document location will be used. So if the page is refreshed the requested page will be the same.

After supplying a state object the event.state property will have the object [urlRequested:url] which can be use to get the url.

To accomplish this you might do something like so.

window.addEventListener("popstate", function(event) {
    if (event.state !== null) {
        /**
         * Here you can code what operations you want to accomplish
         * when the event is called. If you would like you can use
         * your function Mat( url )
         */
        Mat(event.state['urlRequested']);
        //this gets the value of urlRequested which is the URL
    }
}, true);

When a user navigates between two history entries the onpopstate event is fired. When that happens your function Mat( url ) will be pass the URL stored in the state propert and sent an ajax request using the URL.

I sure hope this helps answer your question.

Upvotes: 1

pertrai1
pertrai1

Reputation: 4318

If MDN did not help you, you can look at history.js and use that for cross-browser, or look and see how onPopState is used:

https://github.com/browserstate/history.js

Upvotes: 1

pertrai1
pertrai1

Reputation: 4318

Does the examples from MDN help you? Have you had a chance to look at that?

https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onpopstate

Upvotes: 0

Related Questions