Movatterモバイル変換


[0]ホーム

URL:


Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings
This repository was archived by the owner on Aug 5, 2025. It is now read-only.

Implement backward and forward navigation options to iframed window#181

Merged
dummdidumm merged 4 commits intosveltejs:mainfrombrandonmcconnell:main
Jan 23, 2023

Conversation

@brandonmcconnell
Copy link
Contributor

@brandonmcconnellbrandonmcconnell commentedJan 11, 2023
edited
Loading

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_bwd andhistory_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)
  • the currentpath is appended tohistory_bwd
  • history_fwd is reset
  • the newpath is naturally set to the entered path (current functionality)
When the "back" button is clicked…(expand to see details)
  • the currentpath is prepended tohistory_fwd
  • the last item inhistory_bwd is sliced off
  • the sliced item (the previouspath) replaces the currentpath
When the "forward" button is clicked…(expand to see details)
  • the currentpath is appended tohistory_bwd
  • the first item inhistory_fwd is sliced off
  • the sliced item (the nextpath) replaces the currentpath
When any link within the iframe is clicked, it is picked up byhandle_message which then falls back to using thenav_to function for handling and tracking the history accordingly, effectively…(expand to see details)
  • the currentpath is appended tohistory_bwd
  • history_fwd is reset
  • the newpath is naturally set to the entered path (current functionality)

Notes

  • The icons I used are custom ones I threw together in Illustrator, so feel free to use them without any risk of copyright violations, though I understand there are probably plenty of reasons to switch them, even just to stay on brand.
  • I noticed after my initial successful tests that while the back/forward functionality worked as expected, the history persisted across tutorials, so I added an additionalreset_history function that resets the history, which I trigger in thetry clause 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 toiframe within theonMount and destroyed accordingly.

Screen.Recording.2023-01-11.at.1.09.05.PM.mov

@vercel
Copy link

vercelbot commentedJan 11, 2023

@brandonmcconnell is attempting to deploy a commit to theSvelte Team onVercel.

A member of the Team first needs toauthorize it.

@vercel
Copy link

vercelbot commentedJan 11, 2023
edited
Loading

The latest updates on your projects. Learn more aboutVercel for Git ↗︎

NameStatusPreviewUpdated
learn-svelte-dev✅ Ready (Inspect)Visit PreviewJan 11, 2023 at 9:10PM (UTC)

Copy link
Member

@dummdidummdummdidumm left a 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.

brandonmcconnell reacted with hooray emoji
@Rich-Harris
Copy link
Member

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
Copy link
ContributorAuthor

brandonmcconnell commentedJan 23, 2023
edited
Loading

@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 theset_iframe_src function…

/**@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 theset_iframe_src function and swapping its usage foriframe.src = resolves this issue, though again, I can't speak to whether any browsers were actually benefitting fromset_iframe_src.

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.

cc@dummdidumm

@brandonmcconnell
Copy link
ContributorAuthor

@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 likeframe_src=${path} so that clicking back in the browser or the iframe essentially trigger the same action and go back one step whether in the iframe or the browser depending on the user's actions. Of course, it would be better to just completely isolate the iframe's history apart from the browser's, but in all my testing and research, there doesn't appear to be a way to achieve that, including the "removing/adding the iframe node" hack.

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.

Rich-Harris added a commit that referenced this pull requestJan 24, 2023
…window" (#187)* Revert "feat: implement backward/forward navigation options to iframed window (#181)"This reverts commit8ff785c.* finish merge* fix* tidy up* tidy up* oops
Sign up for freeto subscribe to this conversation on GitHub. Already have an account?Sign in.

Reviewers

1 more reviewer

@dummdidummdummdidummdummdidumm approved these changes

Reviewers whose approvals may not affect merge requirements

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@brandonmcconnell@Rich-Harris@dummdidumm

[8]ページ先頭

©2009-2025 Movatter.jp