ZZzzz~ mungkin berputar
<Iframe src="/URL" width="x" height="x" scrolling="[OPTION]" frameborder="x"></iframe>
src: Jalur file, yang dapat berupa file HTML, teks, ASP, dll.;
lebar, tinggi: lebar dan tinggi area "gambar-dalam-gambar";
bergulir: Ketika file HTML SRC yang ditentukan tidak ditampilkan di area yang ditentukan, opsi gulir, jika disetel ke NO, bilah gulir tidak akan muncul; jika Otomatis: bilah gulir akan otomatis muncul; itu akan ditampilkan;
frameborder: Lebar batas area. Untuk memadukan "gambar-dalam-gambar" dengan konten yang berdekatan, sering kali disetel ke 0.
Misalnya:
<Iframe src=" http://www.xyz.com/xyz "; width="250" height="200" scrolling="no" frameborder="0"></iframe>
Antara jendela dan mengambang frame Dalam bahasa skrip dan hierarki objek, jendela yang berisi Iframe disebut formulir induk, dan bingkai mengambang disebut formulir anak. Penting untuk memperjelas hubungan antara keduanya, karena Iframe perlu dikontrol formulir induk. Saat mengakses subformulir atau sebaliknya, Anda harus mengetahui hierarki objek sebelum Anda dapat mengakses dan mengontrol formulir melalui program.
1. Akses dan kontrol objek dalam subformulir di formulir induk. Dalam formulir induk, Iframe, yaitu subformulir, adalah objek turunan dari objek dokumen .
Sekarang ada pertanyaan, yaitu bagaimana kita mengontrol Iframe ini? Di sini kita perlu membicarakan tentang objek Iframe. Saat kita menyetel atribut ID ke tag ini, kita dapat melakukan serangkaian kontrol pada HTML yang terdapat dalam Iframe melalui DOM Model Objek Dokumen.
Misalnya, sematkan file test.htm di example.htm dan kendalikan beberapa objek tag di test.htm:
<Iframe src="test.htm" id="test" width="250" height="200" scrolling="no" frameborder="0"></iframe>
Kode file test.htm adalah:
<html>
<tubuh>
<h1 id="myH1">halo, anakku</h1>
</tubuh>
</html>
Jika kita ingin mengubah teks pada tag H1 dengan nomor ID myH1 menjadi halo sayang, kita bisa menggunakan:
document.myH1.innerText="halo, sayangku"(dokumen dapat dihilangkan)
Dalam file example.htm, subformulir yang ditunjuk oleh objek tanda Iframe konsisten dengan model objek DHTML umum, dan metode kontrol akses objeknya sama, jadi saya tidak akan menjelaskannya secara detail.
2. Mengakses dan mengontrol objek-objek pada form induk pada form anak. Pada form anak, kita dapat mengakses objek-objek yang ada pada jendela induk melalui objek induknya (parent).
Seperti contoh.htm:
<html>
<body onclick="alert(tt.myH1.innerHTML)"> <Nama Iframe="tt" src="frame1.htm" width="250" height="200" scrolling="no" frameborder="0"> </iframe>
<h1 id="myH2">halo istriku</h1>
</tubuh>
</html>
Jika kita ingin mengakses teks judul di frame1.htm dengan nomor ID myH2 dan mengubahnya menjadi "halo sobat", kita bisa menulis seperti ini:
parent.myH2.innerText="halo, temanku"
Disini objek induk mewakili form saat ini (form dimana example.htm berada). Untuk mengakses objek pada form induk di form anak, tanpa terkecuali dilakukan melalui objek induk.
Meskipun Iframe tertanam dalam file HTML lain, Iframe tetap relatif independen dan merupakan "kerajaan independen". Karakteristik dalam satu HTML juga berlaku untuk frame mengambang.
Bayangkan saja, melalui tag Iframe, kita bisa mengekspresikan konten yang tidak diubah sebagai Iframe. Dengan cara ini, kita tidak perlu menulis konten yang sama berulang kali. Ini seperti proses atau fungsi dalam pemrograman, dan betapa membosankannya tenaga kerja manual terselamatkan! Selain itu, dan yang terpenting, ini membuat modifikasi halaman lebih mudah dilakukan, karena daripada harus memodifikasi setiap halaman untuk menyesuaikan tata letak, Anda hanya perlu mengubah tata letak satu formulir induk.
Perlu diperhatikan bahwa versi sebelum Nestscape 6.0 tidak mendukung tag Iframe.
Contoh:
<iframe src="Page" width="Width" height="Tinggi" align="Susunannya bisa kiri atau kanan, tengah" scrolling="Jika ada scroll bar isikan no atau yes">< /iframe>
< IFRAME frameBorder=0 frameSpacing=0 tinggi=25 marginHeight=0 marginWidth=0 gulir=tidak
name=main src="/bgm/bgm.html" width=300></IFRAME>
Setelah menggunakan iframe, saya menemukan bahwa bilah gulirnya tidak indah dan saya ingin menggunakan 2 gambar saja↑↓
Bagaimana hal ini dapat dicapai?
menjawab:
Ganti <title>..</title> halaman web dengan kode berikut
<BAHASA SKRIP="javascript">
fungsi gulir (n)
{suhu=n;
Keluar1.scrollTop=Keluar1.scrollTop+temp;
jika (temp==0) kembali;
setTimeout("gulir(temp)",80);
}
</SKRIP>
<LEBAR TABEL="330">
<TR>
<TD WIDTH="304" VALIGN="ATAS" ROWSPAN="2" >
<DIV ID=Out1 STYLE="width:100%; height:100;overflow: tersembunyi ;border-style:dashed;border-width:
1 piksel, 1 piksel, 1 piksel, 1 piksel;">
teks<BR> teks<BR>
Teks<BR>
Teks<BR>
Kata
<BR>
<BR>
</DIV>
</TD>
< TD WIDTH="14" VALIGN="TOP"><IMG SRC="photo/up0605.gif" WIDTH="14" HEIGHT ="20" onmouseover="scroll(-1)" onmouseout="scroll(0) " onmousedown="scroll (-3)" BORDER="0" ALT="Menekan mouse akan membuatnya lebih cepat! "></TD>
</TR>
<TR>
< TD WIDTH="14" VALIGN="BOTTOM"><IMG SRC="photo/down0605.gif" onmouseover ="scroll(1)" onmouseout="scroll(0)" onmousedown="scroll(3)" BORDER= "0" WIDTH ="15" HEIGHT="21" ALT="Tekan mouse ke bawah untuk membuatnya lebih cepat!"></TD>
</TR>
</TABLE>
Kode berikut dapat mengimplementasikan tinggi adaptif IFrame, yaitu secara otomatis menyesuaikan dengan panjang halaman untuk menghindari munculnya bilah gulir pada halaman dan IFrame secara bersamaan.
Kode sumbernya adalah sebagai berikut
<script type="text/javascript">
//** iframe secara otomatis beradaptasi dengan halaman**//
//Masukkan daftar nama iframe yang ingin Anda atur ketinggiannya secara otomatis sesuai dengan tinggi halaman
//Pisahkan ID setiap iframe dengan koma. Misalnya: ["myframe1", "myframe2"], hanya boleh ada satu form, jadi tidak perlu koma.
//Tentukan ID iframe
var iframeids=["test"]
//Jika browser pengguna tidak mendukung iframe, apakah akan menyembunyikan iframe, ya berarti disembunyikan, tidak berarti tidak disembunyikan
var iframehide="ya"
fungsi dyniframesize()
{
var dyniframe=Array baru()
untuk (i=0; i<iframeids.length; i++)
{
jika (dokumen.getElementById)
{
//Secara otomatis menyesuaikan ketinggian iframe
dyniframe[dyniframe.length] = document.getElementById(iframeids);
jika (dyniframe && !window.opera)
{
dyniframe.style.display="blok"
if (dyniframe.contentDocument && dyniframe.contentDocument.body.offsetHeight) //Jika browser pengguna adalah NetScape
dyniframe.height = dyniframe.contentDocument.body.offsetHeight;
else if (dyniframe.Document && dyniframe.Document.body.scrollHeight) //Jika browser pengguna adalah IE
dyniframe.height = dyniframe.Document.body.scrollHeight;
}
}
//Menurut parameter yang ditetapkan, tangani masalah tampilan browser yang tidak mendukung iframe
if ((document.all || document.getElementById) && iframehide=="no")
{
var tempobj=document.all? document.all[iframeids] : document.getElementById(iframeids)
tempobj.style.display="blok"
}
}
}
if (jendela.addEventListener)
window.addEventListener("memuat", ukuran dyniframe, salah)
else if (window.attachEvent)
window.attachEvent("onload", ukuran dyniframe)
kalau tidak
window.onload=dyniframesize
</script>
URL lain dengan nilai referensi:
http://www.webshu.com/tutorial/tor/7,id=0408.htm //Penggunaan iframe yang tertanam di halaman web
http://www.phpx.com/man/dhtmlcn/objects/IFRAME.html //objek IFRAME
http://www.hoyo.idv.tw/web-program/html/iframe.htm //bingkai sebaris iframe