Metode implementasi adaptif tinggi jendela iframe

Penulis：Eve Cole Waktu Pembaruan：2025-02-22 14:16:01

Ada halaman di domaina index.html, bersarang dengan lainnya.html di halaman di domainb melalui iframe

Karena halaman lainnya.html ditampilkan di IFRAME, dan konten halaman akan meningkat atau berkurang secara dinamis, sekarang iframe rolling bar perlu dihapus

Karena keterbatasan strategi homolog JavaScript, operasi cross -domain tidak dapat dilakukan, yang membuat masalah lebih sulit

Lihat pendekatan internet, perkenalkan halaman agensi, atau agen.html, yang termasuk dalam domaina

Kemudian, di yang lain.html di domainb, lalu gunakan iframe ke nested agent.html untuk bersarang

Oke, ini masalahnya sekarang:

Index.html menggunakan iframe bersarang lainnya.html

Other.html menggunakan iframe nesting agent.html

Alasan untuk memperkenalkan agen halaman ke -3.html adalah untuk mematuhi aturan "strategi homogen" dan menyelesaikan transfer parameter di bawah domain yang berbeda!

Tujuan utama kami adalah untuk menghapus rolling bar, dan untuk memastikan bahwa semua isi halaman tertanam ditampilkan

1. Ketinggian sebenarnya dari ketinggian sebenarnya dari halaman lain.html

2. Tetapkan tinggi pada properti SRC dari iframe di tertanamnya

3. Interture Nilai tinggi dalam atribut src dari iframe di agen.html

Dalam contoh berikut, suatu teknik digunakan untuk menghindari penggunaan setInterval () untuk terus -menerus mengatur ketinggian iframe

Metode ini adalah menambahkan cap waktu pada SRC iframe, memungkinkan browser untuk memuat ulang agen.html setiap saat

Kemudian biarkan fungsi JS di agen.hml InvokeTeThodIntopWindow () dieksekusi

2 html di domaina

index.html

Salin kode kode sebagai berikut:

#{Extends 'main.html' /}

#{Set judul: 'home' /}

<Hr>

<Div style = "Color: Red; font-weight: Bold"> 窗口自适应 --- 绕开同源策略的限制，同时又利用同源策略，去掉 iframe 的滚动条，动态调整窗口的高度，让Itu dapat menampilkan semua isi halaman bersarang </div>

<!-Anda perlu menyesuaikan secara dinamis ketinggian iframe->

</div>

Fungsi mengubah ukuran (tinggi) {

// peringatan ("mengubah ukuran");

document.getElementsbyname ("domainb") [0] .height = tinggi;

}

</script>

agen.html

Salin kode kode sebagai berikut:

<Html>

<head>

<title> masukkan judul di sini </iteme>

</head>

<body>

Saya adalah halaman proxy!

Window.onload = InvokeTeThodIntopWindow;

fungsi InvokeTeTodIntOpWindow () {) {

// Peringatan ("Panggil fungsi dalam domain yang sama, setel ulang ketinggian iframe");

var domain = document.parentwindow;

var realheight = domaina.location.hash.split ("#") [1];

// Langkah Terakhir: Panggil fungsi jendela lapisan atas dan setel ulang ketinggian iframe

Parent.parent.resize (realheight);

// alert ("RealHeight:"+RealHeight);

// alert (document.parentwindow.name); // Dapatkan nama jendela di mana wadah terletak domaina

// error: // alert (document.parentwindow.parent.name);

// alert (document.parentwindow.parent.parent.name); // lapisan atas jendela milik Domaina, sehingga Anda dapat mengunjunginya

}

// Setelah mengatur atribut SRC iframe dengan cap waktu yang berbeda, tidak perlu menggunakan setInterval ()

// setInterval ("InvokeTeThodIntopWindow ()", 100);

</script>

</body>

</html>

Other.html di domainb

Salin kode kode sebagai berikut:

<Html>

<head>

<title> masukkan judul di sini </iteme>

</head>

<!-halaman tertanam dalam domain->

<Tombol Type = "Tombol" OnClick = "btnclick ()"> switch display </button>