Hvordan endre iframe -kilde i JavaScript?

Daniel Johnsen

Mens du oppretter en webside eller nettstedet, er det et krav om å omdirigere sluttbrukeren til en annen webside for å få tilgang til relevant/søkte "innhold”. I tillegg til det, å gi forskjellige funksjonaliteter til brukeren samtidig dermed å gjøre tilgjengeligheten mulig. I slike tilfeller gjør det å endre IFrame -kilden i JavaScript underverker i å gi brukeren letthet når det gjelder tid og problem.

Denne bloggen vil forklare hvordan du endrer iframe -kilden i JavaScript.

Hva er en inline ramme?

En "inline ramme”Brukes til å inneholde et annet spesifisert dokument i det nåværende dokumentet. Dette resulterer i å bytte websidene basert på de angitte lenker.

Hvordan endre iframe -kilde i JavaScript?

IFRAME -kilde kan endres i JavaScript ved å bruke følgende tilnærminger sammen med "getElementById ()”Metode:

“Bestått parameter”Teknikk.
“SelectedIndex”Eiendom.

Tilnærming 1: Endre iframe -kilde i JavaScript ved hjelp av bestått parameterteknikk

Denne teknikken kan brukes til å bytte til den spesifiserte siden ved å plassere den tilsvarende sidelenken som funksjons parameter når du får tilgang til ved hjelp av en knapp.

Eksempel
La oss følge det under-uttalte eksemplet:

Endre iframe -kilden i JavaScript

I kodelinjene ovenfor, utfør følgende trinn:

Spesifiser den oppgitte lenken i "”Tag sammen med de justerte dimensjonene.
Opprett også en knapp med en vedlagt "ved trykk”Hendelse som omdirigerer til funksjonen endringIdrame () har den spesifiserte lenken som sin parameter.
Dette vil resultere i å lede siden til den oppgitte lenken på knappeklikk.

La oss fortsette til JavaScript -delen av koden:

I ovennevnte kodebit:

Erklære en funksjon som heter “bytteIFRAME ()”.
I sin definisjon får du tilgang til den spesifiserte lenken i "inline ramme”Element ved hjelp av“dokument.getElementById ()”Metode.
Etter det, bruk "src”Attributt og tildel den angitte lenken etter funksjonstilgang til den tilgjengelige lenken ved å bruke parameteren”endring”.
Dette vil resultere i å bytte sidene med hensyn til de spesifiserte koblingene på knappeklikket.

Produksjon

I outputten kan det observeres at sidene byttes ved å klikke på knappen.

Tilnærming 2: Endre iframe -kilde i JavaScript ved hjelp av SelectedIndex -egenskap

“SelectedIndex”Eiendom returnerer det valgte alternativets indeks i en rullegardinliste. Denne egenskapen kan brukes til å viderekoble til den spesifiserte koblingen med hensyn til verdien av det valgte alternativet fra rullegardinlisten.

Eksempel
La oss observere følgende eksempel:

I kodelinjene ovenfor, utfør følgende trinn:

