Jak zmienić źródło iframe w JavaScript?

Podczas tworzenia strony internetowej lub witryny istnieje wymóg przekierowania użytkownika końcowego na inną stronę internetową, aby uzyskać dostęp do odpowiedniego/wyszukiwanego ”treść". Oprócz tego, zapewnienie użytkownikowi różnych funkcji w tym samym czasie, dzięki czemu dostępność dostępności. W takich scenariuszach zmiana źródła iframe w JavaScript robi cuda w zapewnieniu użytkownika łatwości pod względem czasu i kłopotów.

Ten blog wyjaśni, jak zmienić źródło iframe w JavaScript.

Co to jest ramka wbudowana?

Jakiś "Rama wbudowana”Służy do zawierania kolejnego określonego dokumentu w bieżącym dokumencie. Powoduje to przełączenie stron internetowych na podstawie podanych linków.

Jak zmienić źródło iframe w JavaScript?

Źródło iframe można zmienić w JavaScript, stosując następujące podejścia wraz z „getElementById ()" metoda:

"Przeszedł parametr”Technika.
"wybraneIndex" Nieruchomość.

Podejście 1: Zmień źródło iframe w JavaScript przy użyciu techniki Parametr Parametr z Parma

Tę technikę można wykorzystać do przełączania na określoną stronę, umieszczając odpowiedni link do strony jako parametr funkcji po dostępie za pomocą przycisku.

Przykład
Śledźmy poniżej podanego przykładu:

Zmień źródło iframe w JavaScript

W powyższych wierszach kodu wykonaj następujące kroki:

Określ podany link w „”Tag wraz z dostosowanymi wymiarami.
Utwórz także przycisk z załączonym „na kliknięcie„Przekierowanie zdarzenia do funkcji zmianeFrame () o określonym łączu jako jego parametrze.
Spowoduje to skierowanie strony do określonego linku po kliknięciu przycisku.

Kontynuujmy do części kodu JavaScript:

W powyższym fragmencie kodu:

Deklaruj funkcję o nazwie „zmianaIframe ()".
W swojej definicji uzyskaj dostęp do określonego linku w „Rama wbudowana”Element za pomocą„dokument.getElementById ()" metoda.
Następnie zastosuj „src”Atrybut i przydzielić podany link do dostępu do funkcji do dostępnego łącza za pomocą parametru„zmiana".
Spowoduje to zmianę stron w odniesieniu do określonych linków na przycisku.

Wyjście

W powyższym wyjściu można zauważyć, że strony są przełączane po kliknięciu przycisku.

Podejście 2: Zmień źródło iframe w JavaScript za pomocą właściwości SelectedIndex

„„wybraneIndex”Właściwość zwraca indeks wybranej opcji na liście rozwijanej. Ta właściwość można zastosować do przekierowania do określonego łącza w odniesieniu do wartości wybranej opcji z listy rozwijanej.

Przykład
Obserwujmy następujący przykład:

W powyższych wierszach kodu wykonaj następujące kroki:

