Koleksi ringkasan penggunaan iframe HTML_HTML/Xhtml_Pengeluaran halaman web

Analisis penggunaan Iframe
<iframe frameborder=0 lebar=170 tinggi=100 marginheight=0 marginwidth=0 menatal=tiada src="move-ad.htm"></iframe> Digunakan untuk menetapkan bingkai atau bekas terapung untuk teks atau grafik.
BORDER
<IFRAME BORDER="3"></IFRAME>
Tetapkan lebar tepi di sekeliling bingkai
FRAMEBODER
<IFRAME FRAMEBODER="0"> ;< ; ;/IFRAME>
Tetapkan sama ada jidar adalah 3 dimensi (0=tidak, 1=ya)
TINGGI,LEBAR
<TINGGI IFRAME="31" LEBAR="88"> /IFRAME>
Tetapkan lebar dan tinggi jidar
MENTALKAN
<IFRAME SCROLLING="NO"></IFRAME>
Sama ada bar skrol AUTO )
SRC
<IFRAME SRC="GIRL.GIF"></IFRAME>
Nyatakan fail atau imej yang dipanggil oleh IFRAME (HTML, HTM, GIF, JPEG, JPG, PNG, TXT, *.*)
Kesan "Picture-in-picture"--membincangkan penggunaan tag IFRAME
Melihat laman web hari ini, kelajuan Internet agak perlahan, tetapi hampir setiap halaman perlu meletakkan beberapa sepanduk , gambar lajur, hak cipta, dll. Sudah tentu, tidak ada yang salah dengan banyak perkara yang serupa kerana keperluan untuk gaya laman web yang bersatu dan kesan pengiklanan, tetapi selepas semua, dompet pengguna semakin kehabisan wang oleh "perhiasan ini" " perkara. Adakah terdapat apa-apa cara untuk menjadikannya mungkin? Selepas memuat turun perkara serupa ini sekali, tidak perlu memuat turunnya semula, tetapi hanya kandungan halaman web dengan kawasan kandungan yang diubah itu dimuat turun?
Jawapannya pasti: gunakan tag Iframe!
1. Penggunaan tag Iframe
Apabila bercakap tentang Iframe, anda mungkin telah membuangnya ke "sudut yang terlupa", tetapi apabila ia berkaitan dengan saudaranya Frame, anda tidak akan asing. Tag bingkai ialah tag bingkai Apa yang kami panggil struktur berbilang bingkai adalah untuk memaparkan berbilang fail HTML dalam tetingkap penyemak imbas. Sekarang, kita menghadapi situasi yang sangat realistik: jika terdapat tutorial, ia dibahagikan kepada bahagian satu demi satu Pada akhir setiap halaman, terdapat pautan ke "bahagian sebelumnya" dan "bahagian seterusnya", kecuali kandungannya. setiap tutorial adalah berbeza. Tambahan pula, kandungan bahagian lain halaman adalah sama Nampaknya terlalu membosankan untuk membuat halaman demi halaman yang bodoh daripada halaman tidak berubah, cuma buat tutorial Ia menjadi halaman kandungan halaman demi halaman, tanpa kandungan lain Apabila mengklik pautan atas dan bawah halaman, hanya bahagian kandungan tutorial akan ditukar, dan bahagian lain akan kekal tidak berubah. Dengan cara ini, satu menjimatkan masa, dan satu lagi ialah jika tutorial mempunyai tiga perubahan panjang dan dua pendek pada masa hadapan, juga sangat mudah, dan tidak akan menjejaskan seluruh tentera yang lebih penting, sepanduk pengiklanan, senarai lajur, navigasi dan perkara lain yang disertakan dalam hampir setiap halaman hanya dimuat turun sekali dan kemudian tidak lagi dimuat turun. Teg Iframe, juga dipanggil teg bingkai terapung, anda boleh menggunakannya untuk membenamkan dokumen HTML dalam paparan HTML. Ciri terbesar yang berbeza daripada teg Frame ialah fail HTML yang dirujuk oleh teg ini tidak dipaparkan secara berasingan daripada fail HTML lain, tetapi boleh dibenamkan terus dalam fail HTML dan disepadukan dengan kandungan fail HTML untuk menjadi keseluruhan. . Selain itu, , anda juga boleh memaparkan kandungan yang sama beberapa kali pada halaman tanpa perlu menulis kandungan berulang kali Metafora yang jelas ialah TV "gambar-dalam-gambar".
Sekarang mari kita bincangkan tentang penggunaan teg Iframe. Format
teg Iframe ialah:

