Ubah Ukuran Iframe Agar Sesuai dengan Konten (Hanya Domain Yang Sama) - Trik CSS

Anonim

Biasanya Anda mengatur lebar dan tinggi untuk iframe. Jika konten di dalamnya lebih besar, scrollbar harus cukup. Skrip di bawah mencoba memperbaikinya dengan mengubah ukuran iframe secara dinamis agar sesuai dengan konten yang dimuatnya.

 $(function()( var iFrames = $('iframe'); function iResize() ( for (var i = 0, j = iFrames.length; i < j; i++) ( iFrames(i).style.height = iFrames(i).contentWindow.document.body.offsetHeight + 'px';) ) if ($.browser.safari || $.browser.opera) ( iFrames.load(function()( setTimeout(iResize, 0); )); for (var i = 0, j = iFrames.length; i < j; i++) ( var iSource = iFrames(i).src; iFrames(i).src = ''; iFrames(i).src = iSource; ) ) else ( iFrames.load(function() ( this.style.height = this.contentWindow.document.body.offsetHeight + 'px'; )); ) ));

Akan mengubah ukuran iframe seperti ini:

Lihat Demo

Masih bermasalah…

  1. Sumber konten iframe harus berada di domain yang sama
  2. jika konten di dalam iframe berubah tinggi, ini tidak akan beradaptasi
  3. Saya meninggalkan kode Google Analytics dari demo di atas, karena ketika saya menambahkannya di dalamnya tampaknya mengganggu dan tidak mengubah ukuran iframe, meskipun tampaknya tidak ada kesalahan.