Beranda>Tutorial Desain Web>Standardisasi WEB

Halaman bingkai iframe mengimplementasikan solusi tinggi adaptif

Penulis：Eve Cole Waktu Pembaruan：2025-02-05 14:05:58

Seringkali ada halaman orang tua yang perlu tertanam di subhalaman lain melalui iframe, dan menyesuaikan ketinggian iframe di halaman induk secara tepat waktu berdasarkan ketinggian halaman anak. Gagasan adaptif relatif sederhana: tinggi iframe di halaman induk harus disesuaikan sesuai dengan ketinggian halaman anak secara tepat waktu. Karena operasi JS terlibat, solusi adaptif dari nama domain yang berbeda berbeda, terutama untuk menyelesaikan masalah cross -domain.

Untuk tinggi adaptif di bawah nama domain induk yang sama: www.chinaz.com/index.html halaman tertanam di www.chinaz.com/xxx.html halaman

1.0 http://jipiao.taobao.com/index.htm Kode Kunci

<iframe id = "j_selfadaPting" src = "http://www.chinaz.com/xxx.htm" mce_src = "http://www.chinaz.com/xxx.htm" frameborder = "0" scrolling = "non "style =" height: 0; "> </iframe>

Halaman ditambahkan sebagai berikut JS:

<mce: script type = "text/javascript"> <!-
(fungsi(){
/**
* Dapatkan domain saat ini
**/
Fungsi _getDomain () {
var _hostname = window.location.hostname.toString ();
var _hosts = _hostname.split (".");
var _len = _hosts.length;
if (_len> 2) {{
Return _hosts [_len-2]+"."+_ Host [_len-1];
}
Return_hostname;
}
document.domain = _getDomain ();
}) ();
// -> </mce: script>

2. Kode berikut tertanam dalam sub -halaman http://www.chinaz.com/xxx.htm. Ke


<mce: script type = "text/javascript"> <!-
(fungsi(){
/**
* Dapatkan domain saat ini
**/
Fungsi _getDomain () {
var _hostname = window.location.hostname.toString ();
var _hosts = _hostname.split (".");
var _len = _hosts.length;
if (_len> 2) {{
Return _hosts [_len-2]+"."+_ Host [_len-1];
}
Return_hostname;
}

Window.onload = function () ()
{{
// Atur domain halaman anak
document.ndsain = _getDomain ();
fungsi _setheight ()
{{
if (window.parent! = window)
{{
mencoba
{{
// Atur ketinggian iframe orangtua -
parent.document.geteLementById ("j_selfadaPting"). style.height = document.body.scrollheight+ 'px';
}
Tangkap (E)
{{
}
}
// Siapkan setiap 2s, terutama untuk mengubah ketinggian setelah pemuatan halaman halaman
setTimeout (_setheight, 2000);
}
// Setelah memuat sub -halaman, sebut saja sekali
_SetHeight ();
}
}) ();
// -> </mce: script>

Halaman tingkat induk yang berbeda, seperti www.chinaz.com, book.chinaz.com Nama domain sangat berbeda. htm 1. Kode Kunci pada Kode Kunci di 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 = "no "style =" height: 0; "> </iframe>

Tambahkan sebagai berikut JS:


  1. <mce: script type = "text/javascript" > <!-

  2. ( Fungsi () {)

  3. /**

  4. * Dapatkan domain saat ini

  5. **/

  6. Fungsi _getDomain () {

  7. var _hostname = window.location.hostname.toString ();

  8. var _hosts = _hostname.split ( "." );

  9. var _len = _hosts.length;

  10. if (_len> 2) {{

  11. Return _hosts [_len-2] + "."

  12. }

  13. Return_hostname ;

  14. }

  15. document.domain = _getDomain ();

  16. }) ();

  17. // -> </mce: script>

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


<iframe scrolling = "no" frameborder = "0" style = "display: none;" mce_style = "display: none;" http://www.chinaz.com/proxy.htm#597 "id =" taobaoiframe ">
</iframe>


<mce: script type = "text/javascript"> <!-
(fungsi(){
var pageHeight = document.body.scrollheight;
document.geteLementById ('taobaoiframe').
}) ();
// -> </mce: script>

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


<!
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "konten tipe" content = "text /html; charset = gbk" />
</head>
<body>
<mce: script type = "text/javascript"> <!-
(fungsi(){
/**
* Dapatkan domain saat ini
**/
Fungsi _getDomain () {
var _hostname = window.location.hostname.toString ();
var _hosts = _hostname.split (".");
var _len = _hosts.length;
if (_len> 2) {{
Return _hosts [_len-2]+"."+_ Host [_len-1];
}
Return_hostname;
}
document.domain = _getDomain ();
var height = window.location.hash.substring (1);
mencoba{
var = window.top.document.getElementById ('j_selfAdapting');
if (el) {{
el.style.head = tinggi + 'px';
}
}
catch (e) {}
}) ();
// -> </mce: script>
</body>
</html>

Artikel Terkait