Beranda>Tutorial Desain Web>Tutorial Javascript

Gunakan javascript untuk mengakses dan mengoperasikan dom di iframe

Penulis：Eve Cole Waktu Pembaruan：2009-06-11 16:22:06

Banyak orang selalu berpikir bahwa akan sangat bagus jika mereka dapat mengoperasikan iframe sesuai keinginan mereka. Dengan cara ini, halaman statis memiliki kemampuan untuk mengimplementasikan tata letak multi-halaman terpadu yang setara dengan menyertakan dan memerlukan halaman dinamis latar belakang php, jsp, dan asp.

Dengan bantuan Javascript, kita dapat secara dinamis memuat konten halaman html yang ditunjuk oleh atribut objek iframe src seperti latar belakang. Operasi tersebut memerlukan penyediaan dua halaman, satu halaman adalah halaman tempat iframe berada ( nama halaman: iPage.html ), dan halaman lainnya adalah halaman yang ditunjuk oleh atribut iframe src ( nama halaman: srcPage.html ).

iPage.html, dom di <body>:

  1. < iframe id = " iId " nama = " iNama " src = " srcPage.html " bergulir = “ tidak “ frameborder = " 0 " > </iframe> srcPage.html

,<body>

  1. di dom : <h1> Hari Kakak </h1>  
  2. < p > Sarapan pagi, kencan siang, karaoke sore, dan main-main dengan kakak di malam hari </ p >

Mari kita bahas cara mengoperasikan dua halaman di atas dengan JS di bawah IE, lalu membahas metode firefox, dan terakhir memberikan kompatibilitas dengan IE dan firefox Metode browser dalam mengoperasikan objek iframe.

1. Akses dan operasikan konten di iframe di bawah IE

 

Semua orang tahu bahwa iframe adalah tag HTML non-standar. Ini adalah tag multi-tata letak yang diluncurkan oleh browser IE. Belakangan, Mozilla juga mendukung tag ini. (Gosip, hehe)

1. IE mendapatkannya melalui document.frames["IframeName"]. Contoh: Kami menampilkan konten h1 di srcPage.html di iPage.html. JSnya adalah sebagai berikut

  1. : alert ( document .frames [ " iName " ] . document . getElementsByTagName ( ' h1 ' ) [ 0 ] . firstChild . data ) ;

Anda akan menemukan bahwa menambahkan kode ke halaman sepertinya tidak menghasilkan hal-hal yang diinginkan. Mengapa? Saya belum mengetahuinya. Saya hanya biasa menambahkan window.onload dan hasilnya akan muncul (Catatan: Kode JS ditulis ke dalam acara ini). Mengapa? Setelah perubahan, kode memiliki keluaran di bawah IE, tetapi document.frames tidak ditentukan di bawah

  1. Firefox . Pesan kesalahan : window () {  
  2.   alert ( document .frames [ " iName " ] . document .getElementsByTagName ( ' h1 ' ) [ 0 ] . firstChild . data ) } )
  3. 2. yaitu

cara lain adalah contentWindow untuk mendapatkannya, kode

  1. : window onload = ( function () {  
  2.   var iObj = dokumen.getElementById ( ' iId ' ) .​​​​
  3.   alert ( iObj .document .getElementsByTagName ( ' h1 ' ) [ 0 ] .firstChild .data ) ; } ) ;
  4. Metode ini

telah lulus pengujian ie6, ie7, firefox2.0, dan firefox3.0. hei-hei. (Setelah memeriksa secara online, saya menemukan kerentanan buffer overflow di Mozilla Firefox iframe.contentWindow.focus, yang menimbulkan risiko serangan injeksi skrip.

Belakangan saya mendengar bahwa hal ini dapat dicegah di latar belakang, dan saya merasa lega. Namun, saya masih semoga Firefox versi baru bisa mengatasinya. Bahaya seperti itu.)

3. Ubah konten

  1. judul h1 di srcPage.html , kode : iObj .getElementsByTagName ( ' h1 ' ) [ 0 ] bagian dari harinya ' ;

mengaksesnya melalui contentWindow Nodenya sama seperti sebelumnya.

2. Akses konten dalam iframe di Firefox

Mozilla mendukung standar W3C untuk mengakses objek dokumen iframe melalui IFrameElmRef.contentDocument . Melalui standar, Anda dapat menulis satu dokumen lebih sedikit, kode:

  1. var iObj = dokumen .getElementById ( ' iId ' ) .contentDocument ; waspada (
  2. iObj . getElementsByTagName ( ' h1 ' )
  3. [ 0 ] . innerHTML = ' Saya ingin menjadi bagian dari harinya ' ) ;​​​​
  4. ' ) [ 0 ] .firstChild .data ) ; Metode

yang kompatibel dengan kedua browser ini sekarang tersedia, yaitu menggunakan metode contentWindow.

hei-hei! Bisakah saya mengoperasikan iframe sesuai keinginan? Jika Anda masih merasa tidak nyaman, Anda bahkan dapat menulis ulang konten di iframe.

3. Menulis ulang konten di iframe.

Melalui designMode (mengatur dokumen ke mode desain yang dapat diedit) dan contentEditable (mengatur konten ke dapat diedit), Anda dapat menulis ulang konten di iframe. Kode:

  1. var iObj = dokumen .getElementById ( ' iId ' ) .contentEditable = benar ;
  2. dokumen​​​​​​​
  3. ​​​​​​​​
  4. ​​​​​​​​​​
  5. ​​​​​​​
  6. kepala> ' ) ;
  7. iObj . writeln ( ' <style>tubuh {latar belakang:#000;ukuran font:9pt;margin: 2px ; bantalan : 0px
  8. ; } </style> ' ) ; ' </head><body> </body> </html> '
  9. ) ; iObj .close ( ) ;

Untuk informasi tentang kedua objek ini, silakan merujuk ke: http://msdn.microsoft.com/en- us/library/ms533720(VS.85).aspx

firebug menguji kinerja kode di atas, seperti yang ditunjukkan pada gambar

Komentari iObj.document.designMode = 'On';

iObj.document.contentEditable

= true;


Efeknya tidak berubah, dan efisiensi waktu hampir tiga kali lipat dibandingkan sebelum anotasi. hei-hei. Kedua objek tersebut mengacu pada metode penulisan beberapa orang di Internet untuk menulis ulang konten di iframe, sebenarnya tidak perlu menggunakan designMode dan contentEditable kecuali ada kebutuhan lain.

4. iframe adaptive height

Dengan prinsip di atas, penerapannya cukup sederhana, cukup atur nilai tinggi iframe dengan nilai tinggi dokumen di dalamnya. Kode

  1. : window .onload = ( function () {  
  2. var   iObj = document .getElementById ( ' iId ' ) ; iObj
  3. .height = iObj . contentWindow . documentElement } ) ;​​​​
  4. ​​

​karena istilah teknis Web ini, hei, bau!

Bahan referensi:

https://developer.mozilla.org/cn/Migrate_apps_from_Internet_Explorer_to_Mozilla

http://msdn.microsoft.com/en-us/library/ms533690(VS.85).aspx

http://www.kuqin.com/ desain halaman web/20080516/8536.html

http://www.nohack.cn/jsj/safe/2006-10-05/8156.html
Artikel Terkait