Vue에서 두 iframe 페이지 간에 새로 고침 없는 점프를 구현하는 방법

프론트엔드 엔지니어로서 우리는 서로 다른 두 웹 페이지 사이를 이동해야 하는 상황에 자주 직면합니다. Vue 프레임워크에서 옹호하는 단일 페이지 애플리케이션(SPA) 모델은 페이지 점프를 할 때 다양한 아이디어와 방법을 요구합니다. 그렇다면 Vue의 두 iframe 페이지 간에 새로 고침 없는 점프를 구현하는 방법은 무엇입니까? 이 기사에서는 이 문제를 논의하고 시연할 것입니다.

1. 창 개체를 사용하여 점프

가장 간단한 점프 방법은 창 개체의 location.href 속성을 사용하는 것입니다. 예:

window.location.href = 'http://www.example.com';

이 방법은 일반 웹 페이지 점프 또는 단일 페이지에 적합합니다. 아이프레임 점프. 그러나 다른 iframe으로 점프해야 하는 경우 먼저 iframe의 창 개체를 얻은 다음 그 위로 점프해야 합니다. 이제 두 개의 중첩된 iframe이 있다고 가정합니다. 코드는 다음과 같습니다.

<iframe id="iframe1" src="http://www.example1.com"></iframe>
<iframe id="iframe2" src="http://www.example2.com"></iframe>

첫 번째 iframe에 있는 버튼의 창 개체를 가져와서 두 번째 iframe 내부의 페이지로 이동해야 하며 새로 고침이 필요하지 않습니다. 구체적인 구현 코드는 다음과 같습니다.

// 获取 iframe2 的 window 对象
var iframe2Window = document.getElementById('iframe2').contentWindow;
// 跳转到 iframe2 中的一个页面，无刷新
iframe2Window.location.href = 'http://www.example2.com/page1.html';

이 방법의 장점은 구현이 간단하고 쉬우며 iframe 간 점프도 달성할 수 있다는 것입니다. 그러나 단점도 매우 분명합니다. 즉, Vue 구성 요소 간의 도메인 간 점프를 실현할 수 없다는 것입니다.

2. Vue 글로벌 인스턴스를 사용하여 점프

Vue에서는 글로벌 Vue 인스턴스에 액세스하여 페이지로 이동할 수 있습니다. 구체적인 방법은 새로 고침 없는 점프를 달성하기 위해 $router 속성을 통해 라우터 개체를 호출하는 것입니다. VueRouter를 통해 라우터를 인스턴스화했다고 가정하면 다음과 같은 방식으로 경로 점프를 구현할 수 있습니다.

// 跳转到指定路径，无刷新
this.$router.push('/path/to/your/page')

이 방법의 장점은 더 나은 적응성과 제어성을 달성할 수 있다는 점이며 단일 라우터에 대한 Vue 디자인 원칙도 엄격하게 준수합니다. 페이지 응용 프로그램. 그러나 Vue 인스턴스를 사용하여 iframe으로 이동하면 페이지가 계속 새로 고쳐지고 새로 고침 없는 점프를 달성할 수 없습니다.

3. 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에서 두 iframe 페이지 간에 새로 고침 없는 점프를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!