vue嵌iframe实现跨域调用vue内路由的解决方案

2023-09-29 01:29:38







### 前言

在实际开发中，我们经常会遇到需要在iframe中嵌入vue组件的情况，而此时就可能面临跨域的问题。跨域是指不同源的两个页面之间的通信受到浏览器的限制，无法直接访问对方的数据和资源。这会给跨域调用vue内路由带来一定困难。

### 解决思路

要解决vue嵌iframe实现跨域调用vue内路由的问题，我们需要采取以下步骤：

1. 在iframe中嵌入vue组件，并确保组件具有跨域访问权限。
2. 在vue组件中使用postMessage()方法将数据发送给父窗口。
3. 在父窗口中使用window.addEventListener()方法监听postMessage()事件，并接收数据。
4. 根据收到的数据，调用vue路由中的相关方法，实现跨域调用。

### 具体实现

下面我们来看一下如何具体实现上述步骤：

1. 在iframe中嵌入vue组件：

```html
<iframe src="http://a.com/vue-component.html"></iframe>

在vue组件中使用postMessage()方法将数据发送给父窗口：

window.parent.postMessage({
  type: 'changeRoute',
  payload: {
    path: '/new-route'
  }
}, '*');

在父窗口中使用window.addEventListener()方法监听postMessage()事件，并接收数据：

window.addEventListener('message', function(event) {
  if (event.origin !== 'http://a.com') {
    return;
  }

  const data = event.data;

  if (data.type === 'changeRoute') {
    this.$router.push(data.payload.path);
  }
});