将 iframe url 参数动态传递给父 URL

Posted 2023-05-09

【中文标题】将 iframe url 参数动态传递给父 URL

【英文标题】：Dynamically pass iframe url parameters to parent URL

【发布时间】：2021-06-05 21:54:36

【问题描述】：

我是 iframe 与父级交互的新手，所以让我简单解释一下我面临的问题：

我有一个带有 iframe 的网站。如何使用 javascript 或 jQuery 代码根据用户在 iframe 中单击的内容动态更改我的父 URL？

例如，如果我的父 URL 是 parent.com?page=1&currency=eur，那么我的 iframe 将自动为 iframe.com?page=1&currency=eur，但用户可以单击 iframe 内的另一个链接。如果用户单击链接并且 iframe src 更改为 iframe.com?page=another_page，我希望父 URL 动态更改为 parent.com/page=another_page 或 parent.com#page=another_page。换句话说，我将所有 iframe URL 参数传递给父级。

谁能帮我解决这个问题？

我可以完全控制父窗口，也可以向子窗口添加一些代码，但它们不在同一个域中。

谢谢

【问题讨论】：

从你保留<iframe></iframe>的页面，const iframeWindow = document.querySelector('iframe').contentWindow;得到另一个页面的window。从包含内容const parentWindow = parent; 的页面中，获取父window。这两个变量现在都是window 对象，所以parentWindow.location 可以获取和设置location。分配 GET URL 的问题是您的页面会重新加载，因此 sessionStorage 或 localStorage 或主题标签可能是更好的解决方案。

要扩展 @StackSlave 告诉您的内容，使用 parent.history.pushState() 您可以更改父 url 而无需重新加载。

【参考方案1】：

您可以使用window.postMessage 实现跨2个不同域的父iframe/子窗口之间的交互。

在你的情况下，由于你的孩子正在修改你的父母，你应该像这样在你的父母页面上设置一个监听器

window.addEventListener("message", (event) => 
  if (event.origin !== "http://thisisyourchilddomain.com") // You must check for the sender's origin or your website could be exploited !!
    return;

  // do something
, false);

在您的子页面中，您将调用方法 window.postMessage

parent.postMessage("hello there parent! please perform a redirect with the following params...", "http://thisisyourchilddomain.com");

请注意，此处的 parent 是一个全局变量，您可以从孩子那里访问它。此外，您可以将对象传递给 postMessage(key:value, ..) 的第一个参数

从 window.postMessage (mozilla) 的链接中获取并修改了示例。