Husk trinnet for å spesifisere den oppgitte lenken i "</strong>”Tag som har den spesifiserte”<strong>id</strong>”Og justerte dimensjoner.</li> <li>I neste trinn, inkluder "<strong>plukke ut</strong>”Element som har det spesifiserte”<strong>id</strong>”For å lage en rullegardinliste.</li> <li>Etter det, inneholde “<strong>alternativ</strong>”Element for å definere alternativets verdi. </li> <li>Spesifiser de angitte koblingene som “<strong>verdi</strong>”Av alternativelementet.</li> <li>Opprett også en knapp som har en "<strong>ved trykk</strong>”Arrangement som vil påkalle funksjonen ChangeIfframe ().</li> </ul> <p>La oss gå videre til JavaScript -delen av koden:</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>I ovennevnte kodebit:</p> <ul> <li>Definere en funksjon som heter “<strong>bytteIFRAME ()</strong>”. </li> <li>I sin definisjon får du tilgang til den spesifiserte “<strong>plukke ut</strong>”Element av dets“<strong>id</strong>" bruker "<strong>dokument.getElementById ()</strong>”Metode.</li> <li>I neste trinn, bruk "<strong>SelectedIndex</strong>" og "<strong>verdi</strong>”Egenskaper for å omdirigere til verdien i.e. lenke mot det tilsvarende valgte alternativet.</li> </ul> <p><strong>Produksjon</strong></p> <p>Fra output ovenfor er det tydelig at sidene bytter ordentlig med hensyn til "<strong>alternativer</strong>”Verdi på knappeklikk.</p> <p>Konklusjon</p> <p>“<strong>getElementById ()</strong>”Metode i kombinasjon med den passerte parameterteknikken eller“<strong>SelectedIndex</strong>”Eiendom kan brukes til å endre iframe -kilden i JavaScript. Den tidligere teknikken kan brukes til å omdirigere til den passerte lenken som funksjonens parameter på knappeklikket. Den sistnevnte tilnærmingen kan implementeres for å bytte til de tilsvarende koblingene med hensyn til det valgte alternativet fra rullegardinlisten. Denne opplæringen forklarer hvordan du endrer iframe -kilden i 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://no.cyberaxe.org/article/how-to-change-the-page-title-in-javascript">« Hvordan endre sidetittelen i JavaScript</a></li> <li class="prev-next__item prev-next__item--right"><a href="http://no.cyberaxe.org/article/how-to-change-discord-notification-sound-on-mobile">Hvordan du endrer uenighetsvarslingslyd på mobil? »</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://no.cyberaxe.org/category/c">C ++</a> </div> <div class="white-news__name"> <a href="http://no.cyberaxe.org/article/understanding-while-loop-in-c">Forståelse mens du er sløyfe i C ++</a> </div> <div class="white-news__text"> I C ++ mens (True) Loop er også kjent som en uendelig sløyfe. Den utfører kroppen til en sløyfe i ue... </div> <div class="white-news__author"> <a href="http://no.cyberaxe.org/author/mathias-halvorsen">Mathias Halvorsen</a> </div> </div> <div class="white-news white-news--article"> <div class="white-news__cat"> <a href="http://no.cyberaxe.org/category/golang">Golang</a> </div> <div class="white-news__name"> <a href="http://no.cyberaxe.org/article/what-is-range-keyword-in-golang">Hva er nøkkelord i Golang</a> </div> <div class="white-news__text"> I Golang løkker som for loop itererer gjennom elementene i en matrise, skiver, kanaler eller kart ve... </div> <div class="white-news__author"> <a href="http://no.cyberaxe.org/author/erik-roed">Erik Røed</a> </div> </div> <div class="white-news white-news--article"> <div class="white-news__cat"> <a href="http://no.cyberaxe.org/category/powershell">Kraftskall</a> </div> <div class="white-news__name"> <a href="http://no.cyberaxe.org/article/what-is-an-add-computer-in-powershell">Hva er en addatør i PowerShell?</a> </div> <div class="white-news__text"> Cmdlet “add-computer” legger den lokale datamaskinen til et domene. Hvis en datamaskin blir lagt til... </div> <div class="white-news__author"> <a href="http://no.cyberaxe.org/author/anders-fjeld-moe">Anders Fjeld Moe</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://no.cyberaxe.org/category/python">Python</a> </div> <div class="header-news__name"> <a href="http://no.cyberaxe.org/article/seaborn-axis-labels">Seaborn Axis -etiketter</a> </div> <div class="header-news__author"> <a href="http://no.cyberaxe.org/author/daniel-johnsen">Daniel Johnsen</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://no.cyberaxe.org/category/docker">Docker</a> </div> <div class="header-news__name"> <a href="http://no.cyberaxe.org/article/what-is-the-difference-between-docker-and-podman">Hva er forskjellen mellom Docker og Podman?</a> </div> <div class="header-news__author"> <a href="http://no.cyberaxe.org/author/daniel-johnsen">Daniel Johnsen</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://no.cyberaxe.org/category/salesforce">Salesforce</a> </div> <div class="header-news__name"> <a href="http://no.cyberaxe.org/article/salesforce-data-loader">Salesforce Data Loader</a> </div> <div class="header-news__author"> <a href="http://no.cyberaxe.org/author/elias-krogh-svendsen">Elias Krogh Svendsen</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://no.cyberaxe.org/category/html">html</a> </div> <div class="header-news__name"> <a href="http://no.cyberaxe.org/article/how-to-use-mouseevent-pagey-property">Hvordan bruke MouseEvent Pagey -eiendom?</a> </div> <div class="header-news__author"> <a href="http://no.cyberaxe.org/author/daniel-berntsen">Daniel Berntsen</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://no.cyberaxe.org/category/aws">Aws</a> </div> <div class="header-news__name"> <a href="http://no.cyberaxe.org/article/what-is-batch-process-and-how-to-use-it-in-aws">Hva er batchprosess og hvordan du bruker den i AWS?</a> </div> <div class="header-news__author"> <a href="http://no.cyberaxe.org/author/simen-odegard">Simen Ødegård</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://no.cyberaxe.org/category/docker">Docker</a> </div> <div class="header-news__name"> <a href="http://no.cyberaxe.org/article/what-are-the-steps-to-deploy-a-nginx-image-using-docker">Hva er trinnene for å distribuere et Nginx -bilde ved hjelp av Docker?</a> </div> <div class="header-news__author"> <a href="http://no.cyberaxe.org/author/daniel-berntsen">Daniel Berntsen</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://no.cyberaxe.org/category/oracle-database">Oracle Database</a> </div> <div class="header-news__name"> <a href="http://no.cyberaxe.org/article/what-is-the-purpose-of-oracle-cerner">Hva er formålet med Oracle Cerner?</a> </div> <div class="header-news__author"> <a href="http://no.cyberaxe.org/author/daniel-berntsen">Daniel Berntsen</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://no.cyberaxe.org/category/oracle-linux">Oracle Linux</a> </div> <div class="header-news__name"> <a href="http://no.cyberaxe.org/article/what-is-the-difference-between-oracle-virtualbox-and-vmware">Hva er forskjellen mellom Oracle VirtualBox og VMware?</a> </div> <div class="header-news__author"> <a href="http://no.cyberaxe.org/author/lars-solberg">Lars Solberg</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://no.cyberaxe.org/category/powershell">Kraftskall</a> </div> <div class="header-news__name"> <a href="http://no.cyberaxe.org/article/how-to-use-the-move-item-cmdlet-in-powershell">Hvordan du bruker flytting-elementet cmdlet i PowerShell?</a> </div> <div class="header-news__author"> <a href="http://no.cyberaxe.org/author/elias-krogh-svendsen">Elias Krogh Svendsen</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://no.cyberaxe.org/category/powershell">Kraftskall</a> </div> <div class="header-news__name"> <a href="http://no.cyberaxe.org/article/what-is-rename-item-command-in-powershell">Hva er kommando for å gi nytt navn i PowerShell?</a> </div> <div class="header-news__author"> <a href="http://no.cyberaxe.org/author/daniel-berntsen">Daniel Berntsen</a> </div> </div> </div> </div> </div> </div> <footer> <div class="container"> <div class="footer"> <div class="footer__about">Et nettsted om Linux-operativsystemet. Her finner du mange interessante artikler og nyttige guider</div> <div class="footer__cats"> <ul class="sub-menu"> <li class="menu-item"><a href="http://no.cyberaxe.org/category/python">Python</a></li> <li class="menu-item"><a href="http://no.cyberaxe.org/category/postgresql">PostgreSql</a></li> <li class="menu-item"><a href="http://no.cyberaxe.org/category/oracle-linux">Oracle Linux</a></li> <li class="menu-item"><a href="http://no.cyberaxe.org/category/c">C ++</a></li> <li class="menu-item"><a href="http://no.cyberaxe.org/category/windows-os">Windows OS</a></li> </li> </ul> </div> <div class="footer__cats"> <ul class="sub-menu"> <li class="menu-item"><a href="http://no.cyberaxe.org/category/docker">Docker</a></li> <li class="menu-item"><a href="http://no.cyberaxe.org/category/c-sharp">C skarp</a></li> <li class="menu-item"><a href="http://no.cyberaxe.org/category/r">R</a></li> <li class="menu-item"><a href="http://no.cyberaxe.org/category/oracle-database">Oracle Database</a></li> </li> <li class="menu-item"><a href="http://no.cyberaxe.org/all-categories"><b>Alle Kategorier</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>