Salin kodKodnya adalah seperti berikut:

<Iframe src="URL" width="x" height="x" scrolling="[OPTION]" frameborder="x"></iframe> 🎜>src: fail Laluan boleh berupa fail HTML, teks, ASP, dsb.;
lebar, tinggi: lebar dan tinggi kawasan
menatal: apabila ditentukan Fail HTML SRC berada dalam kawasan yang ditentukan Apabila pilihan tatal tidak dipaparkan atau selesai, jika ia ditetapkan kepada TIDAK, bar tatal tidak akan muncul jika ia adalah Auto: bar tatal akan muncul secara automatik; ia akan dipaparkan;

FrameBorder: lebar sempadan kawasan, untuk membuat " Picture-in-picture "Bercantum dengan kandungan bersebelahan, biasanya ditetapkan kepada 0."
Contohnya:





Salin kod

Kod tersebut adalah seperti berikut: <Iframe src ="http://www.jb51.net";; width="250" height="200" scrolling="no" frameborder="0"></iframe> >
2. Kawalan bersama antara bentuk induk dan bingkai terapung Dalam bahasa skrip dan hierarki objek, tetingkap yang mengandungi Iframe dipanggil bentuk induk, manakala bingkai terapung dipanggil bentuk anak perhubungan adalah penting kerana untuk mengakses borang anak dalam bentuk induk atau sebaliknya, anda mesti mengetahui hierarki objek sebelum anda boleh mengakses dan mengawal borang tersebut secara pemrograman.
1. Akses dan kawal objek dalam subborang dalam bentuk induk
Dalam borang induk, Iframe atau subborang, ialah objek anak bagi objek dokumen dan anda boleh mengakses subborang secara langsung dalam skrip. objek dalam.
Sekarang timbul persoalan, iaitu bagaimana kita mengawal Iframe ini Di sini kita perlu bercakap tentang objek Iframe. Apabila kami menetapkan atribut ID kepada teg ini, kami boleh melakukan satu siri kawalan pada HTML yang terkandung dalam Iframe melalui DOM Model Objek Dokumen.
Sebagai contoh, benamkan fail test.htm dalam example.htm dan kawal beberapa objek teg dalam test.htm:

Salin kod

Kodnya adalah seperti berikut:

<Iframe src="test.htm" id="test" width="250" height="200" scrolling="no" frameborder="0 "></iframe>
kod fail test.htm ialah:
<html><body>
<h1 id="myH1">hello ,anak saya< /h1>
</body>
</html> , sayangku, ia boleh digunakan :
document.myH1.innerText="hello,my dear" (dokumen boleh ditinggalkan)
Dalam fail example.htm, subbentuk yang ditunjuk oleh objek teg Iframe ialah konsisten dengan model objek DHTML umum Kaedah kawalan akses objek adalah sama dan tidak akan diterangkan lagi.

2. Akses dan kawal objek dalam bentuk induk dalam subborang
Dalam subborang, kita boleh mengakses objek dalam tetingkap induk melalui objek induknya (induk).
Seperti contoh.htm:





Salin kod

Kodnya adalah seperti berikut: &lt ;html>

<body onclick="alert(tt.myH1.innerHTML)">

<Iframe name="tt" src="frame1.htm" width="250" height="200 " scrolling="no" frameborder="0"></iframe>

