Bagaimana untuk membenamkan halaman web dalam vue

Apabila membangunkan aplikasi web, banyak kali kita perlu membenamkan halaman web luaran (seperti peta, halaman pembayaran, dll.) ke dalam halaman web kita sendiri. Bagaimana untuk mencapai ini? Terdapat banyak cara untuk melaksanakan halaman web terbenam dalam Vue Mari perkenalkan satu persatu di bawah.

1. kaedah iframe

Kaedah paling mudah ialah menggunakan teg iframe dalam HTML untuk membenamkan halaman web luaran ke dalam halaman utama sebagai tetingkap terbenam. Dalam Vue, ini boleh dicapai dengan cara berikut:

<template>
  <div class="container">
    <iframe
      src="http://example.com"
      frameborder="0"
      width="100%"
      height="100%"
    ></iframe>
  </div>
</template>

Di sini kami menetapkan alamat halaman web luaran terbenam src-iframe, tetapkan sempadan bingkai, lebar dan ketinggian masing-masing menetapkan lebar dan tinggi iframe .

Walau bagaimanapun, kaedah ini mempunyai had tertentu. Secara umumnya, iframe akan memperlahankan pemuatan halaman dan menjejaskan pengalaman pengguna, dan dasar keselamatan penyemak imbas juga mungkin mengehadkan penggunaan iframe. Oleh itu, kita perlu mempertimbangkan kaedah lain.

2. kaedah objek

Dalam Vue, anda juga boleh menggunakan teg objek untuk membenamkan halaman web.

<template>
  <div class="container">
    <object :data="url" type="text/html" width="100%" height="100%"></object>
  </div>
</template>
<script>
export default {
  data() {
    return {
      url: "http://example.com",
    };
  },
};
</script>

Dalam contoh ini, kami menentukan URL untuk dibenamkan melalui atribut data. Menggunakan teg objek mengoptimumkan prestasi dan meningkatkan keselamatan berbanding iframe. Di samping itu, objek sebenarnya adalah kaedah terbenam yang disyorkan oleh W3C.

Walau bagaimanapun, terdapat beberapa had. Contohnya, teg objek mungkin tidak berfungsi pada sesetengah penyemak imbas atau halaman.

3. Kaedah Vue-iframe

Vue-iframe ialah pemalam yang dibangunkan khas untuk Vue, yang menyelesaikan masalah dua kaedah di atas pada tahap tertentu. Ia menjadikan kerja dengan iframe lebih mudah dan menyediakan beberapa ciri tambahan seperti CSS kandungan yang boleh disesuaikan, pelarasan automatik ketinggian iframe dan banyak lagi. Penggunaan khusus adalah seperti berikut:

Pertama, kita perlu memasang Vue-iframe:

npm install vue-iframe

Kemudian, kita perlu memperkenalkan Vue-iframe ke dalam Vue:

import VueIframe from "vue-iframe";

Vue.use(VueIframe);

Akhir sekali , kami Anda boleh menggunakan Vue-iframe untuk membenamkan halaman web:

<template>
  <div class="container">
    <vue-iframe url="http://example.com" :styles="{ height: '100%' }" />
  </div>
</template>

Vue-iframe boleh menerima berbilang atribut dan boleh membantu kami mengawal iframe dengan mudah. Atribut url diperlukan dan menentukan URL untuk dibenamkan. Atribut gaya adalah pilihan dan digunakan untuk menyesuaikan gaya iframe (seperti dalam contoh di atas, gaya ketinggian digunakan untuk menetapkan ketinggian iframe).

Ringkasan

Di atas ialah tiga kaedah untuk membenamkan halaman web dalam Vue. Kaedah untuk digunakan bergantung pada keperluan dan keutamaan projek anda. Jika anda hanya perlu membenamkan halaman web, sama ada iframe atau objek akan melakukan tugas itu. Jika anda memerlukan ciri yang lebih maju, seperti melaraskan ketinggian iframe secara automatik, dsb., anda boleh memilih Vue-iframe. Mana-mana kaedah yang anda pilih, ingat untuk mempertimbangkan prestasi dan keselamatan.

Atas ialah kandungan terperinci Bagaimana untuk membenamkan halaman web dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!