从JS中的iframe重新加载页面

Question

我有一个iframe，我想通过它刷新主页。我尝试了诸如window.location.reload（）等的函数。但是看来它不起作用。 我需要将重新加载函数放在不在主页上的iframe上。 我可以得到document.referrer获得主页。

iframe codesandbox 请参阅此

>

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

/ strong > iframe part

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

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

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

  </script>
</body>

Answer 1

要与横断面互动，使我们成为 窗口。 postmessage 和使用onMessage或addeventListener（“消息”，...）。

codesandbox上的示例使用特定的来源，而此处的示例显示了如何处理它，如果目标和/或源窗口具有'null'作为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>