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-php-getdate-function">Jak używać funkcji PHP GetDate</a> </div> <div class="white-news__text"> GetDate () w PHP zwraca tablicę, która zawiera wszystkie szczegóły bieżącego czasu, w tym szczegółow... </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/how-to-trim-a-string-in-golang">Jak przyciąć sznur w Golang</a> </div> <div class="white-news__text"> Przycinanie strun to proces usuwania dodatkowych przestrzeni lub znaków od początku lub końca sznurk... </div> <div class="white-news__author"> <a href="http://pl.cyberaxe.org/author/zofia-gora">Zofia Góra</a> </div> </div> <div class="white-news white-news--article"> <div class="white-news__cat"> <a href="http://pl.cyberaxe.org/category/c-sharp">c ostre</a> </div> <div class="white-news__name"> <a href="http://pl.cyberaxe.org/article/what-are-constant-variables-in-c">Jakie są stałe zmienne w C#</a> </div> <div class="white-news__text"> Zmienna stała to rodzaj zmiennej, której wartość jest ustawiana podczas jej definicji i nie można je... </div> <div class="white-news__author"> <a href="http://pl.cyberaxe.org/author/larysa-witczak">Larysa Witczak</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-call-static-method-within-class">Python wywołaj metodę statyczną w klasie</a> </div> <div class="header-news__author"> <a href="http://pl.cyberaxe.org/author/oliwia-makowski">Oliwia Makowski</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://pl.cyberaxe.org/category/c">C ++</a> </div> <div class="header-news__name"> <a href="http://pl.cyberaxe.org/article/array-of-structs-in-c">Tablica struktur w C ++</a> </div> <div class="header-news__author"> <a href="http://pl.cyberaxe.org/author/albert-szczesniak">Albert Szcześniak</a> </div> </div> </div> </div> <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-finds-the-index-of-all-occurrences-in-a-list">Python znajduje indeks wszystkich zdarzeń na liście</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/python">Pyton</a> </div> <div class="header-news__name"> <a href="http://pl.cyberaxe.org/article/seaborn-axis-labels">Etykiety osi morskiej</a> </div> <div class="header-news__author"> <a href="http://pl.cyberaxe.org/author/pani-julia-szwed">Pani Julia Szwed</a> </div> </div> </div> </div> <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-mkdir">Python OS Mkdir</a> </div> <div class="header-news__author"> <a href="http://pl.cyberaxe.org/author/larysa-witczak">Larysa Witczak</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://pl.cyberaxe.org/category/golang">Golang</a> </div> <div class="header-news__name"> <a href="http://pl.cyberaxe.org/article/how-to-convert-string-to-integer-type-in-golang">Jak przekonwertować ciąg na typ liczby całkowitej w Golang?</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/javascript">JavaScript</a> </div> <div class="header-news__name"> <a href="http://pl.cyberaxe.org/article/how-to-run-typescript-in-vs-code">Jak uruchomić TypeScript w kodzie VS</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/html">html</a> </div> <div class="header-news__name"> <a href="http://pl.cyberaxe.org/article/how-to-create-html-bullet-points">Jak tworzyć punkty pocisków HTML?</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/powershell">PowerShell</a> </div> <div class="header-news__name"> <a href="http://pl.cyberaxe.org/article/can-you-explain-the-functionality-of-powershells-get-location-command">Czy możesz wyjaśnić funkcjonalność polecenia PowerShell Get-Lokal?</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-are-the-steps-to-launch-windows-powershell">Jakie są kroki, aby uruchomić Windows PowerShell</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> <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>