Bu blog, JavaScript'te iframe kaynağının nasıl değiştirileceğini açıklayacaktır.
Satır İçi Çerçeve nedir?
Bir ' satır içi çerçeve ”, geçerli belge içinde belirtilen başka bir belgeyi içermek için kullanılır. Bu, web sayfalarının belirtilen bağlantılara göre değiştirilmesiyle sonuçlanır.
JavaScript'te Iframe Kaynağı Nasıl Değiştirilir?
Iframe kaynağı, “ ile birlikte aşağıdaki yaklaşımlar kullanılarak JavaScript'te değiştirilebilir. getElementById() ' yöntem:
- “ Geçilen parametre ” Teknik.
- “ seçili dizin ' Mülk.
Yaklaşım 1: Geçilen Parametre Tekniğini Kullanarak JavaScript'te Iframe Kaynağını Değiştirin
Bu teknik, bir buton yardımıyla erişildiğinde ilgili sayfa bağlantısını bir fonksiyonun parametresi olarak yerleştirerek belirtilen sayfaya geçmek için kullanılabilir.
Örnek
Aşağıda belirtilen örneği takip edelim:
< merkez >< h2 > iframe kaynağını değiştir içinde JavaScript h2 >
< iframe kimliği = 'internet sayfası' kaynak = 'https://linuxhint.com/detect-tab-key-javascript/' Genişlik = '1000' yükseklik = '550' çerçeve kenarlığı = '0' kaydırma = 'Numara' > iframe >
< br >< br >
< tıklama düğmesi = 'changeIframe('https://linuxhint.com/category/linux-commands/')' > Linux Komutları Sayfasını görüntülemek için tıklayın buton >
< br > br >
merkez >
Yukarıdaki kod satırlarında aşağıdaki adımları gerçekleştirin:
- Belirtilen bağlantıyı “
” etiketi, ayarlanan boyutlarla birlikte. - Ayrıca, ekli bir düğme oluşturun ' tıklamada ” parametresi olarak belirtilen bağlantıya sahip changeIframe() işlevine yeniden yönlendiren olay.
- Bu, düğme tıklandığında sayfanın belirtilen bağlantıya yönlendirilmesine neden olacaktır.
Kodun JavaScript kısmına devam edelim:
< komut dosyası türü = 'metin/javascript' >
işlev Iframe değiştir ( değiştirmek ) {
belge. getElementById ( 'internet sayfası' ) . kaynak = değiştirmek ;
}
senaryo >
Yukarıdaki kod parçacığında:
- “ adlı bir işlev bildirin. changeIframe() ”.
- Tanımında belirtilen bağlantıya “ satır içi çerçeve “ öğesini kullanan öğe Document.getElementById() ' yöntem.
- Bundan sonra, “ kaynak ' parametresini kullanarak erişilen bağlantıya erişim işlevine göre belirtilen bağlantıyı niteliklendirin ve tahsis edin değiştirmek ”.
- Bu, düğme tıklandığında belirtilen bağlantılara göre sayfaların değiştirilmesine neden olacaktır.
Çıktı
Yukarıdaki çıktıda butona tıklandığında sayfaların değiştiği görülmektedir.
Yaklaşım 2: SelectedIndex Özelliğini Kullanarak JavaScript'te Iframe Kaynağını Değiştirin
“ seçili dizin ” özelliği, seçilen seçeneğin dizinini bir açılır listede döndürür. Bu özellik, açılır listeden seçilen seçeneğin değerine göre belirtilen bağlantıya yönlendirmek için uygulanabilir.
Örnek
Aşağıdaki örneği gözlemleyelim:
< iframe kimliği = 'internet sayfası' kaynak = 'https://linuxhint.com/detect-tab-key-javascript/' Genişlik = '1000' yükseklik = '550' çerçeve kenarlığı = '0' kaydırma = 'Numara' > iframe >
< br >< br >
< kimlik seç = 'bağlantılar' >
< Opsiyon değeri = 'https://linuxhint.com/auto-refresh-web-page-every-5-seconds-javascript/' > Makaleye Geç 1
< Opsiyon değeri = 'https://linuxhint.com/convert-array-to-object-javascript/' > Makaleye Geç iki
seçme >
< br >< br >
< düğmesine tıklayın = 'changeIframe();' > Iframe Src'yi değiştir buton >
< br >< br >
gövde > merkez >
Yukarıdaki kod satırlarında aşağıdaki adımları gerçekleştirin:
- Belirtilen bağlantıyı “ içinde belirtme adımını hatırlayın.