Problem:
A domainindeki bir sayfamız B domainden gelen sayfayı bir iframe içinde görüntülüyor. B domainindeki sayfanın, yüksekliğini algılayıp, iframe yüksekliğini otomatik ayarlamasını istiyoruz. Ancak, A sayfası, B sayfasının yüksekliğine erişmeye çalıştığında 'permission denied' hatası alıyoruz.
Kendi geliştirdiğim çözüm şu şekilde:
Sayfalarımız şunlar:
- A: http://domain-A/container.htm
- B: http://domain-B/iframe-content.htm
- C: http://domain-A/communicator.htm
A sayfasının içinde B var, B'nin içinde de C olacak. A ve C aynı domainden geldikleri için birbirleri ile haberleşebilirler. B sayfası dinamik olarak C'yi içeren bir iframe yazdıracak. C'ye iletmek istediğimiz parametreyi #hash kullanarak aktaracağız. Parametrelerimizi hash üzerinden aktardığımız için communicator.htm dosyasının cache'den kullanabiliriz. (Querystring kullanmış olsaydık her farklı parametre için sunucuya istek gönderilecekti.)
http://domain-A/communicator.htm[script]
top.document.getElementById('iframe1').style.height = Number(h)+'px';
[/script]
http://domain-A/container.htm[iframe src="http://domain-B/iframe-content.htm"][/iframe]
http://domain-B/iframe-content.htm[script type="text/javascript"]
function setTopFrameHeight(a)
{
$('#proxyFrame').html('[iframe style="WIDTH: 0px; DISPLAY: none; HEIGHT: 0px" src="http://domain-A/communicator.htm#'+a+'"][/iframe]');
}
[/script]
...
[button onclick="setTopFrameHeight('400px')"]deneme[/button]
...
[div id="proxyFrame"][/div]Artık B domainindeki iframe-content.htm sayfasının, A domaininde bulunan kendisini içeren sayfadaki iframe'in yüksekliğini değiştirmek için setTopFrameHeight() fonksiyonunu çağırması yeterli.
Not: Örnek kodlardaki html tag'leri [] şeklinde ifade edilmiştir.