Ukuran adaptif iframe

Domain A.html milik halaman utama A: www.taobao.com

Domain B yang menjadi milik Halaman B.html iframed: www.alimama.com, Asumsi Alamat: http://www.alimama.com/b.html

Halaman di bawah nama domain A.html tertanam di halaman b.html di bawah nama domain B b melalui iframe. Karena lebar dan tinggi B.html tidak dapat diprediksi dan akan berubah, ukuran adaptif iframe di A.html diperlukan.

Masalah akses iframe silang JS, karena untuk mengontrol tinggi dan lebar iframe di A.html, Anda harus terlebih dahulu membaca ukuran b.html. A dan B bukan milik domain yang sama. Untuk alasan keamanan, browser membatasi akses lintas domain ke JS dan tidak dapat membaca tinggi dan lebar B.html.

Halaman proxy proxy c.html milik domain yang sama A dan A.html. C.html adalah halaman proxy menengah yang disediakan di bawah domain a. Asumsikan bahwa alamat C.html adalah: www.taobao.com/c.html, yang bertanggung jawab untuk membaca nilai lebar dan tinggi di lokasi. Hancurkan, dan kemudian mengatur lebar dan tinggi iframe di A.html di bawah domain yang sama seperti itu.

Kode A.html

Pertama, B.html diperkenalkan melalui iframe di A.html

<iframe id = b_iframe tinggi = 0 ′ lebar = 0 ′ src = http: //www.alimama.com/b.html frameborder = tidak ada batas = 0px marginwidth = 0 ′ marginheight = 0 ′ scrolling = tidak ada izin transparency = yes> </iframe>

b.html kode

<type skrip = teks/javascript>

var b_width = math.max (document.documentelement.clientwidth, document.body.clientwidth);

var b_height = math.max (document.documentelement.clientHeight, document.body.clientHeight);

var c_iframe = document.getElementById (c_iframe);

c_iframe.src = c_iframe.src+#+b_width+|+b_height; //http://www.taobao.com/c.html#width| height

}

</script>

<!-Js membaca lebar dan tinggi B.html, dan menetapkan lebar dan ketinggian bacaan ke halaman proxy tengah C.html dalam domain yang sama, dan menetapkan lebar dan tinggi bacaan ke hash SRC C.html->

<iframe id = c_iframe tinggi = 0 ′ width = 0 ′ src = http: //www.taobao.com/c.html style = Tampilan: Tidak Ada> </iframe>

Kode C.html

<type skrip = teks/javascript>

var b_iframe = parent.parent.document.geteLementById (b_iframe);

var hash_url = window.location.hash;

var hash_width = hash_url.split (#) [1] .split (|) [0]+px;

var hash_height = hash_url.split (#) [1] .split (|) [1]+px;

b_iframe.style.width = hash_width;

b_iframe.style.height = hash_height;

</script>

Iframe di A.html dapat beradaptasi dengan lebar dan tinggi B.html.

Masalah operasi lintas domain lainnya yang mirip dengan JS juga dapat diselesaikan sesuai dengan ide ini