- Notifications
You must be signed in to change notification settings - Fork238
Implement backward and forward navigation options to iframed window#181
Uh oh!
There was an error while loading.Please reload this page.
Conversation
@brandonmcconnell is attempting to deploy a commit to theSvelte Team onVercel. A member of the Team first needs toauthorize it. |
vercelbot commentedJan 11, 2023 • edited
Loading Uh oh!
There was an error while loading.Please reload this page.
edited
Uh oh!
There was an error while loading.Please reload this page.
The latest updates on your projects. Learn more aboutVercel for Git ↗︎
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others.Learn more.
This is great, thank you! I swapped out the two svgs for one and adjusted the colors so it works for light mode, too.
Sorry, I dropped the ball here, meant to review this PR sooner. I think we should revert it, so I've opened#187. The back/forward buttons in this PR cause the iframe to be reloaded, which gives a very misleading impression of how history navigation works in SvelteKit. It's better to not have history UI than to have UI that causes full page reloads |
brandonmcconnell commentedJan 23, 2023 • edited
Loading Uh oh!
There was an error while loading.Please reload this page.
edited
Uh oh!
There was an error while loading.Please reload this page.
@Rich-Harris I might be wrong here, but I think the reload is caused by the iframe being removed and re-added to the screen, alongside the bwd/fwd history changes. According to the comment inside the /**@param {string} path */functionset_iframe_src(src){// removing the iframe from the document allows us to// change the src without adding a history entry, which// would make back/forward traversal very annoyingconstparentNode=/**@type {HTMLElement} */(iframe.parentNode);iframe.classList.remove('loaded');parentNode?.removeChild(iframe);iframe.src=src;parentNode?.appendChild(iframe);} …removing the iframe altogether and re-injecting it to the page is supposed to "change the src without adding a history entry" though I do not see that actually working in Chrome, even before my PR. Does that work in other browsers? As I navigate around one iframe, I still have to click the browser's back button repeatedly to traverse through every navigation from the iframe. I can confirm that removing the Let's go ahead and revert this PR for now, and either re-open this PR or I can create a new PR that builds on this one and addresses those concerns. |
@Rich-Harris@dummdidumm One idea here which might remove much of the complexity around this is to sync the iframe history/URL state with the browser's so that as the iframe's URL changes, there could be URL param in the browser like I'm not sure if/how/where/when that work(ed), and I'm honestly not criticizing it; it may very well work in some places. It just hasn't worked in my testing, which granted was limited to Chrome. |
Uh oh!
There was an error while loading.Please reload this page.
Overview of changes
This PR adds backward and forward navigation options to iframed window. Because this sort of behavior isn't normally possible within the natural constraints of the History API since the history of the iframed window and that of its containing parent window operate together, I opted to manually track the history of the iframed window in two arrays—
history_bwdandhistory_fwd.Implementation/test cases & detailed steps for each
When any path is manually entered into the iframe's simulated address field…(expand to see details)
pathis appended tohistory_bwdhistory_fwdis resetpathis naturally set to the entered path (current functionality)When the "back" button is clicked…(expand to see details)
pathis prepended tohistory_fwdhistory_bwdis sliced offpath) replaces the currentpathWhen the "forward" button is clicked…(expand to see details)
pathis appended tohistory_bwdhistory_fwdis sliced offpath) replaces the currentpathWhen any link within the iframe is clicked, it is picked up by
handle_messagewhich then falls back to using thenav_tofunction for handling and tracking the history accordingly, effectively…(expand to see details)pathis appended tohistory_bwdhistory_fwdis resetpathis naturally set to the entered path (current functionality)Notes
reset_historyfunction that resets the history, which I trigger in thetryclause withinafterNavigate.Testing
This can be tested/demoed effectively using any of the routing examples:
Screen recording (UPDATED)
✅ Updated to include the flash-of-white fix implemented in commit644f5e3 (expand for details on fix)
As of commit644f5e3, the flash of white is now resolved by hiding the iframe (
display: none, in addition to the existingparentNode?.removeChild(iframe)andparentNode?.appendChild(iframe)) until the iframe content has loaded, using an event listener set attached toiframewithin theonMountand destroyed accordingly.Screen.Recording.2023-01-11.at.1.09.05.PM.mov