Kategoriler
Kodlama

Bir iframe içerisine CSS eklemek

JavaScript ile iframe içeriğinde değişiklik yapmak.

  • Volkan Yılmaz
  • Yazı tarihi 20 Nisan 2021
CSS Tablo
JavaScript ile iframe içerisine CSS eklemek.

<iframe> etiketi ile web sayfası içerisine farklı bir web sayfası import edilir, bu yöntem çok eski olsa da günümüzde hâlâ efektif olarak kullanılmaya devam etmekte çünkü kolay ve kullanışlı, örnek Youtube videoları, Twitter, Instagram gibi sitelerden gönderiler de bu yöntem ile farklı siteler içerisinde paylaşılmaktadır.

Bazen farklı sitelerden farklı sayfaları sitemizin içerisinde iframe ile göstermemiz gerekebilir, bu bir Youtube videosu da olabilir bir Twitter widget de olabilir, olmayabilir de apayrı bir web sitesi de olabilir. Böyle durumlarda ilgili iframe sayfasında bir düzenleme yapma imkanımız olmadığı için ve normal şartlarda kendi sayfamızda ekleyeceğimiz CSS’ler ve JS’ler iframe içerisinde çalışmayacağı için aşağıdaki yöntemi kullanabiliriz.

Örnekleyelim:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>iframe içerisine CSS eklemek örnek</title>
</head>
<body>

<iframe id="ilgili_iframe" src="https://simple-pure-css-custom-checkbox.glitch.me/" width="580px" height="400" frameborder="0" border="0" cellspacing="0"></iframe>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous"></script>

<script>
var frameListener;
var css_Tframe = '<style type="text/css">'+'body{background-color:red;}'+'</style>';

(function($){'use strict';jQuery(window).on('load', function(){
 frameListener = setInterval("frameLoaded()", 50);
});})(jQuery);

function frameLoaded(){
    var frame = $('iframe#ilgili_iframe').get(0);
    if (frame != null){
        var frmHead = $(frame).contents().find('head');
        if (frmHead != null){
            clearInterval(frameListener); //stop the listener
            frmHead.append(css_Tframe);
       }
   }
}
</script>

</body>
</html>

Yukarıdaki örnekte https://simple-pure-css-custom-checkbox.glitch.me/ adresini sayfamıza iframe olarak embed ettik ve jQuery ile içerisindeki body elementine sitil(background-color:red) atadık.

Farklı JavaScript yöntemleri ile de yapılabilir, biz burada ek olarak setInterval atayarak iframe içeriğinin yüklenmesine zaman tanıyıp kodu jQuery ile yazdık, daha fazla bilgi ve kaynak: https://stackoverflow.com/search?q=iframe+content+change ve https://stackoverflow.com/questions/217776/how-to-apply-css-to-iframe ve mesela böyle: https://codepen.io/KittyGiraudel/pen/vGWpyr https://redstapler.co/how-to-apply-css-to-iframe/

Bu arada bu yöntem normal şartlarda güvenlik açısından doğru bir şey değildir ve çoğu sistemde uyarı vermesi muhtemeldir, ben bunu birkaç defa Twitter ve Google CS sonuçları için kullanmıştım büyük bir problem yaşamadım, aslında en doğu olanı eğer uygun ise PHP ile cURL veya file_get_contents veya PHP değilse muadilindeki benzer fonksiyonlar iş görür, daha fazla bilgi: https://en.wikipedia.org/wiki/Cross-site_scripting ve https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS.