Arif Erzin Bloğu-Kendime Notlar

İçerikler özgün değildir. Sadece sık sık lazım olan işime yarayacak olan notları almış olduğum kişisel bloğumdur.

1 Şubat 2014 Cumartesi

IFrame İçerisindeki Veriye JavaScript ile Erişme

Gönderen arif erzin zaman: 21:45 Etiketler: ,
Kaynak:http://mcansozeri.wordpress.com/2011/07/23/iframe-icerisindeki-inputtexte-javascript-ile-erisme/

 Özet olarak ifrm3 name ve id ye sahip olan iframde çağrılan sayfada bulunan WebUploadHidden isimli gizli bilgiye erişme kodu

 var PicUpload = document.getElementById('ifrm3').contentWindow.document.getElementById("WebUploadHidden").value;
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.

Hiç yorum yok :

Yorum Gönder

Kaydol: Kayıt Yorumları ( Atom )

Blog Archive

Popular Posts