В этом блоге объясняется, как изменить источник iframe в JavaScript.
Что такое встроенный фрейм?
« встроенный фрейм ” используется для содержания другого указанного документа в текущем документе. Это приводит к переключению веб-страниц на основе указанных ссылок.
Как изменить источник iframe в JavaScript?
Источник iframe можно изменить в JavaScript, используя следующие подходы вместе с « получитьэлемент по идентификатору() метод:
- “ Переданный параметр Техника.
- “ выбранный индекс ' Имущество.
Подход 1: изменение источника iframe в JavaScript с использованием метода передачи параметров
Этот метод можно использовать для переключения на указанную страницу, поместив ссылку на соответствующую страницу в качестве параметра функции при доступе с помощью кнопки.
Пример
Давайте последуем приведенному ниже примеру:
< центр >< h2 > Изменить источник iframe в JavaScript h2 >
< идентификатор iframe знак равно 'веб-страница' источник знак равно 'ЦЭК352А57А5070А597C4A63F2A593E8367F8DAE5' ширина знак равно '1000' высота знак равно '550' рамка знак равно '0' прокрутка знак равно 'Нет' > iframe >
< бр >< бр >
< кнопка при нажатии знак равно 'changeIframe('https://linuxhint.com/category/linux-commands/')' > Нажмите, чтобы отобразить страницу команд Linux кнопка >
< бр > бр >
центр >
В приведенных выше строках кода выполните следующие шаги:
- Укажите указанную ссылку в поле « <внутренний кадр> ” вместе с скорректированными размерами.
- Кроме того, создайте кнопку с прикрепленным « по щелчку ” перенаправление события на функцию changeIframe(), имеющую в качестве параметра указанную ссылку.
- Это приведет к перенаправлению страницы на указанную ссылку при нажатии кнопки.
Перейдем к части кода JavaScript:
< тип сценария знак равно 'текст/javascript' >
функция изменитьIframe ( сдача ) {
документ. получитьэлементбиид ( 'веб-страница' ) . источник знак равно сдача ;
}
сценарий >
В приведенном выше фрагменте кода:
- Объявите функцию с именем « изменитьIframe() ».
- В его определении доступ к указанной ссылке в « встроенный фрейм ', используя элемент ' документ.getElementById() метод.
- После этого примените « источник » и выделять указанную ссылку при доступе функции к доступной ссылке с помощью параметра « сдача ».
- Это приведет к переключению страниц по указанным ссылкам при нажатии кнопки.
Выход
В приведенном выше выводе видно, что страницы переключаются при нажатии кнопки.
Подход 2: изменение источника iframe в JavaScript с использованием свойства selectedIndex
“ выбранный индекс » возвращает индекс выбранного параметра в раскрывающемся списке. Это свойство может быть применено для перенаправления на указанную ссылку относительно значения выбранного параметра из выпадающего списка.
Пример
Рассмотрим следующий пример:
< идентификатор iframe знак равно 'веб-страница' источник знак равно 'ЦЭК352А57А5070А597C4A63F2A593E8367F8DAE5' ширина знак равно '1000' высота знак равно '550' рамка знак равно '0' прокрутка знак равно 'Нет' > iframe >
< бр >< бр >
< выберите идентификатор знак равно 'ссылки' >
< стоимость опции знак равно 'https://linuxhint.com/auto-refresh-web-page-every-5-seconds-javascript/' > Перейти к статье 1
< стоимость опции знак равно 'https://linuxhint.com/convert-array-to-object-javascript/' > Перейти к статье два
Выбрать >
< бр >< бр >
< кнопка onClick знак равно 'изменить фрейм();' > Изменить источник iframe кнопка >
< бр >< бр >
тело > центр >
В приведенных выше строках кода выполните следующие шаги:
- Напомним шаг указания указанной ссылки в « ” с указанным “ я бы ” и скорректированные размеры.
- На следующем шаге включите « Выбрать ” элемент, имеющий указанный “ я бы », чтобы создать раскрывающийся список.
- После этого содержать « вариант ” для определения значения опции.
- Укажите указанные ссылки как « ценность » элемента option.
- Кроме того, создайте кнопку с надписью « по щелчку », которое вызовет функцию changeIframe().
Давайте перейдем к части кода JavaScript:
< тип сценария знак равно 'текст/javascript' >функция изменитьIframe ( ) {
был получить знак равно документ. получитьэлементбиид ( 'ссылки' ) ;
был падать знак равно получить . опции [ получить . выбранный индекс ] . ценность ;
документ. получитьэлементбиид ( 'веб-страница' ) . источник знак равно падать ;
}
сценарий >
В приведенном выше фрагменте кода:
- Определите функцию с именем « изменитьIframe() ».
- В его определении доступ к указанному « Выбрать ” элемент по его “ я бы ' с использованием ' документ.getElementById() метод.
- На следующем шаге примените « выбранный индекс ” и “ ценность » для перенаправления на значение, т. е. ссылку на соответствующую выбранную опцию.
Выход
Из приведенного выше вывода видно, что страницы переключаются правильно относительно « опции значение при нажатии кнопки.
Вывод
“ получитьэлемент по идентификатору() ” в сочетании с методом передачи параметров или методом “ выбранный индекс ” можно использовать для изменения источника Iframe в JavaScript. Первый метод можно использовать для перенаправления на переданную ссылку в качестве параметра функции при нажатии кнопки. Последний подход может быть реализован для перехода на соответствующие ссылки по отношению к выбранному варианту из выпадающего списка. В этом руководстве объясняется, как изменить источник iframe в JavaScript.