Reload Page From Iframe in JS

I have an iframe and I want to refresh the main page through it. I've tried functions such as window.location.reload() etc.. but it seems it doesn't work. I need to put the reload function on the iframe not on the main page. I could get as much as document.referrer to get the main page.

Iframe codesandbox SEE THIS

Main page codesandbox SEE THIS

 <div class="iframe-container">
      <iframe class="iframe-layout" src="https://zqdqmn.csb.app/"></iframe>
  </div>

Iframe Part

  <script>
  
    function redirectToGoogle() {
      const mainUrl = document?.referrer

      window.location.href = `${mainUrl}`

      // window.open(mainUrl,"_self")
    }

  </script>
</body>

Solution

To interact with cross origin pages make us of window.postMessage and MessageEvents using onmessage or addEventListener("message", ...).

The example on codesandbox shows how to make use with a specific origin, while this example here shows, how to handle it, if the target and/or source window have 'null' as origin.

window.addEventListener("message", async ({ data, origin, source }) => {
  // another check would be a check for the origin, but since the iframe was created with srcdoc, the origin is null
  console.log("Origin:",origin);
  // only react if the source window is the frame
  if (source == frameToListen.contentWindow) {
    try { // in case of "data == null"
      console.log("data", data);
      // wait for 5 seconds before reload
      if (data.reload) {
        await new Promise(r => setTimeout(r,5000));
        console.log("reload..?");
        window.location.reload();
      }
    } catch (e) {
      console.error(e);
    }
  }
});

// Generate dummies in the iframe to send some events
// The only way to contact a window with an origin of "null" is by "*"
frameToListen.srcdoc = `<script>function send(obj) {
    window.parent.postMessage(obj, '*');
    // avoid unexpected end of input in stacksnippet-parser
  }</scr${""}ipt><input type="button" value="undefined" onclick="send()">
  <input type="button" value="null" onclick="send(null)">
  <input type="button" value="{ reload: true }" onclick="send({ reload: true })">
  <input type="button" value="{ reload: false }" onclick="send({ reload: false })">
  <input type="button" value="[]" onclick="send([])">`;

<iframe id="frameToListen" style="width: 100%;"></iframe>