we are using next.js framework to serve our pages, and in one of the cases we are rendering a page inside an iframe rendered in modal in the original page, and we are using next/router for routing,
The problem: using a router.push inside the iframe will update the page inside the iframe not the original page, and there is no option for that (how to push to the parent window) in the documentation.
we expected to find
router.parent.push("...")
but seems it's not supported until now
so currently, we are using
window.parent.location.href = "/otobus-bileti"
to update parent href,
The Question: is there a better way to update parent href from Iframe?
Code Sample:
The modal with Iframe:
<>
<Modal isOpen={isOpen} hasCloseIcon={false} padding="20px">
<Iframe
attributes={{
src: iframeUrl,
width: '800',
height: '475',
}}
handleReceiveMessage={params => {
const { data } = params;
if (data.pnr) {
const query = qs.stringify(data);
onSuccess(query);
} else {
onFailure(data.errorMessage);
}
}}
/>
</Modal>
</>
contents of the Iframe:
<>
<Layout
sx={{
backgroundColor: 'bg.1',
}}
>
<Layout.Container>
<ErrorCard p={4} width="100%">
<NextSeo noindex={true} />
<ErrorCard.Image />
<ErrorCard.Title>Oops!</ErrorCard.Title>
<ErrorCard.Description>{error}</ErrorCard.Description>
<ErrorCard.Actions flexDirection={['column', 'row']}>
<ErrorCard.Action mb={[1, 0]}>
<Button size="medium" width="full" onClick={() => onTryAgain()}>
{i18n.t('tryAgain')}
</Button>
</ErrorCard.Action>
<ErrorCard.Action>
<Button
size="medium"
width="full"
onClick={() => onGoHomeHandler()}
>
{i18n.t('goToHome')}
</Button>
</ErrorCard.Action>
</ErrorCard.Actions>
</ErrorCard>
</Layout.Container>
</Layout>
</>
const onGoHomeHandler = () => {
return isBus === "true"
?
window.parent.location.href = "/otobus-bileti"
:
window.parent.location.href = '/ucak-bileti';
}