Analisis kaedah pelaksanaan kaedah Iframe panggilan Vue

Dalam Vue, jika kita ingin memanggil kaedah Iframe, kita perlu memberi perhatian kepada beberapa butiran. Oleh kerana Iframe menyarangkan seluruh halaman dalam bingkai, kita perlu mencari cara yang betul untuk mengakses elemen DOM di dalam Iframe. Di bawah saya akan memperkenalkan anda langkah demi langkah bagaimana untuk melaksanakan Vue untuk memanggil kaedah Iframe.

Pertama, kita perlu mencipta teg Iframe dalam Vue. Katakan kod Iframe kami adalah seperti berikut:

<iframe id="myIframe" src="./myIframe.html"></iframe>

Kita dapat melihat bahawa ID Iframe ialah "myIframe", dan kita boleh mengakses elemen DOM di dalam Iframe melalui ID ini dalam Vue.

Seterusnya, kita perlu menentukan kaedah dalam Vue untuk mendapatkan elemen DOM di dalam Iframe melalui ID elemen "myIframe". Kodnya adalah seperti berikut:

methods: {
    getIframeContent() {
      return document.getElementById('myIframe').contentWindow.document;
    },
}

Kaedah ini mengembalikan objek dokumen di dalam Iframe Kita boleh menggunakan objek ini untuk mengakses elemen DOM dalam kandungan Iframe. Sekarang kita boleh memanggil kaedah ini untuk mendapatkan elemen DOM di dalam Iframe, kodnya adalah seperti berikut:

created() {
    const iframeContent = this.getIframeContent();
}

Dalam Iframe, kami mentakrifkan kaedah bernama "myFunction", yang kami mahu panggil dalam Vue kaedah. Kodnya adalah seperti berikut:

<button @click="callMyFunction">Call myFunction</button>

Apabila mengklik butang "Panggil myFunction" dalam Vue, kita perlu memanggil kaedah "myFunction" di dalam Iframe. Kodnya adalah seperti berikut:

methods: {
    callMyFunction() {
      const iframeContent = this.getIframeContent();
      iframeContent.getElementById('myFunction').contentWindow.myFunction();
    }
}

Dalam kod di atas, kami mengakses elemen "myFunction" melalui objek dokumen di dalam Iframe dan memanggil kaedah contentWindow bagi elemen tersebut. Kaedah ini mengembalikan objek tetingkap di dalam Iframe Kita boleh terus memanggil kaedah "myFunction" pada objek ini.

Dengan cara ini, kami telah menyelesaikan proses memanggil kaedah Iframe dalam Vue. Perlu diingatkan bahawa Iframe mesti terletak di bawah nama domain yang sama, jika tidak, akses mungkin gagal disebabkan isu merentas domain.

Atas ialah kandungan terperinci Analisis kaedah pelaksanaan kaedah Iframe panggilan Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!