Този блог ще обясни как да промените източника на iframe в JavaScript.
Какво е вградена рамка?
един „ вградена рамка ” се използва за съдържане на друг определен документ в текущия документ. Това води до превключване на уеб страниците въз основа на посочените връзки.
Как да промените източника на iframe в JavaScript?
Източникът на iframe може да бъде променен в JavaScript, като се използват следните подходи заедно с „ getElementById() ” метод:
- “ Предаден параметър ” Техника.
- “ selectedIndex ' Имот.
Подход 1: Променете източника на iframe в JavaScript с помощта на техника за предаване на параметри
Тази техника може да се използва за превключване към определена страница чрез поставяне на връзката към съответната страница като параметър на функция, когато се достъпва с помощта на бутон.
Пример
Нека проследим примера по-долу:
< център >< h2 > Променете източника на iframe в JavaScript h2 >
< iframe id = 'уеб страница' src = 'https://linuxhint.com/detect-tab-key-javascript/' ширина = '1000' височина = '550' граница на рамката = '0' превъртане = 'Не' > iframe >
< бр >< бр >
< бутон при щракване = 'changeIframe('https://linuxhint.com/category/linux-commands/')' > Щракнете, за да се покаже страницата с команди на Linux бутон >
< бр > бр >
център >
В горните редове код изпълнете следните стъпки:
- Посочете посочената връзка в „ <вградена рамка> ” заедно с коригираните размери.
- Освен това създайте бутон с прикачен „ onclick ” събитие, пренасочващо към функцията changeIframe() с указаната връзка като неин параметър.
- Това ще доведе до насочване на страницата към посочената връзка при натискане на бутона.
Нека продължим към JavaScript частта от кода:
< тип скрипт = 'текст/javascript' >
функция changeIframe ( промяна ) {
документ. getElementById ( 'уеб страница' ) . src = промяна ;
}
сценарий >
В горния кодов фрагмент:
- Декларирайте функция с име ' changeIframe() ”.
- В неговата дефиниция достъп до посочената връзка в „ вградена рамка ' елемент с помощта на ' document.getElementById() ” метод.
- След това приложете „ src ” и разпределете посочената връзка при достъп на функцията до достъпната връзка с помощта на параметъра „ промяна ”.
- Това ще доведе до превключване на страниците по отношение на посочените връзки при натискане на бутона.
Изход
В горния резултат може да се види, че страниците се превключват при щракване върху бутона.
Подход 2: Променете източника на iframe в JavaScript с помощта на свойството selectedIndex
„ selectedIndex ” връща индекса на избраната опция в падащ списък. Това свойство може да се приложи за пренасочване към посочената връзка по отношение на стойността на избраната опция от падащия списък.
Пример
Нека да разгледаме следния пример:
< iframe id = 'уеб страница' src = 'https://linuxhint.com/detect-tab-key-javascript/' ширина = '1000' височина = '550' граница на рамката = '0' превъртане = 'Не' > iframe >
< бр >< бр >
< изберете id = 'връзки' >
< стойност на опцията = 'https://linuxhint.com/auto-refresh-web-page-every-5-seconds-javascript/' > Преминете към Статия 1
< стойност на опцията = 'https://linuxhint.com/convert-array-to-object-javascript/' > Преминете към Статия две
изберете >
< бр >< бр >
< бутон върху Щракнете = 'changeIframe();' > Промяна на iframe Src бутон >
< бр >< бр >
тяло > център >
В горните редове код изпълнете следните стъпки:
- Спомнете си стъпката за посочване на посочената връзка в „