Przypomnij sobie krok do określenia określonego linku w „</strong>”Tag ma określony„<strong>ID</strong>”I dostosowane wymiary.</li> <li>W następnym kroku dołącz „<strong>wybierać</strong>„Element o określonym„<strong>ID</strong>„Aby utworzyć rozwijaną listę.</li> <li>Potem zawieraj „<strong>opcja</strong>„Element do zdefiniowania wartości opcji. </li> <li>Podaj podane linki jako „<strong>wartość</strong>”Elementu opcji.</li> <li>Utwórz także przycisk o „<strong>na kliknięcie</strong>„Wydarzenie, które wywoła funkcję ChangeiFrame ().</li> </ul> <p>Przejdźmy do części kodu JavaScript:</p> <script type="text/javascript"><br>function changeIframe() <br>var get = document.getElementById("links");<br>var dropDown = get.options[get.selectedIndex].value;<br>document.getElementById("webpage").src= dropDown ;<br><br></script> <p>W powyższym fragmencie kodu:</p> <ul> <li>Zdefiniuj funkcję o nazwie „<strong>zmianaIframe ()</strong>". </li> <li>W swojej definicji dostęp do określonych „<strong>wybierać</strong>”Element po„<strong>ID</strong>" używając "<strong>dokument.getElementById ()</strong>" metoda.</li> <li>W następnym kroku zastosuj „<strong>wybraneIndex</strong>”I„ „<strong>wartość</strong>„Właściwości, aby przekierować wartość i.mi. link do odpowiedniej wybranej opcji.</li> </ul> <p><strong>Wyjście</strong></p> <p>Z powyższego wyjścia widać, że strony poprawnie zmieniają się w odniesieniu do „<strong>opcje</strong>„Wartość przy przycisku kliknij.</p> <p>Wniosek</p> <p>„„<strong>getElementById ()</strong>„Metoda w połączeniu z techniką parametrów ministerstwa lub„<strong>wybraneIndex</strong>„Własność można użyć do zmiany źródła iframe w JavaScript. Dawną technikę można wykorzystać do przekierowania do przekazanego linku jako parametr funkcji po kliknięciu przycisku. To ostatnie podejście można wdrożyć w celu przejścia do odpowiednich linków w odniesieniu do wybranej opcji z listy rozwijanej. Ten samouczek wyjaśnia, jak zmienić źródło iframe w JavaScript. </p> </div> <div class="rek-block rek-block-article"> </div> <ul class="prev-next"> <li class="prev-next__item prev-next__item--left"><a href="http://pl.cyberaxe.org/article/how-to-change-the-page-title-in-javascript">« Jak zmienić tytuł strony w JavaScript</a></li> <li class="prev-next__item prev-next__item--right"><a href="http://pl.cyberaxe.org/article/how-to-change-discord-notification-sound-on-mobile">Jak zmienić dźwięk powiadomienia niezgody na telefon komórkowy? »</a></li> </ul> <style> .prev-next { display: flex; align-items: center; justify-content: space-between; margin: 0; padding: 20px 0; list-style: none; gap: 30px; } .prev-next li { max-width: 50%; } .prev-next__item { display: inline-block; font-weight: bold; } .prev-next__item--left { text-align: left; } .prev-next__item--right { text-align: right; } @media(max-width: 768px) { .prev-next li { max-width: 85%; } .prev-next__item--left { align-self: flex-start; } .prev-next__item--right { align-self: flex-end; } .prev-next { display: flex; flex-direction: column; } } </style> </div> <div class="col-xl-4"> <div class="sidebar-news"> <div class="rek-block rek-block-sidebar"> </div> <div class="white-news white-news--article"> <div class="white-news__cat"> <a href="http://pl.cyberaxe.org/category/php">php</a> </div> <div class="white-news__name"> <a href="http://pl.cyberaxe.org/article/how-to-use-strlen-function-in-php">Jak używać funkcji strlen w PHP</a> </div> <div class="white-news__text"> Funkcja strlen () w PHP to funkcja wbudowana, która służy do obliczania długości łańcucha. Przeczyta... </div> <div class="white-news__author"> <a href="http://pl.cyberaxe.org/author/albert-szczesniak">Albert Szcześniak</a> </div> </div> <div class="white-news white-news--article"> <div class="white-news__cat"> <a href="http://pl.cyberaxe.org/category/golang">Golang</a> </div> <div class="white-news__name"> <a href="http://pl.cyberaxe.org/article/what-is-a-class-and-an-object-in-golang">Co to jest klasa i obiekt w Golang?</a> </div> <div class="white-news__text"> Go nie ma zajęć ani przedmiotów w klasycznym sensie; Zamiast tego wykorzystuje struktury i interfejs... </div> <div class="white-news__author"> <a href="http://pl.cyberaxe.org/author/pani-zaneta-pakula">Pani Żaneta Pakuła</a> </div> </div> <div class="white-news white-news--article"> <div class="white-news__cat"> <a href="http://pl.cyberaxe.org/category/java">Jawa</a> </div> <div class="white-news__name"> <a href="http://pl.cyberaxe.org/article/java-servlet-examples">Przykłady serwletu Java</a> </div> <div class="white-news__text"> Samouczek na temat zastosowań serwletu Java do opracowywania serwera aplikacji internetowych i różny... </div> <div class="white-news__author"> <a href="http://pl.cyberaxe.org/author/pani-julia-szwed">Pani Julia Szwed</a> </div> </div> </div> </div> </div> </div> <div class="container"> <div class="my-slider"> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://pl.cyberaxe.org/category/python">Pyton</a> </div> <div class="header-news__name"> <a href="http://pl.cyberaxe.org/article/python-os-path-expanduser-method">Python OS.ścieżka.Metoda ekspanduSer</a> </div> <div class="header-news__author"> <a href="http://pl.cyberaxe.org/author/zofia-gora">Zofia Góra</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://pl.cyberaxe.org/category/sqlite">Sqlite</a> </div> <div class="header-news__name"> <a href="http://pl.cyberaxe.org/article/how-to-use-sqlite-viewer-web-app">Jak korzystać z aplikacji internetowej SQLite Viewer</a> </div> <div class="header-news__author"> <a href="http://pl.cyberaxe.org/author/pani-alicja-szafranski">Pani Alicja Szafrański</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://pl.cyberaxe.org/category/php">php</a> </div> <div class="header-news__name"> <a href="http://pl.cyberaxe.org/article/how-to-use-stripslashes-function-in-php">Jak korzystać z funkcji stripassashes w PHP</a> </div> <div class="header-news__author"> <a href="http://pl.cyberaxe.org/author/sebastian-kaczynski">Sebastian Kaczyński</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://pl.cyberaxe.org/category/oracle-database">Baza danych Oracle</a> </div> <div class="header-news__name"> <a href="http://pl.cyberaxe.org/article/how-to-install-oracle-instant-client-in-linux">Jak zainstalować Oracle Instant Client w Linux?</a> </div> <div class="header-news__author"> <a href="http://pl.cyberaxe.org/author/pani-zaneta-pakula">Pani Żaneta Pakuła</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://pl.cyberaxe.org/category/powershell">PowerShell</a> </div> <div class="header-news__name"> <a href="http://pl.cyberaxe.org/article/what-is-rename-item-command-in-powershell">Co to jest polecenie zmiany nazwy w PowerShell?</a> </div> <div class="header-news__author"> <a href="http://pl.cyberaxe.org/author/zofia-gora">Zofia Góra</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://pl.cyberaxe.org/category/docker">Doker</a> </div> <div class="header-news__name"> <a href="http://pl.cyberaxe.org/article/how-to-kill-a-docker-container">Jak zabić pojemnik Docker?</a> </div> <div class="header-news__author"> <a href="http://pl.cyberaxe.org/author/zofia-gora">Zofia Góra</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://pl.cyberaxe.org/category/aws">AWS</a> </div> <div class="header-news__name"> <a href="http://pl.cyberaxe.org/article/what-are-aws-step-functions-and-how-to-use-them">Jakie są funkcje krokowe AWS i jak z nich korzystać?</a> </div> <div class="header-news__author"> <a href="http://pl.cyberaxe.org/author/renata-borowiec">Renata Borowiec</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://pl.cyberaxe.org/category/c-sharp">c ostre</a> </div> <div class="header-news__name"> <a href="http://pl.cyberaxe.org/article/how-lambda-operator--is-used-in-c">Jak używany jest operator Lambda '=>'</a> </div> <div class="header-news__author"> <a href="http://pl.cyberaxe.org/author/justyna-flak">Justyna Flak</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://pl.cyberaxe.org/category/c-sharp">c ostre</a> </div> <div class="header-news__name"> <a href="http://pl.cyberaxe.org/article/break-and-continue-statements-in-c">Złóż i kontynuuj instrukcje w C#</a> </div> <div class="header-news__author"> <a href="http://pl.cyberaxe.org/author/sebastian-kaczynski">Sebastian Kaczyński</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://pl.cyberaxe.org/category/c-sharp">c ostre</a> </div> <div class="header-news__name"> <a href="http://pl.cyberaxe.org/article/how-to-use-long-keyword-in-c">Jak używać długiego słowa kluczowego w C#</a> </div> <div class="header-news__author"> <a href="http://pl.cyberaxe.org/author/makary-stasiak">Makary Stasiak</a> </div> </div> </div> </div> </div> </div> <footer> <div class="container"> <div class="footer"> <div class="footer__about">Witryna poświęcona systemowi operacyjnemu Linux. Tutaj znajdziesz wiele ciekawych artykułów i przydatnych poradników</div> <div class="footer__cats"> <ul class="sub-menu"> <li class="menu-item"><a href="http://pl.cyberaxe.org/category/python">Pyton</a></li> <li class="menu-item"><a href="http://pl.cyberaxe.org/category/postgresql">PostgreSQL</a></li> <li class="menu-item"><a href="http://pl.cyberaxe.org/category/oracle-linux">Oracle Linux</a></li> <li class="menu-item"><a href="http://pl.cyberaxe.org/category/c">C ++</a></li> <li class="menu-item"><a href="http://pl.cyberaxe.org/category/windows-os">System systemu Windows</a></li> </li> </ul> </div> <div class="footer__cats"> <ul class="sub-menu"> <li class="menu-item"><a href="http://pl.cyberaxe.org/category/docker">Doker</a></li> <li class="menu-item"><a href="http://pl.cyberaxe.org/category/c-sharp">c ostre</a></li> <li class="menu-item"><a href="http://pl.cyberaxe.org/category/r">R</a></li> <li class="menu-item"><a href="http://pl.cyberaxe.org/category/oracle-database">Baza danych Oracle</a></li> </li> <li class="menu-item"><a href="http://pl.cyberaxe.org/all-categories"><b>Wszystkie kategorie</b></a></li> </ul> </div> </div> </div> </footer> <script src="/assets/artline/js/app.min.js"></script> <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" /> <script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js"></script> <script> window.addEventListener("load", function(){ window.cookieconsent.initialise({ "palette": { "popup": { "background": "#edeff5", "text": "#838391" }, "button": { "background": "#4b81e8" } }, "theme": "classic", "position": "bottom-right" })}); </script> <script> const images = document.querySelectorAll('img'); for (let i = 0; i < images.length; i++) { images[i].onerror = function() { this.src = 'https://cyberaxe.org/storage/img/nophoto.jpg'; } } </script> </body> </html>