pushState and popstate
Вставка
- Опубліковано 28 вер 2024
- I was so confused when I first learned this API; I hope you don't get confused!!! history.pushState and window.onpopstate are the two main things used in this tutorial to affect what the browser's back and forward buttons do.
Get the code from GitHub: github.com/Gee...
Live demo: geeklaunch.git...
geeklaunch.net/
Support GeekLaunch on Patreon: / geeklaunch
Follow GeekLaunch on Twitter: / geek_launch
GeekLaunch produces educational videos covering such topics as Linux, web development (including HTML5, CSS 3, JavaScript, and PHP), tips for power users, among many others. Subscribe: New video every Wednesday!
Not a geek? Start today!
Dynamic changing title is actualy supported by any browsers, it just needs right way to code it. The code is document.title = 'test'
Great explanation! Didn't know this API existed in HTML5.
Thanks for watching!!
I love how soothing your voice is
11:28 Thanks for your time, excelent tutorial.
Cool! Pretty well explained!
But it would be worth to mention, that history object also has a property "state", that handles current state. For example, if your page loaded initially, there would be no "popstate" event fired.
To make the conjunction between application state and history API state, you'll have to read history.state property to make a proper initialization.
Hey, thanks for the extra insight, it's really appreciated.
Best tutorial , please more webAPIs !!!
Your voice reminds me of Jon Lovett's (I listen to too many podcasts). Also great video, very helpful example to learn this API's basics. Thanks!
So I’m back here watching this video again several years later.
Have essentially only been using hashchange since back then, but figured it’s time to properly understand popstate/pushState and implement it in PureScript.
(I’m listening to basically zero podcasts these days, and definitely no political stuff anymore, but am addicted to silly LitRPG audiobooks instead)
(If I’m back here in another few years watching the video again, I probably won’t comment as it’d give away a lack of progress 😅)
Hey this video was extremely helpful it took me ages to get it but ive downloaded the code and played around with it and now i get it! I think i've solved the problem on my site now thank you
That's awesome, glad to hear you figured it out!
The code in the video it will break on refresh because the browser will request a nonexistent page.
How do I make it an existing page?
I know a library that will let all major browser support the entire history api .
Its called history.js on github . check it !
how to know if user goes forward or back using popstate?
Just a question. When we use history.pushState() , doesn't it pushes to a stack rather than an array as mentioned by you?
I think you're correct because in popstate you just call it as e.state without indexing...
hey man thanks for the video, I have some questions regarding ajax. 1- if you check youtube, they are using ajax to load parts of the html, but what is surprising is, you can also navigate different parts with url link, (i mean, if they change some parts of the html, it means they have only one web page) . How to change different parts of the html and make it accessible with link also? 2- the forward and backward event you mentioned. how can we save an entire div with the elements inside it, and how can we save the entire html page?
please tell me if you didn't get any of these
For your first question, the answer would be that the changes UA-cam performs on the client side when navigation occurs result in the same (or close enough to the same) UI as the server would generate were you to access the new URL directly. Not sure I completely understand the second question.
@@GeekLaunch i have a
And the only thing that I change with ajax is the elements inside that div. How can I create pushstate for backward and forward with my situation?
*When he hovered over those boxes.*
*Anyone else hear "ee er ee er"*
what happens in case someone hit the reload button? Thanks for the video!
Sorry I missed your comment! The API will still work as intended, but the way I wrote the code in the video it will break because then the browser will request a nonexistent page. What I should have done is make a box click change a query parameter instead of the actual path of the URL. :/
Big Thanks bros
That code doesn`t work in old IE version.
Stop using old versions of IE!!
why this can't running on my project (On server ) :(
I don't know, sorry! Hopefully you get it fixed!
'Completely pointless' technology that is the basis of single-paged applications :)
Its like you sade youseless. But the basic is require for individual project
One Problem in your code, i download from your git and run it, now see, when i click any of div and if i refresh the page, then url not works, gives Error : The requested URL /pushstate-and-popstate-master/selected=box-2 was not found on this server.
Plzz tell me how to solve it...
Because you should use urls of existing pages. Watch a piece after 6:10
Building a state tool for a SPA-webapp.. not fun lol...!
What does the e => do? I'm really confused by it
Thanks, very good tutorial!
greats, Thanks aLot man!
+Wira Andhika You're welcome, glad you liked it!
why do you use if else to pass null value? why not just using selectBox(e.state?.id); ? It would eventually pass null where needed
VIdeo captured 5 yrs ago, there wasn't optional chain.
Awesome! Btw: I tried this as files (=clicking on the index.html in my folder), and that didn't work -> had to do local hosting (used Five Server). When I didn't do local hosting, my browser lit up like a Christmas tree and yelled at me quite meanly:
"
Security Error: Content at file://[my_folder_location_here]selected=box-2.
Uncaught DOMException: The operation is insecure.
"
so that ^^ was when I tried WITHOUT local hosting.
Side note: I think you can write shorter:
"let boxes = document.querySelectorAll(".box")"
This selects all the elements with class "box".
as a new learner who is bad at javascript, i find this easy to follow:) thankyou
Thankx for your good explanation sir! It was really helpful for me.
Thanks dude, that was super helpful
Still a great tutorial, also the sassy argument you had with yourself 6:40 was amusing ;)
Nice video 👌 appreciate your efforts 👍
Thanks bro your tutorial is useful for me
Very good explanation
thank you so muchhhhhhhhh
Thank you :)
Thanks for watching!!
Nice! A concise and really well rounded video! Thank you.
That was on point! Exactly what I was looking for. Subscribed!!
Thanks for subscribing! I'm currently on an extended break (school + work) but I'll be sure to produce more content in the future!
It's great, I can use it for sure. Also very helpfull with stateless webapps to store all Parameters in and reload.
+Kayoscreed Thanks for watching!
which text editing software you are using?
Sorry I missed your comment - I'm using Visual Studio Code in this video.
Cheers!
Thanks for sharing this!
Thanks for watching!
This is cool man
Thanks, I'm glad you think so!
You know what made me happier in this video? it's your last comment, "I had a heck of a time learning this API". So, I'm not the only one got trouble with this API.
Thank you for this clear explanation.