IFrame İçerisindeki InputText’e JavaScript ile Erişme


Geçen gün bir arkadaşım ile konuşurken iframe içerisindeki textbox’a erişemediğini nasıl erişebileceğini sordu. Bende internette ara kesin vardır dedim. Çünkü internette doğru anahtar kelime ile aradığınızda bulamayacağınız yok denecek kadar azdır.

Giriş

Sayfanızda iframe var ve içeriği dinamik olarak değişiyor. Her sayfada farklı bir textbox yer alabilir. Ekranda bir buton varsa ve siz bu buton ile o an açık olan iframe içerisinde yer alan textbox in içeriğini tek bir buton ile nasıl alacağınız ona bakacağız.

Mantık Yürütme

Bir sayfa içerisinde iframe olması aslında diğer nesnelerin olması yani bir div’in olması gibi. Önce o div’in içeriğini alırsınız daha sonra id sini bildiğiniz nesneyi alırsınız, son olarakta bu nesnenin özelliğini(value,text,src) alabilirsiniz. 2 fonksiyon ve 1 global değişken ile bunu rahatlıkla yapabiliriz.

JavaScript Yazma

        var hangiInputText = "txtiframe1";
        function VeriyiAl() {
            var framedeki = document.getElementById('if1').contentWindow.document;
            //Burada iframe içerini alıyoruz
           
	    var veri = framedeki.getElementById(hangiInputText).value;
            // aldığımız iframe içeriğinden girdiğimiz input id sinin özelliğine ulaşıyoruz.
            alert(veri);
        }
        function IframeIcerisindeGoster(acilacakSayfa,inputTextId)
        {
             document.getElementById('if1').src = acilacakSayfa;
             hangiInputText = inputTextId;
         }

Buradaki fonksiyonları ve global değişkeni tanıyalım:

  • IframeIcerisindeGoster(acilacakSayfa,inputTextId): Burada acilacakSayfa, sizin iframe içerisinde açacağız sayfa oluyor. Yani benim örneğimde “iframe2.html” oluyor. inputTextId ise, bu iframe içerisindeki inputText in id’si oluyor. Bunu “hangiInputText”  dediğimiz bir global değişkene atıyoruz ki o an açık olan iframe içerisindeki değeri alabilelim.
  • hangiInputText, iframe içerisindeki inputboxin id’sini tutuyoruz ki butona tıklandığında o an açık olan sayfadaki inputtext i getiriyor.
  • VeriyiAl(), burada önce iframe içerisindeki sayfadaki tüm nesneleri alıyoruz. Daha sonrada aldığımız bu nesne içerisindeki hangiInputText isimli değişkenimizden gelen inputText id’sinin değerini alıyoruz ve işlem tamamlanmış oluyor.
html + js
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Örnek</title>
    <script type="text/javascript">
    //global değişkende alacağımız inputtext'in idsini tutuyoruz.
        var hangiInputText = "txtiframe1";
        function VeriyiAl() {
            var framedeki = document.getElementById('if1').contentWindow.document;
            //Burada iframe içerini alıyoruz
            var veri = framedeki.getElementById(hangiInputText).value;
            // aldığımız iframe içeriğinden girdiğimiz input id sinin özelliğine ulaşıyoruz.
            alert(veri);
        }
                 function IframeIcerisindeGoster(acilacakSayfa,inputTextId)
                 {
                     document.getElementById('if1').src = acilacakSayfa;
                     hangiInputText = inputTextId;
                 }
    </script>
</head>
<body>
    <p>
        <a onclick="IframeIcerisindeGoster('iframe1.htm','txtiframe1')" style="cursor:pointer">Sayfa 1</a>&nbsp;&nbsp;&nbsp;
        <a onclick="IframeIcerisindeGoster('iframe2.htm','txtiframe2')" style="cursor:pointer">Sayfa 2</a>&nbsp;&nbsp;&nbsp;
        <a onclick="IframeIcerisindeGoster('iframe3.htm','txtiframe3')" style="cursor:pointer">Sayfa 3</a>&nbsp;&nbsp;&nbsp;
        <a onclick="IframeIcerisindeGoster('iframe4.htm','txtiframe4')" style="cursor:pointer">Sayfa 4</a>
    </p>
    
    <p>
       <input id="Button1" type="button" value="button" onclick="VeriyiAl()" />
    </p>
</body>
</html>

 Görsel

İndirme

İndirmek İçin Tıklayınız.

 

  1. #1 by Muhammet Cabir İşbilir on September 18, 2014 - 4:30 pm

    firefox son sürümünde bu kodlar çalışmıyor maalesef..

    • #2 by Mahmut Can Sozeri on September 18, 2014 - 11:18 pm

      Vaktim olduğu an tekrar inceleyip, bilgi notu düşeceğim. Teşekkürler ilginiz için.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s