重定向返回后如何访问 IFRAME 中的查询字符串参数答案

【问题标题】：How to access query string parameters inside IFRAME after a redirect back重定向返回后如何访问 IFRAME 中的查询字符串参数
【发布时间】：2020-05-10 14:22:39
【问题描述】：

我有一个带有 IFRAME 的 HTML Host1Page，IFRAME 的属性 sandbox 不包括 allow-top-navigation，因此托管页面不受 IFRAME 内可能请求的任何导航的影响。最初 IFRAME 呈现我提供的静态 HTML，但是一旦用户以某种方式与其交互，HTML 的 javascript 会将当前窗口（在我的情况下是 IFRAME 的内容）重定向到另一个主机 - Host2Page。结果，IFRAME 呈现Host2Page 的内容。想要强调的是，我没有设置 IFRAME 的 src 属性，而是设置了 window.location.href，我无法更改重定向的完成方式，因为我不拥有进行该重定向的代码。一旦用户完成与另一个站点Host2Page 的交互，用户将被重定向回与托管我的 IFRAME 的页面相对应的 Uri - Host1Page，而重定向 Host2Page 是通过查询参数提供一些数据。 如何从 IFRAME 中访问该查询参数？

我尝试使用 myIFrame.contentWindow.location.search - 但它始终为空，并且在重定向到另一个站点之前和之后，myIFrame.contentWindow.location.href 始终指向托管 IFRAME 的页面 Host1Page 的 Uri。

【问题讨论】：

标签： javascript html iframe

【解决方案1】：

如果您控制第二次重定向后正在加载的 IFRAME 的内容，您可以使用 postMessage 将参数值发送到父页面。

const querystringParams = new URLSearchParams(window.location.search);
const querystringValue = querystringParams.get('paramINeed');

window.parent.postMessage(querystringValue, targetOrigin);

要在您的父页面上接收消息：

window.addEventListener("message", receiveMessage, false);

receiveMessage 是一个将事件对象作为参数的函数。

见：https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

【讨论】：

我在哪里可以获得targetOrigin？