重定向到其他页面时出现 iFrameResizer 问题

Posted 2023-05-09

【中文标题】重定向到其他页面时出现 iFrameResizer 问题

【英文标题】：iFrameResizer issue on redirection to other page

【发布时间】：2019-12-30 02:22:44

【问题描述】：

我正在使用iframe-resizer 进行跨域应用程序，Iframe 在应用程序内加载良好，但是当我单击重定向到 Iframe 应用程序上其他 URL 的按钮时，它给了我错误：

在“DOMWindow”上执行“postMessage”失败：目标原点 提供的（）不匹配收件人窗口的来源（）。

我已经给出了 Iframe 的 src，例如 https://example.com，现在 example.com 上的主页正在加载，但是当我重定向到具有类似 https://example.com/product/details 的 URL 的其他页面时，就会出现上述错误。

我已经升级到 4.1 版本的库并且问题已经解决，但是它仍然在控制台上显示错误。现在我面临重定向后无法在页面内获取父应用程序的URI的问题。

我正在使用 document.referrer 来获取它，它在 iframe 的主页上工作正常，但在重定向后在其他页面上却不行，我还面临移动设备上重定向页面的高度问题，它显示了一个长的空白空间和原因是不是所有的子页面都在选择 iframe 主页面的高度，而不是调整高度。

这两个应用程序都托管在 IIS 上，并且在我们的控制之下。任何帮助/建议将不胜感激。

【参考方案1】：

我使用来自父应用程序的 window.postMessage 向子 iframe 应用程序发布消息，并使用属性 event.origin 能够获取托管 iframe 的父应用程序的 URI，因为重定向发生时它正在使用子应用程序页面作为它的父级，它给出了错误的 URI。

父应用：

var frame = document.getElementById('wizardIframe');
frame.contentWindow.postMessage(window.location.href, '*');

子页面

 window.addEventListener('message', function (event) 
        window.iFrameResizer = 
            targetOrigin: event.origin