Ide pintar lain untuk mewujudkan ketinggian kemampuan beradaptasi dari iframe windows

Penulis：Eve Cole Waktu Pembaruan：2025-02-23 11:32:01

Ada halaman index.html di domaina, yang menyarangkan halaman lainnya.html di domainb melalui iframe

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

Karena keterbatasan JavaScript kebijakan asal-kata, operasi lintas domain tidak dapat dilakukan, membuat masalah lebih sulit

Saya telah merujuk pada praktik online dan memperkenalkan halaman agen, atau agen.html, milik Domaina

Kemudian, di Other.html di domainb, gunakan iframe ke sarang agen.html

Oke, sekarang situasinya adalah:

index.html bersarang Other.html menggunakan iframe

Other.htmlnest Agent.html menggunakan iframe

Alasan mengapa agen halaman ketiga.html adalah untuk mematuhi aturan "kebijakan asal-kata" dan melengkapi lewat parameter di bawah domain yang berbeda!

Tujuan utama kami adalah menghapus scrollbar dan memastikan bahwa semua konten halaman tertanam ditampilkan

1. Dapatkan ketinggian yang sebenarnya dari halaman lain.html

2. Setel tinggi ke properti SRC dari iframe yang tertanam

3. Dalam Agen.html, potong nilai ketinggian dalam atribut SRC dari iframe.

Dalam contoh berikut, trik digunakan untuk menghindari penggunaan setInterval () untuk terus mengatur ketinggian iframe.

Metode ini adalah untuk memasang cap waktu ke SRC iframe, sehingga browser memuat kembali agen.html setiap saat

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

2 html di domaina

index.html

Salinan kode adalah sebagai berikut:

#{extends 'main.html' /}

#{set judul: 'home' /}

<Hr>

<Div style = "Color: Red; Font-Weight: Bold"> Window Adaptation-Bypass Keterbatasan kebijakan homolog, dan pada saat yang sama menggunakan kebijakan homolog untuk menghapus scrollbar iframe, secara dinamis menyesuaikan ketinggian jendela , sehingga dapat menampilkan semua konten halaman bersarang </div>

<!-iframe yang membutuhkan penyesuaian tinggi dinamis->

</div>

fungsi mengubah ukuran (tinggi) {

// peringatan ("mengubah ukuran");

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

}

</script>

agen.html

Salinan kode adalah sebagai berikut:

<! Doctype html>

<Html>

<head>

<title> masukkan judul di sini </iteme>

</head>

<body>

Saya halaman proxy!

window.onload = InvokeTeThodIntopWindow;

fungsi InvokeTeTodIntOpWindow () {

// peringatan ("Panggil fungsi di bawah domain yang sama dan setel ulang ketinggian iframe");

var domaina = document.parentwindow;

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

// Langkah Terakhir: Panggil fungsi jendela paling atas untuk mengatur ulang ketinggian iframe

parent.parent.resize (realheight);

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

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

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

//alert(document.parentwindow.parent.parent.name);// Jendela tingkat atas milik Domaina, sehingga dapat diakses

}

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

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

</script>

</body>

</html>

Other.html di domainb

Salinan kode adalah sebagai berikut:

<! Doctype html>

<Html>

<head>

<title> masukkan judul di sini </iteme>

</head>

<!-halaman tertanam di domain a->

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

Dalam JavaScript, ada batasan keamanan yang sangat penting yang disebut "kebijakan asal-kata".

Strategi ini menempatkan pembatasan penting pada konten halaman yang dapat diakses oleh kode JavaScript, yaitu, JavaScript hanya dapat mengakses konten di bawah domain yang sama dengan dokumen yang mengandungnya.