Reload Page From Iframe in JS

Question

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>

Answer 1

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>