Comment implémenter un saut sans actualisation entre deux pages iframe dans Vue

En tant qu'ingénieur front-end, nous rencontrons souvent des situations où nous devons basculer entre deux pages Web différentes. Dans le framework Vue, le modèle SPA (Single Page Application) qu'il préconise nécessite différentes idées et méthodes lors des sauts de page. Alors, comment implémenter un saut sans actualisation entre deux pages iframe dans Vue ? Cet article discutera et démontrera ce problème.

1. Sauter à l'aide de l'objet window

La façon la plus simple de sauter est d'utiliser l'attribut location.href de l'objet window, par exemple :

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

Cette méthode convient aux sauts de pages Web ordinaires ou de pages dans une seule. saut iframe. Cependant, lorsque nous devons passer à une autre iframe, nous devons d’abord obtenir l’objet window de l’iframe, puis sauter dessus. Supposons que nous ayons maintenant deux iframes imbriquées. Le code est le suivant :

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

Nous devons accéder à une page à l'intérieur de la deuxième iframe en récupérant l'objet window du bouton dans la première iframe, et ne pas effectuer d'actualisation. Le code d'implémentation spécifique est le suivant :

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

L'avantage de cette méthode est qu'elle est simple et facile à implémenter, et elle peut également réaliser des sauts cross-iframe. Mais son défaut est également très évident, c'est-à-dire qu'il ne peut pas réaliser de sauts inter-domaines entre les composants Vue.

2. Utilisez l'instance globale Vue pour sauter

Dans Vue, nous pouvons accéder à la page en accédant à l'instance globale Vue. La méthode spécifique consiste à appeler l'objet routeur via l'attribut $router pour obtenir un saut sans actualisation. En supposant que nous avons instancié le routeur via VueRouter, nous pouvons alors implémenter le saut d'itinéraire de la manière suivante :

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

L'avantage de cette méthode est qu'elle peut obtenir une meilleure adaptabilité et contrôlabilité, tout en respectant strictement les principes de Vue Design. pour les applications d'une seule page. Cependant, lorsque vous utilisez une instance Vue pour sauter dans une iframe, l'actualisation de la page se produira toujours et un saut sans actualisation ne pourra pas être réalisé.

3. Utilisez postMessage pour transmettre des valeurs entre domaines

Lorsque nous devons passer de l'iframe de la page parent à l'iframe de la page enfant, nous rencontrons généralement des problèmes inter-domaines. Pour le moment, la meilleure solution consiste à utiliser l’API HTML5-postMessage. Cette API nous permet de transférer des valeurs entre différentes fenêtres pour réaliser des sauts inter-domaines. Les étapes spécifiques de mise en œuvre sont les suivantes :

Envoyer un message dans la page parent :

// 该消息为跳转信息，detail为目标跳转路径
window.frames[0].postMessage({ type: 'jump', detail: '/path/to/your/page' }, '*');

Écouter le message dans la page enfant :

window.addEventListener('message', function (msg) {
  if (msg.data.type === 'jump') {
    // 将子页面重定向到目标页面
    window.location.replace(msg.data.detail);
  }
}, false);

L'avantage de cette méthode est qu'elle peut réaliser des sauts inter-domaines avec des paramètres, ce qui nous facilite l’optimisation des pages. Mais son inconvénient est également évident, c'est-à-dire qu'il est difficile à entretenir.

Pour résumer, lorsque nous accédons à la page iframe, nous choisissons différentes méthodes de mise en œuvre en fonction de la situation spécifique. Bien sûr, dans le framework Vue, nous recommandons la deuxième méthode - en utilisant l'attribut $router pour sauter, et il est également possible de l'implémenter sur des iframes.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!