Bagaimana untuk melaksanakan lompat bebas muat semula antara dua halaman iframe dalam Vue

Sebagai jurutera hadapan, kami sering menghadapi situasi di mana kami perlu melompat antara dua halaman web yang berbeza. Dalam rangka kerja Vue, model Aplikasi Halaman Tunggal (SPA) yang dianjurkannya memerlukan idea dan kaedah yang berbeza semasa membuat lompatan halaman. Jadi, bagaimana untuk melaksanakan lompat bebas muat semula antara dua halaman iframe dalam Vue? Artikel ini akan membincangkan dan menunjukkan isu ini.

1. Gunakan objek tingkap untuk melompat

Cara paling mudah untuk melompat ialah menggunakan atribut location.href objek tetingkap, contohnya:

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

Kaedah ini boleh digunakan Lompat ke halaman web biasa, atau lompat ke halaman dalam satu iframe. Walau bagaimanapun, apabila kita perlu melompat ke iframe lain, kita perlu terlebih dahulu mendapatkan objek tetingkap iframe dan kemudian melompat ke atasnya. Katakan kita kini mempunyai dua iframe bersarang Kodnya adalah seperti berikut:

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

Kita perlu melompat ke butang dalam iframe pertama dengan mendapatkan objek tetingkap iframe kedua di dalamnya dan mencapai tiada penyegaran. Kod pelaksanaan khusus adalah seperti berikut:

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

Kelebihan kaedah ini ialah ia mudah dan mudah untuk dilaksanakan, dan ia juga boleh mencapai lompatan silang-iframe. Tetapi kelemahannya juga sangat jelas, iaitu, ia tidak dapat merealisasikan lompatan silang domain antara komponen Vue.

2. Gunakan tika global Vue untuk melompat

Dalam Vue, kita boleh melompat ke halaman dengan mengakses tika Vue global. Kaedah khusus adalah untuk memanggil objek penghala melalui atribut $router untuk mencapai lompatan tanpa segar semula. Dengan mengandaikan bahawa kami telah membuat instantiated penghala melalui VueRouter, kami boleh melaksanakan lompatan penghalaan dengan cara berikut:

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

Kelebihan kaedah ini ialah ia boleh mencapai kebolehsuaian dan kebolehkawalan yang lebih baik Pada masa yang sama, ia juga mematuhi prinsip reka bentuk aplikasi satu halaman Vue dengan tegas. Walau bagaimanapun, apabila menggunakan contoh Vue untuk melompat dalam iframe, muat semula halaman masih akan berlaku dan lompatan tanpa muat semula tidak boleh dicapai.

3. Gunakan postMessage untuk menghantar nilai merentas domain

Apabila kita perlu melompat antara iframe halaman induk dan iframe halaman anak, kita biasanya menghadapi masalah merentas domain. Pada masa ini, penyelesaian terbaik ialah menggunakan HTML5 API-postMessage. API ini membolehkan kami memindahkan nilai antara tingkap yang berbeza untuk mencapai lompatan merentas domain. Langkah pelaksanaan khusus adalah seperti berikut:

Hantar postMessage dalam halaman induk:

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

Dengar mesej dalam halaman anak:

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

Kelebihan daripada kaedah ini adalah , boleh merealisasikan lompatan merentas domain dengan parameter, yang memudahkan kita melompat ke halaman. Tetapi kelemahannya juga jelas, iaitu sukar untuk dikekalkan.

Ringkasnya, apabila kami melompat ke halaman iframe, kami memilih kaedah pelaksanaan yang berbeza mengikut situasi tertentu. Sudah tentu, dalam rangka kerja Vue, kami mengesyorkan kaedah kedua - menggunakan atribut $router untuk melompat, dan ia juga boleh dilaksanakan merentasi iframe.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan lompat bebas muat semula antara dua halaman iframe dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!