3

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';
  }
Abdul Fattah Boshi
  • 333
  • 1
  • 4
  • 18
  • Did you find any way to access parent url inside getServerSideProps? – Praful Kadam Mar 20 '23 at 08:01
  • This is not my issue exactly, In Next.js, you can access the parent URL from the getServerSideProps function through the request context object (ctx), which provides access to the request object (ctx.req), which includes the request headers, including the referer header. You can access the referer header using ctx.req.headers.referer. This will give you the URL of the page that referred the user to the current page. – Abdul Fattah Boshi Mar 21 '23 at 18:51

0 Answers0