时间戳

首页 > 解决方案 > 重定向返回后如何访问 IFRAME 中的查询字符串参数

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

问题描述

我有一个Host1Page带有 IFRAME的 HTML，sandbox不包括IFRAME 的属性，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，并且在重定向到另一个站点之前和之后总是指向Host1Page托管 IFRAME 的页面的 Uri。

标签： javascripthtmliframe

解决方案

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

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

window.parent.postMessage(querystringValue, targetOrigin);

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

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

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

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

推荐阅读