Beranda>Tutorial Desain Web>Standardisasi WEB

implementasi halaman bingkai iframe solusi ketinggian adaptif

Penulis：Eve Cole Waktu Pembaruan：2010-01-06 17:05:40

Seringkali halaman induk perlu menyematkan subhalaman lain melalui iframe, dan tinggi iframe di halaman induk harus disesuaikan secara tepat waktu sesuai dengan tinggi subhalaman, yang mengharuskan halaman tersebut memiliki fungsi adaptif. Ide adaptifnya relatif sederhana: tinggi iframe di halaman induk harus disesuaikan waktunya sesuai dengan tinggi halaman anak. Karena operasi js terlibat, solusi adaptif untuk nama domain yang berbeda juga berbeda, terutama untuk menyelesaikan masalah lintas domain.

Untuk ketinggian adaptif dengan nama domain induk yang sama: halaman www.chinaz.com/index.html menyematkan halaman www.chinaz.com/xxx.html

1.0 Kode kunci di http://jipiao.taobao.com/index.htm

<iframe id="J_selfAdapting" src="http://www.chinaz.com/xxx.htm" mce_src="http://www.chinaz.com/xxx.htm" frameborder="0" scrolling="tidak " style="tinggi:0;"></iframe>

Tambahkan JS berikut ke halaman:

<mce:script type="teks/javascript"><!--
(fungsi(){
/**
* Dapatkan domain saat ini
**/
fungsi _getDomain(){
var _namahost = jendela.lokasi.namahost.toString();
var _hosts = _hostname.split(".");
var _len = _hosts.panjang;
jika(_len>2){
kembalikan _hosts[_len-2]+"."+_hosts[_len-1];
}
kembalikan _nama host;
}
dokumen.domain = _getDomain();
})();
// --></mce:skrip>

2. Tanamkan kode berikut pada subhalaman http://www.chinaz.com/xxx.htm. Itu saja


<mce:script type="teks/javascript"><!--
(fungsi(){
/**
* Dapatkan domain saat ini
**/
fungsi _getDomain(){
var _namahost = jendela.lokasi.namahost.toString();
var _hosts = _hostname.split(".");
var _len = _hosts.panjang;
jika(_len>2){
kembalikan _hosts[_len-2]+"."+_hosts[_len-1];
}
kembalikan _nama host;
}

jendela.onload = fungsi()
{
//Setel domain subhalaman
dokumen.domain=_getDomain();
fungsi_setTinggi()
{
if (jendela.induk!= jendela)
{
mencoba
{
//Setel tinggi iframe induk
parent.document.getElementById("J_selfAdapting").style.height = document.body.scrollHeight+ 'px';
}
menangkap(e)
{
}
}
//Atur setiap 2 detik, terutama agar kompatibel dengan perubahan ketinggian setelah subhalaman dimuat.
setTimeout(_setHeight,2000);
}
//Dipanggil satu kali setelah subhalaman dimuat
_setTinggi();
}
})();
// --></mce:skrip>

Halaman induk yang berbeda, seperti www.chinaz.com, book.chinaz.com memiliki nama domain yang sangat berbeda. Solusinya adalah dengan menggunakan halaman proxy www.chinaz.com/proxy.htm halaman www.chinaz.com/index.htm. untuk menyematkan buku .chinaz.com/xxxx.htm, dan xxx.htm perlu menyembunyikan dan menyematkan www.chinaz.com/proxy.htm sebagai proxy. Anda dapat menulis tingginya di akhir www.chinaz.com/proxy .htm#500 , yang berarti tinggi 500 piksel.

1. Kode kunci di halaman www.chinaz.com/index.htm:


<iframe id="J_selfAdapting" src="http://www.chinaz.com/xxxx.htm" mce_src="http://www.chinaz.com/xxxx.htm" frameborder="0" scrolling="tidak " style="tinggi:0;"></iframe>

Tambahkan JS berikut:


  1. <mce:script type= "teks/javascript" ><!--
  2. ( fungsi (){
  3.      /**
  4. * Dapatkan domain saat ini
  5. **/   
  6.      fungsi _getDomain(){
  7.          var _namahost = jendela.lokasi.namahost.toString();
  8.          var _hosts = _namahost.split( "." );
  9.          var _len = _hosts.panjang;
  10.          jika (_len>2){
  11.              kembalikan _hosts[_len-2]+ "." +_hosts[_len-1];
  12. }
  13.          kembalikan _nama host;
  14. }
  15. dokumen.domain = _getDomain();
  16. })();
  17. // --></mce:skrip>

2. Kode kunci di www.chinaz.com/xxxx.htm:


<iframe bergulir = "tidak" frameborder = "0" style = "tampilan: tidak ada;" mce_style = "tampilan: tidak ada;" src = "http://www.chinaz.com/proxy.htm#597" mce_src = http://www.chinaz.com/proxy.htm#597" id="taobaoIframe">
</iframe>


<mce:script type="teks/javascript"><!--
(fungsi(){
var pageHeight = dokumen.body.scrollHeight;
document.getElementById('taobaoIframe').src = 'http://www.chinaz.com/proxy.htm#' + pageHeight;
})();
// --></mce:skrip>

3. Semua kode di halaman proxy book.chinaz.com/proxy.htm adalah sebagai berikut:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<kepala>
<meta http-equiv="Jenis Konten" content="teks/html; charset=GBK" />
</kepala>
<tubuh>
<mce:script type="teks/javascript"><!--
(fungsi(){
/**
* Dapatkan domain saat ini
**/
fungsi _getDomain(){
var _namahost = jendela.lokasi.namahost.toString();
var _hosts = _hostname.split(".");
var _len = _hosts.panjang;
jika(_len>2){
kembalikan _hosts[_len-2]+"."+_hosts[_len-1];
}
kembalikan _nama host;
}
dokumen.domain = _getDomain();
var tinggi = jendela.lokasi.hash.substring(1);
mencoba{
var el = window.top.document.getElementById('J_selfAdapting');
jika(el) {
el.style.height = tinggi + 'px';
}
}
tangkap (e) {}
})();
// --></mce:skrip>
</tubuh>
</html>

Artikel Terkait