iframe路由传参

### 如何在 iframe 中实现路由传参 为了实现在 `iframe` 中进行路由传参，通常采用的方式是通过父页面向 `iframe` 发送消息来传递参数。具体来说，在 Vue.js 应用中可以通过 `postMessage()` 方法发送数据给嵌入的 `iframe` 页面。 #### 使用 postMessage 实现跨域通信并携带路由参数 考虑下面的例子： ```javascript // 父页面代码片段 const mapFrame = this.$refs["mainIframe"]; let that = this; if (mapFrame.attachEvent) { // 对于IE8及其更早版本的支持 mapFrame.attachEvent("onload", function () { mapFrame.contentWindow.postMessage( JSON.stringify({ action: "navigate", routePath: "/some/path", queryParams: { id: 123 } }), "*" ); }); } else { mapFrame.onload = function () { mapFrame.contentWindow.postMessage( JSON.stringify({ action: "navigate", routePath: "/another/path", queryParams: { userId: 456 } }), "*" ); }; } ``` 上述代码展示了如何利用 `postMessage()` 向 `iframe` 内部的应用程序发送导航指令以及查询参数[^1]。 #### 在 iframe 内监听消息事件并解析路径与参数 假设 `iframe` 加载的是另一个前端应用，则可以在该应用程序启动时设置一个全局的消息监听器用于捕获来自外部的数据包，并据此更新内部状态或执行跳转操作。 对于基于 Vue Router 的项目而言，可以这样做： ```javascript window.addEventListener('message', function(event){ try{ const messageData = event.data ? JSON.parse(event.data) : {}; if(messageData.action === 'navigate'){ router.push({ path:messageData.routePath, query:messageData.queryParams || {} }) } }catch(error){ console.error(`Error processing incoming message`, error); } }); ``` 这段脚本会在接收到特定格式的消息后触发一次新的路由变化，从而完成从父窗口到子窗体内的参数传输过程。 #### 处理刷新后的参数丢失问题 为了避免用户刷新浏览器之后导致 URL 参数消失的情况发生，建议使用 HTML5 History API 或者 hash 模式的路由模式保存这些动态信息至地址栏中。这样即使页面重新加载也能保持原有的上下文环境不变[^4]。