keep parent's domain for tab navigation on new tab in iframe experience #1067
Conversation
…m iframe resizer onmessage approach when answers is initialized
yen-tt
force-pushed
the
dev/tab-nav-in-iframe
branch
from
39862d0
to
95bfb8c
Compare
layouts/html.hbs
Outdated
| Array.from(navItems).forEach(navItem => { | ||
| const verticalUrl = navItem.pathname.replace(/^\//, ''); | ||
| const params = navItem.search ? navItem.search : '?'; | ||
| navItem.href = parentUrlWithoutParams + params + '&verticalUrl=' + verticalUrl; | ||
| navItem.target = '_parent'; |
There was a problem hiding this comment.
I would expect to find the code which defines the navItem hrefs inside the navigation component. If someone is reading the navigation component code, it might be confusing to because the navigation component code doesn't include the parentURL, however in practice, it does. They probably wouldn't know to look here to find the code which updates the URLs.
Is it possible to add a function to the Navigation component which would allow you to set the parent URL? That way the Navigation component could take care of updating the URLs.
There was a problem hiding this comment.
I wasn't sure if we want SDK changes as well. I think it's possible? I can try it out
There was a problem hiding this comment.
We could probably add it somewhere to the addComponent call for the Navigation component (templates/common-partials/script/navigation.hbs), maybe in an onMount? I think adding new config to Navigation might also be a good choice if doing this purely in the theme gets too hacky, though.
There was a problem hiding this comment.
Having it in the component navigation template is tricky when it comes to making sure iframe resizer is initialized so we can get the parent url before updating the tab links. I made changes to SDK and updated this pr to invoke a function to set up the parent url!
|
I would probably remove the "fix" part from the title of the PR? This feels more like a feature than a bugfix - imo things were working as expected and this is kind of just how iframes are |
yen-tt
changed the title
This pr is made in tandem with the [theme changes](yext/answers-hitchhiker-theme#1067) to support iframe experience's tab navigation where opening one in a new browser tab should still be under the domain of the iFrame's parent for the new page's url. if a `_parentUrl` is provided, the tabs are updated with their href having the domain of the parent url and a verticalUrl param attached to indicate which page to navigate to. The target is also updated to '_parent' to handle the case of tab navigation in the same browser tab. a function `setParentUrl` is added to the navigation component for user to set `_parentUrl`, which will cause a rerender of the component to update the tabs's link J=SLAP-2089 TEST=manual Tested along with the changes in theme. Deployed two test sites in storm, with [one being from the theme dev branch](https://devtabnaviniframe-theme-slapshot-pagescdn-com.preview.pagescdn.com/?query=virginia&referrerPageUrl=) that points to the SDK pr dev branch, under the staging commit: dev/tab-nav-in-iframe[@65f09b10](yext/answers-hitchhiker-theme@65f09b1). That is used in the src script of iframe_test.html of the [other site](https://devyttesting-theme-slapshot-pagescdn-com.preview.pagescdn.com/?query=virginia&referrerPageUrl=) under the staging commit: dev/yt-testing[@517e852f](yext/answers-hitchhiker-theme@517e852). Navigate to different tabs in the same tab and opening them in new tab. See that the page is still under the domain of the iFrame's parent.
## Version 1.29.0 ### Features - Added support for passing Answers Agents in the HTTP header (#1056) - Added support for adding custom autocomplete prompts (#1040) - Added RTF truncation support (#1060, #1061) ### Changes - Updated default `vertical-grid` universal limit to 3 (#1048) ### Bug Fixes - Fixed filters and footer overlap on desktop view (#806) - Fixed `CollapsibleFilters` tab order (#1057) - Fixed text truncation in the accordion card (#1065) - Updated iframe tab navigation to keep parent’s domain (#1067)
This pr ensures tab navigation open to a new tab in an iframe experience should still be under the domain of the iFrame's parent for the new page's url.
After ANSWERS is initialized or in onReady stage, when iframeLoaded promise is resolved - indicating this is an iframe experience - a message is sent to the parent (in iframe-messaging.js) to send its url to the iframe telling it to update its tab navigation (iframe-common.js).
In the iframe's onMessage hook,
setParentUrlis invoked for every navigation component on the page to properly update the tabs' link to navigate under the domain of the iframe's parent. This require changes in SDK pr. acceptance test in this pr will fail until SDK changes is merge to developJ=SLAP-2089
TEST=manual
Tested along with the changes in theme.
Deployed two test sites in storm, with one being from the theme dev branch that points to the SDK pr dev branch, under the staging commit: dev/tab-nav-in-iframe@65f09b10. That is used in the src script of iframe_test.html of the other site under the staging commit: dev/yt-testing@517e852f. Navigate to different tabs in the same tab and opening them in new tab. See that the page is still under the domain of the iFrame's parent.