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/sqlite">Sqlite</a> </div> <div class="white-news__name"> <a href="http://no.cyberaxe.org/article/what-are-sqlite-and-sqlite3-are-they-the-same">Hva er SQLite og SQLite3? Er de de samme?</a> </div> <div class="white-news__text"> SQLite er et databasebibliotek og SQLite3 er kommandolinjegrensesnittet som er nødvendig for å utfør... </div> <div class="white-news__author"> <a href="http://no.cyberaxe.org/author/daniel-berntsen">Daniel Berntsen</a> </div> </div> <div class="white-news white-news--article"> <div class="white-news__cat"> <a href="http://no.cyberaxe.org/category/php">PHP</a> </div> <div class="white-news__name"> <a href="http://no.cyberaxe.org/article/why-php-should-be-used-in-web-development">Hvorfor PHP skal brukes i nettutvikling</a> </div> <div class="white-news__text"> PHP er et godt valg for webutvikling på grunn av sin enkelhet, fleksibilitet, hastighet, gjenbrukbar... </div> <div class="white-news__author"> <a href="http://no.cyberaxe.org/author/daniel-johnsen">Daniel Johnsen</a> </div> </div> <div class="white-news white-news--article"> <div class="white-news__cat"> <a href="http://no.cyberaxe.org/category/c-programming">C programmering</a> </div> <div class="white-news__name"> <a href="http://no.cyberaxe.org/article/what-is-the-difference-between--and--operators-in-c-programming">Hva er forskjellen mellom = og == operatører i C -programmering?</a> </div> <div class="white-news__text"> = Operatøren brukes til å tilordne en verdi til en variabel, mens == operatøren sammenligner to vari... </div> <div class="white-news__author"> <a href="http://no.cyberaxe.org/author/elias-aalerud-aasen">Elias Aalerud Aasen</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/python-os-mkdir">Python OS Mkdir</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/windows-os">Windows OS</a> </div> <div class="header-news__name"> <a href="http://no.cyberaxe.org/article/what-is-the-difference-between-windows-top-10-home-and-pro">Hva er forskjellen mellom Windows Top 10 Home og Pro</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/how-are-volumes-defined-in-docker-compose-yaml">Hvordan er volumene definert i Docker Compose Yaml?</a> </div> <div class="header-news__author"> <a href="http://no.cyberaxe.org/author/tobias-andresen">Tobias Andresen</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://no.cyberaxe.org/category/php">PHP</a> </div> <div class="header-news__name"> <a href="http://no.cyberaxe.org/article/what-is-an-undefined-index-error-in-php-and-how-to-fix-it">Hva er en udefinert indeksfeil i PHP og hvordan du fikser den?</a> </div> <div class="header-news__author"> <a href="http://no.cyberaxe.org/author/mathias-halvorsen">Mathias Halvorsen</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-run-nginx-in-a-docker-container-on-ubuntu-top-10-top-10">Hva er trinnene for å kjøre Nginx i en Docker -beholder på Ubuntu Top 10.Topp 10?</a> </div> <div class="header-news__author"> <a href="http://no.cyberaxe.org/author/oskar-fossum">Oskar Fossum</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-are-the-differences-between-oracle-linux-and-ubuntu-linux">Hva er forskjellene mellom Oracle Linux og Ubuntu Linux?</a> </div> <div class="header-news__author"> <a href="http://no.cyberaxe.org/author/oskar-fossum">Oskar Fossum</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://no.cyberaxe.org/category/java">Java</a> </div> <div class="header-news__name"> <a href="http://no.cyberaxe.org/article/what-is-the-default-keyword-in-switch-statements">Hva er standard nøkkelord i Switch -setninger?</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/java">Java</a> </div> <div class="header-news__name"> <a href="http://no.cyberaxe.org/article/what-is-type-conversion-in-java">Hva er typekonvertering i Java?</a> </div> <div class="header-news__author"> <a href="http://no.cyberaxe.org/author/simen-stensrud">Simen Stensrud</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://no.cyberaxe.org/category/ms-sql-server">MS SQL Server</a> </div> <div class="header-news__name"> <a href="http://no.cyberaxe.org/article/what-is-mysql-rdbms-a-comprehensive-guide">Hva er mysql rdbms en omfattende guide</a> </div> <div class="header-news__author"> <a href="http://no.cyberaxe.org/author/mathias-halvorsen">Mathias Halvorsen</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-an-instance-and-how-to-use-it-in-ec2">Hva er en forekomst og hvordan du bruker den i EC2?</a> </div> <div class="header-news__author"> <a href="http://no.cyberaxe.org/author/tobias-andresen">Tobias Andresen</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>