Kolay ve Kusursuz HTML Embed

Bir sitenin bir köşesine başka bir domainden gelen dinamik html kodlarını yerleştirmek ve kendi içerisinde ana siteye zarar vermeden çalışmasını sağlamak olayına HTML Embed ediyoruz. Bu işin en kolay yolu IFRAME kullanmak. Ancak hemen itiraz ideceksiniz çünkü web dünyasında kesin bilinen bir şey vardır ki: iframe’ler çok sorunludur ve uzak durulmalıdır. Peki nedir bu iframe’lerin sorunu? En büyük sorunları uzunlugu ve genişliği belli olmayan bir veriyi bir kutu icerisine koydugunuzda o kutudan taşar. Sağında ve altında kaydırma çubukları (scrollbar) çıkar ve sitenin orta yerinden iğrenc bir görüntü kirliliği yaratır. Ancak hemen şunu belirteyim eğer embed edeceğiniz adres ile embed’i koyacağınız site aynı “domain” de yer alıyorsa, bunun üstesinden gelmek oldukça basit. Örneğin; www.baturorkun.com sitesine bir embed koyacagim ve embed kodumda “www.baturorkun.com/deneme/test.php” adresi ise hiç korkmayın. Çünkü aynı domain’de çalışıyorsanız iframe deki dökümanın yükseklik ve genişlik bilgilerini alarak iframe in boyutlarını her seferinden dinamik değiştirebilirsiniz.

function doIframe(){
o = document.getElementsByTagName('iframe');
for(i=0;i<o.length;i++){
if (/\bautoHeight\b/.test(o[i].className)){
setHeight(o[i]);
addEvent(o[i],'load', doIframe);
}
}
}

function  setHeight(e){
if(e.contentDocument){
e.height = e.contentDocument.body.offsetHeight + 35;
} else {
e.height = e.contentWindow.document.body.scrollHeight;
}
}

function addEvent(obj, evType, fn){
if(obj.addEventListener)
{
obj.addEventListener(evType, fn,false);
return true;
} else if (obj.attachEvent){
var r = obj.attachEvent("on"+evType, fn);
return r;
} else {
return false;
}
}

if (document.getElementById && document.createTextNode){
addEvent(window,'load', doIframe);
}

Yukarıdaki kodu eklediginiz her sayfadaki “autoHeight” class değerine sahip tüm iframe’ler içerisindeki dökümana göre otomatik boyutlanacaklardır. Ancak farklı bir domain’deki kodu embed etmek isterseniz güvenlik meselelerine takılırsınız. Çünkü tarayıcınız elin DOM’una (Document Object Model) ulaşmanızı normal olarak engeller. Iframe teknolojisi sizin için bitti. Bir DIV koyarım oraya AJAX ile yüklerim diye düşünenleriniz varsa. Onlarda bitti. Çünkü yine güvenlik gereği başka bir domain’deki kodu ajax ile yükleyemessiniz. Tek yolunuz JS kodu üreten bir CGI kullanmanız (Ben bundan sonra PHP diyeceğim).

Bu embed.js.php kodu örneğin şu sekilde olabilir.

header("Content-Type:text/javascript; charset=utf-8");
$content = .....................
$content = str_replace("\n", "", $content);
$content = str_replace("'", "\\'", $content);
exit("document.write('<div id=embedim>{$content}</div>');");

Bu aslında php uzantili bir php kodu gibi durur ama JavaScript kodudur. Haliyle sitenize embed işleminde SCRIPT tag’ını kullanacaksınız.

    <script src="http://www.xxx.com/embed.js.php" > </script>

Birinci aşamayı geçtiniz. Başka domain’deki kodu sitenizdeki bir DIV içerisine embed ettiniz. Eğer bu embed kodu içerisinde bir form varsa ve bir butona basıldığında gidip www.xxx.com ‘daki başka bir PHP yi çalıştırıp sonucuda tekrar embed div’inize yükleyeceksiniz, ikinci aşamaya devam etmelisiniz. Bu arada bunlar olurken embed’i içeren sitenin başka hiçbir yerinden bir değişiklik olmayacak, siteden asla çıkılmayacak, hersey o küçük div içerisinde olup bitecek. Kullanıcı başka bir siteye gidip geldiğini hiç anlayamacak. Bu düşününce cok zor gibi geliyor ama aslında uygulaması oldukça basit. Embed kodundaki butona basıldığında formu doğrudan submit etmek yerine bir miktar javascript kodu calistiriyorsunuz. Bu JS kodu sitenin HEADER’ina bir SCRIPT etiketiyle php ekliyor ve formu serialize ederek PHP’ye gönderiyor. (“serialize” işlemi için ben jQuery kullandığım için onun hazır fonksiyonunu kullandım.)

<script type="text/javascript" >
var s = document.createElement("SCRIPT");
s.charset = "utf-8";
s.src = 'http://www.xxx.com/save.php?'+ $(f).serialize();
var h = document.getElementsByTagName("head").item(0);
h.appendChild(s);
</script >

Karsida calisan bu save.PHP kodu yine bir php görünümlü javascript kodudur. Gelen paremetrelerle gerekli işlemleri yapar ve sonucu yine javascript ile embed’in DIV’i içerisine yazar.
Örnek bir save.php kodu:

    ....Burada gerekli php işlemleri uygulanır....

header("Content-Type:text/javascript; charset=utf-8");
$content = $tpl->render("poll/_embed_result.phtml");
$content = str_replace("\n", "", $content);
$content = str_replace("'", "\\'", $content);
echo " $('#embedim').html('{$content}') ";

Burada embedim id’li DIV icerisine yine jquery kullanarak sonucu yazdım. jQuery kullanmıyorsanız, son satırı şu şekilde değiştiriniz:

document.getElementById('embedim').innerHTML = "{$content}";

İşte bu kadar! 🙂 Burda önemli bir hatırlatma: Embed’i koyduğumuz DIV’in ID’si icin “embedim” değerini kullandık. Bu ID değeri çok abuk subuk olmalıdır ki, kodunuzu embed eden site sahibinin ID ile çakışmasın. Yoksa pek iyi sonuçlar olmaz. Örneğin; “jape_embed_div” gibi biraz uzun ve size özel kelimeler içeren bir ID olabilir.

Kolay gelsin diyorum…

batur@