Rumah > Artikel > hujung hadapan web > Menganalisis aplikasi dan prinsip iframe
Menganalisis aplikasi dan prinsip iframe
- WBOYasal
- 2024-01-06 08:19:08912semak imbas
Analisis aplikasi dan prinsip iframe
Dengan pembangunan Internet, fungsi dan kerumitan halaman web juga semakin tinggi dan lebih tinggi. Untuk memenuhi keperluan pengguna, pembangun perlu menyepadukan kandungan web yang berbeza ke dalam satu halaman, dan di sinilah iframes berguna. Artikel ini akan memberikan analisis terperinci tentang aplikasi dan prinsip iframe serta menyediakan contoh kod khusus.
1. Konsep asas iframe
1.1 Apakah itu iframe?
iframe (singkatan dari Inline Frame) ialah elemen HTML yang membenarkan dokumen HTML lain dibenamkan ke dalam dokumen semasa. Ia boleh difahami sebagai tetingkap kecil yang digunakan untuk memaparkan kandungan halaman web lain.
1.2 Sintaks asas iframe
Dalam HTML, buat iframe dengan menggunakan teg
<iframe src="http://www.example.com"></iframe>
Kod di atas akan membuat iframe dalam dokumen semasa, yang akan memuatkan kandungan web URL yang ditentukan.
2. Senario aplikasi iframe
2.1 Paparan kandungan di bawah nama domain yang sama
Senario aplikasi yang paling biasa ialah memaparkan kandungan halaman web yang berbeza di bawah nama domain yang sama pada satu halaman. Contohnya, halaman utama tapak web e-dagang boleh menggunakan iframe untuk memaparkan aktiviti produk terkini, pengesyoran popular dan kandungan lain di halaman utama.
2.2 Paparan kandungan di bawah nama merentas domain
Selain memaparkan kandungan di bawah nama domain yang sama, iframe juga boleh digunakan untuk memaparkan kandungan di bawah nama merentas domain. Sebagai contoh, tapak web pengagregatan berita boleh menggunakan iframe untuk menyepadukan kandungan daripada media berita utama pada halaman yang sama.
2.3 Paparan coretan kod
Pembangun selalunya perlu memaparkan sekeping kod dalam blog atau artikel, tetapi secara langsung menyiarkan kod itu tidak cantik dan mudah dibaca. Pada masa ini, anda boleh menggunakan iframe untuk memaparkan coretan kod dan memuatkan coretan kod dengan menetapkan atribut src iframe supaya ia boleh dipaparkan dalam borang pratonton dalam blog atau artikel.
3. Analisis prinsip iframe
3.1 Prinsip kerja iframe
Apabila penyemak imbas menemui teg
3.2 Interaksi antara iframe dan halaman semasa
Memandangkan iframe dan halaman semasa adalah bebas, terdapat masalah akses merentas domain antara kedua-duanya. Walaupun halaman web dengan nama domain yang sama dimuatkan dalam iframe, kandungannya tidak boleh diakses terus melalui JavaScript.
Walau bagaimanapun, komunikasi silang domain boleh dicapai melalui kaedah postMessage objek tetingkap. Kaedah postMessage membenarkan mesej dihantar antara tingkap yang berbeza, dengan itu membolehkan interaksi antara iframe dan halaman semasa.
4. Contoh kod khusus iframe
Berikut ialah contoh kod khusus untuk paparan kandungan iframe dan halaman web di bawah nama domain yang sama, paparan kandungan halaman web di bawah nama merentas domain dan paparan coretan kod.
4.1 Contoh memaparkan kandungan web di bawah nama domain yang sama
<iframe src="http://www.example.com"></iframe>
Kod di atas akan mencipta iframe dalam dokumen semasa dan memuatkan kandungan halaman web http://www.example.com.
4.2 Contoh paparan kandungan web di bawah nama merentas domain
<iframe src="http://www.otherdomain.com"></iframe>
Kod di atas akan mencipta iframe dalam dokumen semasa dan memuatkan kandungan halaman web http://www.otherdomain.com.
4.3 Contoh paparan coretan kod
<iframe srcdoc="
<html>
<body>
<pre class="brush:php;toolbar:false">
<code>
function sayHello() {
console.log('Hello!');
}
sayHello();
</code>
Atas ialah kandungan terperinci Menganalisis aplikasi dan prinsip iframe. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!