Vue で 2 つの iframe ページ間でリフレッシュなしのジャンプを実装する方法

フロントエンド エンジニアとして、私たちは 2 つの異なる Web ページ間を移動する必要がある状況によく遭遇します。 Vue フレームワークにおいて、それが提唱するシングル ページ アプリケーション (SPA) モデルでは、ページ ジャンプを行う際にさまざまなアイデアと方法が必要です。では、Vue で 2 つの iframe ページ間でリフレッシュなしのジャンプを実装するにはどうすればよいでしょうか?この記事では、この問題について説明し、説明します。

1. window オブジェクトを使用したジャンプ

ジャンプする最も簡単な方法は、window オブジェクトの location.href 属性を使用することです (例:

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

この方法が適しています)通常の場合 Web ページにジャンプするか、単一の iframe 内のページにジャンプします。ただし、別の iframe にジャンプする必要がある場合は、まず iframe の window オブジェクトを取得してから、その iframe にジャンプする必要があります。入れ子になった iframe が 2 つあるとします。コードは次のとおりです:

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

2 番目の 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 属性を使用してジャンプする 2 番目の方法をお勧めします。これは iframe 間で実装することも可能です。

以上がVue で 2 つの iframe ページ間でリフレッシュなしのジャンプを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。