Ubah saiz Iframe agar Sesuai dengan Kandungan (Domain yang Sama sahaja) - Trik CSS

Anonim

Biasanya anda menetapkan dan lebar dan tinggi untuk iframe. Sekiranya kandungan di dalamnya lebih besar, bar tatal harus mencukupi. Skrip di bawah cuba memperbaikinya dengan mengubah ukuran iframe secara dinamik agar sesuai dengan kandungan 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 saiz iframe seperti ini:



Lihat Demo

Masih bermasalah ...

  1. Sumber kandungan iframe mesti berada di domain yang sama
  2. jika kandungan di dalam iframe berubah tinggi, ini tidak akan dapat disesuaikan
  3. Saya meninggalkan kod Analitis Google dari demo di atas, seperti ketika saya menambahkannya di dalamnya nampaknya mengganggu dan tidak mengubah saiz iframe, walaupun nampaknya tidak menghasilkan kesalahan.