Ten blog wyjaśni, jak zmienić źródło iframe w JavaScript.
Co to jest ramka liniowa?
Jakiś ' ramka liniowa ” służy do umieszczania innego określonego dokumentu w bieżącym dokumencie. Powoduje to przełączanie stron internetowych na podstawie podanych linków.
Jak zmienić źródło iframe w JavaScript?
Źródło iframe można zmienić w JavaScript przy użyciu następujących metod wraz z „ getElementById() ' metoda:
- “ Przekazany parametr ” Technika.
- “ wybranyIndeks ' Nieruchomość.
Podejście 1: Zmień źródło elementu iframe w JavaScript przy użyciu techniki przekazywanych parametrów
Technikę tę można wykorzystać do przełączenia się na określoną stronę poprzez umieszczenie odpowiedniego łącza do strony jako parametru funkcji, gdy dostęp do niej następuje za pomocą przycisku.
Przykład
Podążajmy za poniższym przykładem:
< środek >< h2 > Zmień źródło elementu iframe w JavaScript h2 >
< identyfikator elementu iframe = 'Strona internetowa' źródło = 'https://linuxhint.com/detect-tab-key-javascript/' szerokość = „1000” wzrost = '550' Brzeg ramki = „0” przewijanie = 'Nie' > element iframe >
< br >< br >
< przycisk po kliknięciu = 'changeIframe('https://linuxhint.com/category/linux-commands/')' > Kliknij, aby wyświetlić stronę poleceń systemu Linux przycisk >
< br > br >
środek >
W powyższych liniach kodu wykonaj następujące kroki:
- Podaj podany link w „
” wraz z dostosowanymi wymiarami. - Utwórz również przycisk z dołączonym „ na kliknięcie ” zdarzenie przekierowujące do funkcji changeIframe() mającej podany link jako parametr.
- Spowoduje to przekierowanie strony do podanego linku po kliknięciu przycisku.
Przejdźmy do części kodu JavaScript:
< typ skryptu = „tekst/javascript” >
funkcjonować zmień iramkę ( zmiana ) {
dokument. getElementById ( 'Strona internetowa' ) . źródło = zmiana ;
}
scenariusz >
W powyższym fragmencie kodu:
- Zadeklaruj funkcję o nazwie „ zmieńIramkę() ”.
- W jego definicji uzyskaj dostęp do określonego linku w „ ramka liniowa ” elementu używającego „ document.getElementById() ' metoda.
- Następnie zastosuj „ źródło ” atrybut i przypisać podany link po dostępie funkcji do łącza, do którego uzyskano dostęp, za pomocą parametru „ zmiana ”.
- Spowoduje to przełączenie stron w odniesieniu do określonych linków po kliknięciu przycisku.
Wyjście
Na powyższym wyjściu można zauważyć, że strony są przełączane po kliknięciu przycisku.
Podejście 2: Zmień źródło elementu iframe w JavaScript przy użyciu właściwości selectedIndex
„ wybranyIndeks ” zwraca indeks wybranej opcji na liście rozwijanej. Właściwość tę można zastosować do przekierowania do wskazanego linku w odniesieniu do wartości wybranej opcji z listy rozwijanej.
Przykład
Zwróćmy uwagę na następujący przykład:
< identyfikator elementu iframe = 'Strona internetowa' źródło = 'https://linuxhint.com/detect-tab-key-javascript/' szerokość = „1000” wzrost = '550' Brzeg ramki = „0” przewijanie = 'Nie' > element iframe >
< br >< br >
< wybierz identyfikator = 'spinki do mankietów' >
< Wartość opcji = 'https://linuxhint.com/auto-refresh-web-page-every-5-seconds-javascript/' > Przejdź do artykułu 1
< Wartość opcji = 'https://linuxhint.com/convert-array-to-object-javascript/' > Przejdź do artykułu dwa
Wybierz >
< br >< br >
< przycisk onKliknij = 'zmieńIramkę();' > Zmień ramkę iframe Src przycisk >
< br >< br >
ciało > środek >
W powyższych liniach kodu wykonaj następujące kroki:
- Przypomnij sobie krok określania podanego linku w „
” znacznik mający określony „ ID ” i dostosowane wymiary. - W następnym kroku uwzględnij „ Wybierz ” element o określonym „ ID ”, aby utworzyć listę rozwijaną.
- Następnie zawieraj „ opcja ” element służący do określenia wartości opcji.
- Określ podane łącza jako „ wartość ” elementu opcji.
- Utwórz także przycisk z „ na kliknięcie ”, które wywoła funkcję changeIframe().
Przejdźmy do części kodu JavaScript:
< typ skryptu = „tekst/javascript” >funkcjonować zmień iramkę ( ) {
był Dostawać = dokument. getElementById ( 'spinki do mankietów' ) ;
był upuścić = Dostawać . opcje [ Dostawać . wybranyIndeks ] . wartość ;
dokument. getElementById ( 'Strona internetowa' ) . źródło = upuścić ;
}
scenariusz >
W powyższym fragmencie kodu:
- Zdefiniuj funkcję o nazwie „ zmieńIramkę() ”.
- W swojej definicji uzyskaj dostęp do określonego „ Wybierz ” element po jego „ ID ' używając ' document.getElementById() ' metoda.
- W następnym kroku zastosuj „ wybranyIndeks ” i „ wartość ”, aby przekierować do wartości, tj. powiązać z odpowiednią wybraną opcją.
Wyjście
Z powyższego wyniku wynika, że strony przełączają się prawidłowo w odniesieniu do „ opcje ” po kliknięciu przycisku.
Wniosek
„ getElementById() ” w połączeniu z techniką przekazywanych parametrów lub metodą „ wybranyIndeks ” można użyć do zmiany źródła iframe w JavaScript. Pierwszą technikę można wykorzystać do przekierowania do przekazanego łącza jako parametru funkcji po kliknięciu przycisku. To drugie podejście można zaimplementować, aby przejść do odpowiednich linków w odniesieniu do wybranej opcji z listy rozwijanej. W tym samouczku wyjaśniono, jak zmienić źródło iframe w JavaScript.