巧用iframe引入子应用，解决刷新页面回到首页的难题

前端

2023-02-13 19:03:10

子应用嵌入中的“刷新困局”

在Web开发中，Iframe是一个常见的工具，用于将不同来源的应用程序嵌入同一个页面。然而，当使用Iframe引入子应用时，却有一个恼人的问题：刷新页面时，子应用会回到初始化首页 。

这不仅会打断用户的操作流程，也影响网站的可信度。更重要的是，如果子应用包含重要用户数据，这种刷新行为可能会导致数据丢失，后果严重。

巧妙解决之道：保持子应用状态

为了解决这个问题，我们需要一种能够在刷新页面时保持子应用状态的解决方案。本文将提供一个巧妙的方案，分步指导您解决这一问题：

步骤：

记录子应用地址： 在子应用中，获取当前页面地址并存储在一个变量中。
传递给父应用： 通过postMessage API，将存储的地址发送给父应用。
父应用接收地址： 在父应用中，监听postMessage事件，接收子应用发送的页面地址。
存入存储介质： 将接收到的地址存储到LocalStorage或Cookie等持久化存储介质中。
更新Iframe src 地址： 在刷新页面时，从存储介质中获取子应用地址，并将其作为新Iframe的src属性值。
子应用恢复状态： 当子应用重新加载时，它将从新Iframe的src地址中获取之前存储的页面地址，并恢复到之前状态。

方案优点：

简单易行： 只需要在子应用和父应用中添加少量代码。
兼容性好： 对浏览器和框架没有特殊要求，支持postMessage API和LocalStorage/Cookie即可。
适用范围广： 不仅适用于刷新页面，也适用于子应用登录失效等情况。

代码示例：

子应用代码：

const pageUrl = window.location.href;
window.addEventListener("message", (event) => {
  if (event.source === parent) {
    parent.postMessage(pageUrl, "*");
  }
});

父应用代码：

window.addEventListener("message", (event) => {
  if (event.source === iframeElement) {
    localStorage.setItem("iframeUrl", event.data);
  }
});

window.addEventListener("load", () => {
  const iframeUrl = localStorage.getItem("iframeUrl");
  if (iframeUrl) {
    iframeElement.src = iframeUrl;
  }
});