<h1 id="myH2">hello, my wife</h1> ;
</html>


Jika kita ingin mengakses teks tajuk dalam frame1.htm dengan nombor ID myH2 dan menukarnya kepada "hello, kawan saya", kita boleh menulis seperti ini :
parent.myH2.innerText="hello,my friend"
Objek induk di sini mewakili bentuk semasa (borang di mana example.htm terletak Anda perlu mengakses objek dalam borang induk dalam bentuk anak, tanpa pengecualian Semua dilakukan melalui objek induk.
Walaupun Iframe dibenamkan dalam fail HTML lain, ia kekal secara relatifnya bebas dan merupakan "kerajaan bebas". Ciri-ciri dalam satu HTML juga digunakan pada bingkai terapung.

Bayangkan sahaja, melalui tag Iframe, kita boleh menyatakan kandungan yang tidak berubah sebagai Iframe Dengan cara ini, kita tidak perlu menulis kandungan yang sama berulang kali Ini adalah sedikit seperti proses atau fungsi dalam pengaturcaraan banyak kerja manual yang membosankan! Di samping itu, dan yang penting, ia menjadikan pengubahsuaian halaman lebih boleh dilaksanakan, kerana daripada perlu mengubah suai setiap halaman untuk melaraskan reka letak, anda hanya perlu mengubah suai reka letak satu borang induk.
Satu perkara yang perlu diperhatikan ialah penyemak imbas Nestscape tidak menyokong teg Iframe, tetapi dalam dunia IE hari ini, ini nampaknya tidak menjadi masalah besar teg Iframe digunakan secara meluas, bukan sahaja untuk kepentingan mereka sendiri ( laman web), tetapi juga untuk netizen untuk menjimatkan wang yuran Internet, mengapa tidak?
Contoh





Salin kod

Kodnya adalah seperti berikut: < iframe src= "Page" width="width" height="height" align="Susunan boleh kiri atau kanan, tengah" scrolling="Jika terdapat bar skrol, isikan tidak atau ya" ></ iframe> < IFRAME frameBorder=0 frameSpacing=0 tinggi=25 marginHeight=0 marginWidth=0 scrolling=no name=main src="bgm/bgm.html" width=300></IFRAME>

2 :::::::::::::::::::::::::::::::::::::::::: ::::::::::::::::::::::::::::::::::::::::::::::::: ::::::::::::::::::::::::::::::::::::::::::::::::: ::::::::::::::::::::::::::::::::

Selepas menggunakan iframe, saya dapati bar skrol tidak cantik dan saya mahu menggunakan 2 gambar untuk menggantikannya ↑↓
Bagaimana ia harus dilaksanakan?
Jawapan:
Ganti

dengan kod berikut: Salin kod

Kod tersebut adalah seperti berikut :

<tajuk>..</title>
<SCRIPT LANGUAGE="javascript">
skrol fungsi(n)
{temp=n;
Out1.scrollTop=Out1.scrollTop temp;
jika (temp==0) kembali;
setTimeout("scroll(temp)",80);
}
</SCRIPT>
<LEBAR JADUAL="330">
<TR>
<TD WIDTH="304" VALIGN="TOP" ROWSPAN="2" >
<DIV ID=Out1 STYLE="width:100%; height:100;overflow: hidden ;border-style:dashed;border-width: 1px,1px,1px,1px;">
文字
文字

文字

文字

文字



</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="按下鼠标速度会更快！"></TD>
</TR>
<TR>
<TD WIDTH="14" VALIGN="BAWAH"><IMG SRC="photo/down0605.gif" onmouseover ="scroll(1)" onmouseout="scroll(0)" onmousedown="scroll (3)" BORDER="0" WIDTH ="15" HEIGHT="21" ALT="按下鼠标速度会更快！"></TD>
</TR>
</JADUAL>

内框架Iframe的使用
使用Iframe可以在一人表格内调用一个外部文仞，用用文仞，用用文件，可是了在很多页面上都使用了iframe效果。
现在我们学一下Iframe标记的使用。
Iframe标记的使用格式是:

<Iframe src="URL" width="x" height="x" scrolling="[OPTION]" frameborder="x" name="utama"></iframe> ;
src：文件的路径，既可是HTML文件，也可以是文本、ASP等；
lebar, tinggi："内部框架"内部框架"内部框城"匮当SRC的指定的HTML文件在指定的区域不显不完时，滚动选项，如果设置为NO，则不出现滚动条；亇如于一一一一一一一一一一一一一一一一一一一一一中动条；如为Ya，则显示;
Bingkai Sempadan：区域边框的宽度，为了让“内部框架“与邻近的内容相融合，常设置为0进行识别。
比如:

<Iframe src="http://s.jb51.net" width="250" height="200" scrolling="Auto" frameborder="0" name="utama"></iframe> 当你想用父框架控制内部框架时，可以使用： target="框架的名字"来控制。 IF🎜 >有没有想过除了表单(<borang>)之外还有其它的网页元素可以编辑文字呢？只要使用IFrame的隐藏的一个属性就个属性就只中编辑器。 <html> <body onload="editer.document.designMode='On'"> <IFrame ID="editer"></IFrame> </badan> </html> 其中designMode属性表示IFrame的设计模式的状态（开/关），还在犹豫什么呢，快试！寕厦试！寕厦用这一特性就可以制作很多意想不到的效果。如果下面我们来做一个图片编辑器。 <html> <body onload="imgEditer.document.designMode='On';imgEditer.document.write('<img src=图片.gif>')"> <IFrame id="imgEditer"></IFrame> </badan> </html>
Berikut adalah beberapa tambahan lagi:
<iframe> ialah satu bentuk bingkai dan juga biasa digunakan.
Contoh 1.
<iframe width=420 height=330 frameborder=0 scrolling=auto src=URL></iframe>
Tidak perlu dikatakan.
Lebar ialah lebar halaman yang disisipkan; ketinggian ialah ketinggian halaman yang disisipkan ialah sama ada untuk memaparkan bar skrol halaman (parameter pilihan adalah automatik, ya, tidak, jika parameter ini ditinggalkan, lalai adalah automatik; ); saiz sempadan bingkai;
Nota: Adalah disyorkan untuk menggunakan laluan mutlak untuk URL
Legend mempunyainya: <iframe width=0 height=0 frameborder=0 scrolling=auto src=http://WWW. jb51.net></iframe>
Dihitamkan 88*8. . .
Contoh 2.
Jika terdapat bingkai dalam halaman. . Cuma klik pada pautan pada halaman dan minta untuk membukanya dalam <iframe> ini. Tambahkan nama=** pada iframe (**Tetapkan sendiri)
<nama iframe=** ></iframe>
Kemudian ubah suai mod pembukaan lalai: Tambahkan < href=URL target=**>atau bingkai sasaran pautan separa ditetapkan kepada (**)
　Contoh 3.
Untuk memasukkan halaman. Minta ambil bahagian tengah sahaja. Tidak mahu apa-apa lagi. ,. .
　Kod:
<iframe name=123 align=middle marginwidth=0 marginheight=0 vspace=-170 hspace=0 src="http://www.jb51.net/" frameborder=no scrolling=no lebar=776 tinggi=2500></iframe>
Kawal kedalaman halaman yang diselitkan oleh bingkai marginwidth=0 marginheight=0; > Sama ada hendak menatal bar skrol ( auto, ya, tidak) Saiz sempadan bingkai sempadan bingkai, lebar=776 tinggi=2500 Saiz bingkai ini.
1. Tambahkan iframe pada halaman
<iframe width=420 height=330 frameborder=0 scrolling=auto src=URL></iframe>,
scrolling menunjukkan sama ada untuk memaparkan bar skrol halaman , pilihan Parameter adalah auto, ya, dan tidak Jika parameter ini ditinggalkan, lalai adalah automatik.
2. Hiperpautan menghala ke halaman web terbenam. Hanya namakan iframe. Kaedahnya ialah <iframe name=**>, sebagai contoh, saya menamakannya aa dan menulis ayat HTML ini <iframe width=420 height=330 name=aa frameborder=0 src=http://www.cctv. com&gt ;</iframe>, maka, pernyataan hiperpautan pada halaman web hendaklah ditulis sebagai: <a href=URL target=aa>
3. Jika frameborder ditetapkan kepada 1, kesannya akan menjadi seperti a kotak teks
Penggunaan IFRAME lutsinar
Ia mesti disokong oleh IE5.5 atau lebih tinggi
Dalam teg <body> fail transparentBody.htm, saya telah menambahkan style="background-color=transparent " melalui empat IFRAME berikut saya fikir anda harus mempunyai pemahaman yang jelas tentang cara melaksanakan kesan ketelusan latar belakang iframe:
<ID IFRAME="Frame1" SRC="transparentBody.htm" allowTransparency="true">&lt ;/ IFRAME>
<IFRAME ID="Frame2" SRC="transparentBody.htm" allowTransparency="true" STYLE="background-color: green"> =" Frame3" SRC="transparentBody.htm"></IFRAME>
<IFRAME ID="Frame4" SRC="transparentBody.htm" STYLE="background-color: green"> IFRAME>
Mata 1: Gunakan javascript untuk menentukan src iframe dan muat semula iframe (lihat projek saya di bahagian bawah artikel ini)
Kesukaran 1: Tetapkan warna latar belakang iframe
a. htm
<skrip>
set fungsiBG(){
var strColor=document.bgColor
frm.document.bgColor=strColor>}
< 🎜><gaya badan=' background-color:red' onload='setBG()'>
<iframe src='about:blank' name=frm></iframe> :
Tetingkap dan bingkai terapung Kawalan bersama antara
Dalam bahasa skrip dan hierarki objek, tetingkap yang mengandungi Iframe dipanggil bentuk induk, manakala bingkai terapung dipanggil bentuk anak Adalah penting untuk menjelaskan perhubungan antara kedua-duanya, kerana Apabila mengakses subborang dalam bentuk induk atau sebaliknya, anda mesti mengetahui hierarki objek sebelum anda boleh mengakses dan mengawal borang melalui program.
1. Akses dan kawal objek dalam subborang dalam bentuk induk
Dalam borang induk, Iframe atau subform ialah objek anak bagi objek dokumen Anda boleh mengakses subborang secara langsung dalam skrip.
Sekarang ada soalan, iaitu, bagaimana kita mengawal Iframe ini Di sini kita perlu bercakap tentang objek Iframe. Apabila kami menetapkan atribut ID kepada teg ini, kami boleh melakukan satu siri kawalan pada HTML yang terkandung dalam Iframe melalui DOM Model Objek Dokumen.
Contohnya, benamkan fail test.htm dalam example.htm dan kawal beberapa objek teg dalam test.htm:
　　<Iframe src="test.htm" id="test" width="250" height="200" scrolling="no" frameborder="0"></iframe>
test.htm文件代码为:
　　<html>
　　　<body>
　　　　<h1 id="myH1">hello,my boy</h1>
　　　</body>
　　</html>
　　如我们要改变ID号为myH1的H1标记里的文字为hello,my dear，则可用:
　　document.myH1.innerText="hello,my dear"(其中，document可省)
　　在example.htm文件中，Iframe标记对象所指的子窗体与一般的DHTML对象模型一致，对对象访问控制方式一样，就不再赘述。
　　2、在子窗体中访问并控制父窗体中对象
　　在子窗体中我们可以通过其parent即父（双亲）对象来访问父窗口中的对象。
　　如example.htm：
　　<html>
　　　<body onclick="alert(tt.myH1.innerHTML)">
　　　　<Iframe name="tt" src="frame1.htm" width="250" height="200" scrolling="no" frameborder="0"></iframe>
　　　　<h1 id="myH2">hello,my wife</h1>
　　　</body>
　　</html>
　　如果要在frame1.htm中访问ID号为myH2中的标题文字并将之改为"hello,my friend"，我们就可以这样写：
　　parent.myH2.innerText="hello,my friend"
或者parent.document.getElementById("myH2").innerText="hello,my friend"
　　这里parent对象就代表当前窗体(example.htm所在窗体)，要在子窗体中访问父窗体中的对象，无一例外都通过parent对象来进行。
3:frame的一个子元素访问frame的另一个子元素
例如：框架文件frame.html中嵌入了另外两个html文件
<div styleClass="basewnd">
<!-- 搜索 -->
<div id="search" name="test" align="center" class="top_list_home">
<iframe id="frameSearch" name="search" src="Search.html" frameBorder="0" scrolling="no" width="195px" height="150px" marginheight="0" marginwidth="0"></iframe>
</div>
<!-- 单位目录树 -->
<div align="center" class="welcome_tag_home">
<iframe src="DirectoryTree.html" frameBorder="0" scrolling="no" width="195px" height="427px" marginheight="0" marginwidth="0"></iframe>
</div>
</div>
那么现在要在DirectoryTree.html文件中访问Search.html文件中的一个id为section的<font></font>标签的innerHTML属性，则可以这样：
alert(parent.document.search.section.innerHTML),
其中search是“搜索”div的id，或者：
alert(parent.document.getElementById("search").section.innerHTML),
或者也可以这样：
alert(parent.document.frames["frameSublist"].name)(这是直接访问iframe)
　　Iframe虽然内嵌在另一个HTML文件中，但它保持相对的独立，是一个“独立王国“哟，在单一HTML中的特性同样适用于浮动帧中。
　　试想一下，通过Iframe标记，我们可将那些不变的内容以Iframe来表示，这样，不必重复写相同的内容，这有点象程序设计中的过程或函数，减省了多少繁琐的手工劳动！另外，至关重要的是，它使页面的修改更为可行，因为，不必因为版式的调整而修改每个页面，你只需修改一个父窗体的版式即可了。
　　要注意的是，Nestscape6.0之前版本不支持Iframe标记。
　　例子：
1:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
<iframe src="页面" width="宽度" height="高度" align="排列可以是left或right,center" scrolling="是否有滚动条可以填no或yes"></iframe>
<IFRAME frameBorder=0 frameSpacing=0 height=25 marginHeight=0 marginWidth=0 scrolling=no name=main src="/bgm/bgm.html" width=300></IFRAME>
2:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
用了iframe后 发现滚动条不漂亮 想用2个图片来代替↑↓
应该怎么实现呢？
回答：
用下列代码替换网页的<title>..</title>
<SCRIPT LANGUAGE="javascript">
function scroll(n)
{temp=n;
Out1.scrollTop=Out1.scrollTop+temp;
if (temp==0) return;
setTimeout("scroll(temp)",80);
}
</SCRIPT>
<TABLE WIDTH="330">
<TR>
<TD WIDTH="304" VALIGN="TOP" ROWSPAN="2" >
<DIV ID=Out1 STYLE="width:100%; height:100;overflow: hidden ;border-style:dashed;border-width: 1px,1px,1px,1px;">
文字<BR> 文字<BR>
文字<BR>
文字<BR>
文字
<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="Tekan tetikus ke bawah untuk menjadikannya lebih pantas!"></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 tetikus untuk menjadikannya lebih pantas!">< / TD>
</TR> :::: :::::::::::::::::::::::::::::::::::::::::::::: :::::::::: ::
Kod berikut boleh melaksanakan ketinggian penyesuaian IFrame, iaitu, ia secara automatik menyesuaikan diri dengan panjang halaman untuk mengelakkan bar skrol muncul pada halaman dan IFrame pada masa yang sama .
Kod sumber adalah seperti berikut
<script type="text/javascript">
//**iframe secara automatik menyesuaikan diri dengan halaman **//
//Masukkan iframe yang anda mahu laraskan secara automatik ketinggian mengikut ketinggian halaman Senarai nama
//Asingkan ID setiap iframe dengan koma Contohnya: ["myframe1", "myframe2"], hanya boleh ada satu bentuk, jadi tiada koma diperlukan.
//Tentukan ID iframe
var iframeids=["test"]
//Sama ada untuk menyembunyikan iframe jika penyemak imbas pengguna tidak menyokong iframe ya bermakna tersembunyi, tidak bermakna tidak tersembunyi
var iframehide ="yes"
function dyniframesize()
{
var dyniframe=new Array()
for (i=0; i<iframeids.length; i )
{
jika (document.getElementById)
{
//Laraskan ketinggian iframe secara automatik
dyniframe[dyniframe.length] = document.getElementById(iframeids);
{
dyniframe.style.display="block"
if (dyniframe.contentDocument && dyniframe.contentDocument.body.offsetHeight) //Jika penyemak imbas pengguna ialah NetScape
dyniframe.height = dyniframe. kandunganDocument }
}
//Kendalikan masalah paparan penyemak imbas yang tidak menyokong iframe mengikut parameter yang ditetapkan
jika ((document.all || document.getElementById) && iframehide=="no")
{
var tempobj=document.all? document.all[iframeids] : document.getElementById(iframeids)
tempobj.style.display="block"
}
}
}
jika (window.addEventListener)
window.addEventListener("load", dyniframesize, false)
else if (window.attachEvent)
window.attachEvent("onload", dyniframesize)
else
window.onload=dyniframesize
</script>
HTML <iframe> Teg
Definisi dan Penggunaan
elemen iframe mencipta bingkai sebaris yang mengandungi dokumen lain.
Perbezaan antara HTML dan XHTML
TIADA
Atribut pilihan
DTD Menunjukkan di mana DTD atribut ini dibenarkan untuk digunakan. S=Tegas, T=Peralihan, F=Frameset
Perihalan nilai atribut DTD
sejajarkan kiri
kanan
atas
tengah
bawah
Menentukan cara menjajarkan berdasarkan sekeliling teks Susun bingkai ini. TF
sempadan bingkai 1
0
Menentukan sama ada untuk memaparkan sempadan bingkai. TF
piksel ketinggian
%
Tentukan ketinggian iframe. TF
URL URL longdesc yang menerangkan perihalan panjang kandungan bingkai ini. TF
pixel ketinggian margin mentakrifkan jidar atas dan bawah iframe. TF
piksel lebar margin mentakrifkan jidar kiri dan kanan iframe. TF
name frame_name menentukan nama unik untuk iframe (untuk digunakan dalam skrip). TF
menatal ya
tidak
auto
mentakrifkan bar skrol. TF
URL src memaparkan URL dokumen dalam iframe. TF
piksel lebar
%
Tentukan lebar iframe. TF
Berikut ialah sekeping kod sumber yang saya tulis menggunakan bingkai semasa pembangunan projek sebenar, untuk rujukan sahaja:
Fail utama (rangka kerja):
<html><head> ><title>Sistem Pengurusan Sumber Biro Pendidikan</title>
<script src="resources/js/DirectoryTree/DirectoryTree.js"></script> /js/date.js"></script>
<link rel="stylesheet" type="text/css" href="resources/css/frame.css">
&lt ; pautan rel="stylesheet" type="text/css" href="resources/css/global.css">
<script language="javascript">
function setBgColor()
{
var bg=document.bgColor
bottom.document.bgColor=bg
}
</script>
</head>
<body bgcolor="#f9edff" onload="setBgColor()">
<div styleClass="basewnd">
<!-- LOGO -->
<div align="center" class="flag">
<iframe src="resources/HTMLFolders/Logo.html" frameBorder="0" scrolling="no" width="950px" height="115px" marginheight="0"></iframe>
</div>
<!-- 用户登陆 -->
<div align="center" class="user">
<iframe src="resources/HTMLFolders/UserLogin.html" frameBorder="0" scrolling="no" width="195px" height="150px" marginheight="0" marginwidth="0"></iframe>
</div>
<!-- 搜索 -->
<div id="search" name="test" align="center" class="top_list_home">
<iframe id="frameSearch" name="search" src="resources/HTMLFolders/Search.html" frameBorder="0" scrolling="no" width="195px" height="150px" marginheight="0" marginwidth="0"></iframe>
</div>
<!-- 导航条 -->
<div align="center" class="navigation">
<iframe src="resources/HTMLFolders/Navigation.html" frameBorder="0" scrolling="no" width="950px" height="25px" marginheight="0" marginwidth="0"></iframe>
</div>
<!-- 最新主题列表 -->
<div align="center" class="newest_topic">
<iframe src="resources/HTMLFolders/Sublist.html" frameBorder="0" scrolling="no" width="540px" height="427px" marginheight="0" marginwidth="0"></iframe>
</div>
<!-- 单位目录树 -->
<div align="center" class="welcome_tag_home">
<iframe src="resources/HTMLFolders/DirectoryTree.html" frameBorder="0" scrolling="no" width="195px" height="427px" marginheight="0" marginwidth="0"></iframe>
</div>
<!-- 页尾 -->
<div align="center" class="rights_home">
<iframe id="bottom" name="bottom" src="resources/HTMLFolders/Bottom.html" frameBorder="0" scrolling="no" width="950px" height="100px" marginheight="0" marginwidth="0" allowTransparency="true" style="background-color: red"></iframe>
</div>
</div>
</badan>
</html>
被引用的文件UserLogin.html：
<link rel="stylesheet" type="text/css" href="../css/global.css">
<table border="0" align="left" width="193" cellpadding="1" cellspacing="0" style="border-style:solid;border-width:1px;border-color: #eeeeee;">
<tr><td>
<table border="0" align="left" width="190" cellpadding="0" cellspacing="0">
<tr>
<td align="left" valign="middle" width="20" height="25" class="tdfnt12px" background="../images/title_bar2.png" >
</td>
<td align="left" valign="bottom" height="25" class="tdfnt12px" background="../images/title_bar2.png">
<font style="height:18px;font-family:宋体;font-size:14px;"> <b>会员登录</b></font>
</td>
</tr>
</meja>
</td></tr>
</meja>
<div id="divLogin" style="visibility:visible;position:absolute;left:10px;top:30px">
<table border="0" align="left" width="193" cellpadding="1" cellspacing="0" style="border-style:solid;border-width:0px;border-color: #eeeeee;">
<tr>
<td align="left" valign="bottom" height="45"><font class="normal">用户名：</font>
<td valign="bottom"><input type="text" name="userAreaUserName" id="userAreaUserName" class="id" maxlength="16"/></td>
</tr>
<tr>
<td align="left" height="40"><font class="normal">密码：</font>
<td><input type="password" name="userAreaUserPwd" id="userAreaUserPwd" class="pwd" maxlength="16"/></td>
</tr>
<tr>
<td align="center" colspan="2" class="tdfnt12px">
<input type="submit" value="登录" style="color:black;border-color:skyblue;border-style:solid;border-width:0px;vertical-align:middle;font-family :宋体;width:68px;height:24px;background:url(resources/images/ButtonBg02.png);"/>
</td>
</tr>
</meja>
</div>
现在假设“最新主题列表”文件中有一个超链接，点击其，包含“最新主题，就是小家家家题家此时需要利用javascript来实现：
<a href="" onclick="redirect(); return false">www.baidu.com</a>
<script language="javascript">
function redirect()
{
parent.document.frames["frameSublist"].location.href="www.baidu.com"
}
</script>