作为一名前端工程师，我们经常会遇到需要在两个不同的网页之间进行跳转的情况。而在vue框架中，其推崇的单页面应用（spa）模型，使得我们在进行页面跳转时需要有所不同的思路和方式。那么，如何在vue中实现两个iframe页面之间的无刷新跳转呢？本文将针对这一问题进行探讨和演示。
一、使用window对象跳转
最简单的跳转方式是使用 window 对象的 location.href 属性，例如：
window.location.href = 'http://www.example.com';
这种方式适用于普通的网页跳转，或者在单一 iframe 中进行页面跳转。但是，当我们需要跳转到另一个 iframe 中时，就需要先获取到该 iframe 的 window 对象，然后在其上进行跳转。假设我们现在有两个嵌套的 iframe，代码如下：
<iframe></iframe> <iframe></iframe>
我们需要在第一个 iframe 中的一个按钮中，通过获取第二个 iframe 的 window 对象，进行跳转到其内部的某个页面，并实现无刷新。具体实现代码如下：
// 获取 iframe2 的 window 对象
var iframe2Window = document.getElementById('iframe2').contentWindow;
// 跳转到 iframe2 中的一个页面，无刷新
iframe2Window.location.href = 'http://www.example2.com/page1.html';
这种方式的优点是简单易行，同时也能够实现跨 iframe 跳转。但其缺点也十分明显，就是无法实现 Vue 组件之间的跨域跳转。
二、使用Vue全局实例跳转
在Vue中，我们可以通过访问全局Vue实例来进行页面跳转。具体方式是通过 $router 属性调用 router 对象，从而实现无刷新跳转。假设我们已经通过 VueRouter 实例化了 router，那么我们通过以下方式就可以实现路由跳转：
// 跳转到指定路径，无刷新
this.$router.push('/path/to/your/page')
这种方式的优点是，能够获得更好的适应性和可控性，同时也严格遵守了Vue单页面应用的设计原则。但是，在iframe里面使用Vue实例跳转时还是会出现页面刷新现象，无法实现无刷新跳转。
三、使用postMessage跨域传值
当我们需要在父页面 iframe 和子页面 iframe 之间进行跳转时，我们通常会遇到跨域问题。这时候，最好的解决方案是使用 HTML5 的 API——postMessage。这个 API 可以让我们在不同的窗口之间进行传值，从而实现跨域跳转。具体实现步骤如下：
在父页面中发送 postMessage：
// 该消息为跳转信息，detail为目标跳转路径
window.frames[0].postMessage({ type: 'jump', detail: '/path/to/your/page' }, '*');
在子页面中监听该消息：
window.addEventListener('message', function (msg) {
if (msg.data.type === 'jump') {
// 将子页面重定向到目标页面
window.location.replace(msg.data.detail);
}
}, false);
这种方式的优点是，可以实现跨域带参数跳转，方便了我们进行页面的跳转。但其缺点也明显，就是难以维护。
综上所述，我们在进行iframe页面跳转时，根据具体情况选择不同的实现方式。当然，在Vue框架中，我们更推荐使用第二种方式——使用 $router 属性进行跳转，并且跨iframe进行实现也是可行的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
