The big back button quiz - HTTP 203

before you start jake uh you haven't shared your screen so i actually can't see your slides let's maybe uh we maybe just keep rolling but we'll start again let's wait you want me to have a natural reaction again [Music] so how are you i'm alive have you noticed that your browser has a back button and a forward button yes good i i good and then you have the required knowledge for this upcoming episode yep absolutely uh because i have been digging into this sort of stuff recently and i sort of assumed that the back button in the forward button had like their behaviors might be pretty stable and makes sense but i've been around for decades i guess yeah um but i didn't realize how little i know about how they actually work so i thought i would share with you some of my findings uh but to prove how weird it is i thought i would turn it into a kind of quiz where you some are the contestants no and if you're playing along at home you can see if you can beat serma to any of these but seriously like don't feel bad if you don't know this stuff i've only recently discovered some of this stuff myself and a lot of it doesn't make sense anyway let's just jump in question one here you go the fact that iframes are in here already want to make me eject from this entire quiz yeah they are going to be a big part of this that's where most of the weirdness happens so okay take this click each link in order one after the other and then click the back button what happens and feel free to say what you think happens and what you think should happen because these are going to differ so i click the hashtag hashlink then 1 then 2 and then the back button goes back to one and another back button click goes back to hash another back button goes back to just slash whatever it is i guess yeah do you know what you're absolutely correct um and it's a detail that some people miss it's like here's how it works you've got your top level page with an iframe i like to visualize it to this kind of timeline so we'll call this step zero uh we navigate that top level page to a new hash which doesn't change the document but it adds a new history entry and then we navigate the iframe uh to a new page uh and again we navigate the iframe yeah the links weren't in the iframe were they oh see do you know what here's the cool thing i i was there thinking god sermon's really smart he's got this bit i mean this is just the first question but still i feel like you've got it correct by accident so let's let's have a look at this code again i did not see the target and i didn't know target was a thing for navigating iphone i learned something jake there we go but you know what by not knowing something you got the answer correct so what have we learned ignorance is bliss that's the moral of this episode but yeah you click these it's going to navigate the iframe the answer of this question really hinges on knowing that it's going to navigate the iframe uh and when you click back it is going to navigate the iframe back so yeah it creates these session history entries but it forms this thing we call uh well i like to give as a timeline it's actually called the joint session history but yes you click the back button it will actually change what's in the iframe uh not just the the top level page so we're at step three here meaning the top level page is on hash and the iframe's on two we click back and we go to the previous step which navigates the iframe but leaves the top level page where it was you know what full full disclosure i'm not sure i would have known that the back button respects navigation within an iframe i i have a heart i can't go back and pretend i don't know now but i'm not sure i would have i was talking to a browser engineer on friday who didn't know either like it's something that catches people out all right next question each link is clicked some of those target iframes and then the button is clicked what happens so i guess the the question is that the history value that is exposed via javascript does that encapsulate the overarching history of all embedded iframes and documents and whatnot or is it specifically the current document considering you know what i'm going to say history back is supposed to be identical to clicking the back button so i'm going to say it's going to behave exactly the same correct and you got this one correct correctly as well so full points for that there is actually a new history api proposal because there's lots wrong with the history api there's a new proposal um that does target um the last entry of the current frame so there is a proposal where you know this new back command which will go all the way back because it's targeting that top level uh quick question then if if i called you know let's let's say i click the buttons in reverse order like i navigate the iframe first and then i navigate it to a hash on the top level documents and called history back from within the iframe would that navigate the top level page back from hash to no hash yes yes it would like oh wow the history api is weird because it sort of breaks a lot of the cross-origin rules so even if your iframe was in another origin it would be affecting the parent page which is in the box that's that's interesting you could have two iframes on your page each to a different origin to the parent page you got three origins on the go and calling history.back in one of those iframes could navigate the other iframe yeah it doesn't seem like a good idea mate you know what we're not even at the really weird questions yet okay hit me then all right here we go each link is clicked and then back is clicked okay so what happened the same happens as before but then you actually go to a completely different page which for all i know doesn't have any iframes and so now the question is if i click back will the iframes be restored to the state that they were in or are they going to be restored to what's in the markup that's the question that i'm asking myself now that is the question i would say with oh does bfcash play a role here does it is does the old page still live in the background with the iframes loaded but frozen in their most recent state that's a very good catch um let's assume that for some reason the bf cache isn't in play here so for people watching that we have this concept called the back forward page cache where when you navigate to another page we sometimes just keep the old one alive in memory so you can switch back to it really quickly that doesn't always happen for a number of reasons so for this question we're saying it's not happening i'm gonna say the iframes are loaded with what's in the markup interesting but incorrect uh so here's where we're after clicking those links and then we leave the page and like i say sometimes it keeps the document around but in this case it's not going to do that so the page is gone along with the iframe that's gone as well uh but we go back and the browser knows like which top level page to load because it's that one there but when it does this it goes ah there's an iframe here and incredibly the browser goes i think this is the same iframe from before and it restores the session history and loads too that is incredible that it's not as smart i would have expected from the browser every browser does this it's much like that works across browsers okay yeah sometimes the web platform does do a thing and you know what this is not in the spec and this is one of the kind of jobs i have right now is to figure out exactly how this works and uh and smack it so you can help me with that so here's a slightly different one i'm gonna click all of these links in order so one loads into iframe one two loads into iframe two and we navigate away uh and then click back but plot twist the page serves the iframes in a different order so the page this on has like cache control no store or something to force the rows to actually not go into the http cache which means we can serve a different response yes the browser will by default go to the memory cache for pages like this but with no store in play which we'll assume here it will go to the server again i've been recently working on a javascript proposal and working on the html integration in which i have learned that something like source position caching is a thing where they cache something i'm putting the cache and the source position is the key so when you have the same source position you can access the value or source location and the question is that happening here or are they gonna like you said like in the previous example it re realizes this is the same iframe i'm gonna restore that from my cache where where we were in history if it uses the name then it will work again if it uses source position or source location that or something similarly that wouldn't work so which is it then i mean your analysis of the question is is spot on i'm gonna say that either directly or indirectly this restoration process can only happen if the response was bite identical and since it isn't it won't do that so you're saying it will load the uh the original sources for each iframe it will load frame start for both is what i'm gonna say i'm afraid not um and you had a number of correct answers to go for unfortunately you didn't hit any of them uh firefox will reconnect these iframes based on their index in the source uh which you suggested uh so it will load uh one in the first iframe and two in the second iframe chrome and safari will use the name attribute to track movements of the iframe around the documents and hook things up and they will fall back to index if there's no name attributes uh and they behave differently if you have a combination of named iframes and indexes so it's all the browsers behave slightly differently but that that is roughly what they do and they both behave differently if the iframes were created with javascript uh safari will reconnect them in that case chrome won't if they were creative javascript look i don't have the timer ng to go fully into it i'll put some links in the description because it's very very complicated next question as before gonna click all of the links loading one into iframe one loading two into iframe two and then refresh the page what happens if we're assuming no store i'd say it goes back to frame start like i want to start over and you are correct uh yeah that would have been unsettling if that wasn't what's happening well be prepared to be unsettled because it does get weird so here's where we're at you know we've clicked all of those links the iframes are on one and two and then we hit refresh here's what happens in in chrome and safari the the iframes gets this new history entry each pointing to their original source urls um but i don't think this makes sense because now if you click back the first iframe navigates back to one and the second iframe navigates from frame start to frame start like it effectively reloads the same url yeah i thought it would the refresh would create a new entry not overwrite the current one but i guess it has never done it in the past yeah i would love to tell you what firefox does and i've seen it do stuff a little bit like this but i've also seen it restore the iframes to one and two and i haven't figured out why it does one or the other and weirdly right now it feels like it it restores the iframes to their like one and two urls if the tab has been opened for a while i don't want to believe that this is actually the behavior changes based on time i don't want to believe that but that's all i've got to go on right now i will find out but right now i don't i just don't know i don't know so i don't i will ask some firefox engineers and hopefully put something in the description but right now it's this is kind of a mystery to me all right a bit simpler this time just a bit simpler it's not simple sorry i'm lying to you but there is just one iframe click each link but this time we're going to go back two steps so you can long press on the back button and navigate multiple steps at once uh there's also the api history dot go and you could pass that minus two to go back two steps so we're going back two steps at once what happens so i guess the difference is that it doesn't actually load the intermediate step but i would think that this would behave as expected as in the top level page goes back to slash and the frame goes back to frame start is that your answer are you sticking with that that that is my answer okay here's where we're at we've clicked those links and we're on step two so you know hash in the top page and the iframe is on one and then we navigate back two items at once meaning the top level page loses its hash and that's it the iframe stays where it is no that is wrong and i do not like it every browser chrome firefox safari has a bug where if the parent frame changes its history entry it won't navigate the child items it's a bug it's a bug but it we think it's been around but now that it's in every browser do people rely on it and we need to spec it this way there is some evidence that we try to remove where we tried to fix this bug in chrome uh in 2016 uh or maybe earlier and we couldn't uh due to some sites relying it but other behaviors have changed since then which might mean we can fix this but we haven't done the research for that bit that is absolutely incredible it's terrible isn't it because it breaks it breaks the timeline right yeah i'm sorry i'm just sorry okay more sadness again click each link in turn then click the button what happens when we click back um nothing i think when we click that in order we navigate to hash first and then put one in the ipad and then two i think the the iframe is just not in the dom anymore maybe the browser has it somewhere in the background and is navigating the iframe off-screen but i think just nothing happens okay so like a an empty history entry or something like that well i think there's a history entry i think the history entry probably has like a reference to the iframe and maybe the iframe still exists like in memory and it can and it will get navigated and if you hold held onto the iframe and put it back in the dom after maybe it would then have navigated back successfully but i don't think it would automatically put back into the dom just by clicking the back button well yeah you're sort of correct um here's where we're at i've been clicking those links and then we remove the iframe and that means some of our timeline steps don't have history items uh history entries against them anymore because the iframe is not there i'm afraid to say each browser does something differently at this point we'll start with firefox it effectively removes these dead steps as soon as the iframe is removed so we kind of go back here so clicking back navigates the top page oh okay and i think that's great but that is not what other browsers do chrome it doesn't remove these steps so if you click back it seems like nothing happens which you suggested so you'd have to click back two more times to change the top page safari behaves a little bit similar to chrome in that it keeps these redundant pages around but it seems to have a panic at this point like maybe because it can't find the iframe that it's trying to target so it sort of panics and reloads the whole page yeah that's one way to go about it i guess yeah so here i'd say top marks to firefox chrome has a behavior that makes sense even though i don't think it's the best behavior and safari doesn't make sense there we go next question i click each link and i press back what now oh so the difference is that for once we don't have a a well we have a source page but not like a proper source page you have about blank as a source page um i guess i i would think that this still counts as like a proper navigation so yeah that we go back then we would have hash on the top level and about blank in the iframe that's what i would expect okay uh here's where we are we've clicked the first link to the hash and now we're about to navigate the iframe firefox and safari creates a new history entry so if you click back it navigates the iframe back to about blank exactly what you said basically that's against the html spec doing it wrong why why about blank is special because it's the initial source for an iframe if you don't specify a source it's about blank and the spec has a special rule that says for uh the initial iframe navigation from about blank to its destination is a replacement and chrome follows the spec here so that means like about blank that's replaced with the new one oh wow so if you click back you'll be navigating the top page uh removing the hash i mean understand that about blank is you know the default if you don't specify a source but we did specify a source it just was about blank well here's the deal because firefox and safari do follow the spec in some situations so if you put an iframe on the page with a source to a document like as soon as you put the iframe in the page it's going to be on about blank because it's not going to be at that source straight away it has to load so it's about blank and then the new page loads and in that case firefox and safari will do a replacement navigation you will end up like if you put you know 10 iframes on your page you don't end up with 10 history entries for about blank before they navigate to where they're going right yeah all right last question here we go what happens uh you grab the iframe you set the content when oh you set a property on the content window you check if it's about blank and if so you add the event listener for load okay so this is okay so this will get executed during past time when the page is loading with this markup which means the iframe hasn't yet load and as you just told me like it has a source attribute but it clear it hasn't loaded yet so the the location will be about blank so that if statement will most likely be true and you set something on the content window however after load which means once frame start has loaded it's a different content window so will that property still be there is there browser magic or not in my ideal world i would say no that would log undefined because that's a new window but you're probably going to say that's wrong but i'm going to say because i'm a purist it's going to look undefined that would make sense wouldn't it and yes it would it's not it's not what happens though all browsers in this case will log uh world like it keeps it and the code inside the iframe on its global it will have that variable in there even though it was a different page when you set it the way it's specced here is that uh you know if it's about blank and you navigate it from its initial about blank to a page it just changes the document it doesn't change the window uh oh i should say only if it's a same origin navigation only if it's to a same origin url otherwise it will uh you know kick out the window and create a new window object there are lots of situations where browsers don't do this um like if you just add a iframe to the page of javascript and then navigate it later like different browsers do different things but this is one of the cases where all browsers will do this super weird keep the window but swap the document behavior and really there's way more weirdness that i'm encountering just looking at this stuff and i'll put some links to more of the weird stuff in the description because there's a lot of it and i might even encounter more before this episode goes out it's all made me super sad and i don't know how i'm going to spec it all but i'm i'm going to give it a good go but for now that's all i've got how do you feel now summer after after learning some of this stuff to me the conclusion is i'm just gonna stop using iframes or actually i'm not start gonna start using iframes now because without them everything is so much easier deprecate iframes good plan hoorah i click the link and i press back what happens you click both links because if you say you click a link there's two links which link oh yeah this code example isn't exactly what i intended let's have a look oh that's fine yeah yeah no it's my not set or wrong excellent let's try that again

Channel: Google Chrome Developers

Views: 13,620

Rating: 4.9869709 out of 5

Keywords: GDS: Yes, session history, how does the back button work, back button, how does session history work, how does the browser track session history, web development history, new videos from Chrome, Chrome, Chrome Developers, Chrome devs, developers, Google, tech, tech videos, web, videos for developers, css, javascript, performance, new in tech, new in web, new in chrome, HTTP203, Jake and Surma

Id: W6lvQvdeF8U

Length: 22min 35sec (1355 seconds)

Published: Tue Mar 23 2021