next.js update parent URL from Iframe with next/router

Viewed 70

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';
  }
0 Answers
Related