Доброго времени суток дорогие друзья в этой рубрике мы рассмотрим как работать с элементом iframe через javaScript.
Для начала давайте определимся что собой представляет элемент iframe. Элемент iframe представляет собой обычный DOM-элемент содержащий ссылку на внешний ресурс (какой либо сайт), его используют как правило для внедрения на текущую страницу других web-страниц, видео, различного рода карт(google, яндекс) и т.п.
Пример:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Работа с элементом iframe</title>
</head>
<body>
<iframe src="https://webfanat.com" frameborder="1" width="500" height="500"></iframe>
</body>
</html>В данном примере мы подгружаем на страницу мой блог точнее его главную страницу.
Как видите с помощью атрибута src мы указали сылку с адресом на блог, c помощью frameborder ="1" указали наличие рамки , width и heught - ширина и высота. Ну с этим я думаю все понятно.
Мы также работать с элементом iframe через сcылки, пример:
<a href="https://webfanat.com" target="myIframe">Главная</a>
<a href="https://webfanat.com/login" target="myIframe">Логин</a>
<a href="https://webfanat.com/support" target="myIframe">Обратная связь</a>
<a href="https://webfanat.com/signup" target="myIframe">Регистрация</a>
<br>
<iframe name="myIframe" width="500px" height="500px"></iframe>здесь как видите мы создали с помощью ссылок небольшую навигацию по моему блогу, при этом мы в самом iframe пути к ресурсу не указываем, а работаем через ссылки которые с помощью атрибута target ссылаются на имя нашего элемента iframe.
Имя элементу мы задаем через стандартный атрибут name.
Идем дальше и теперь давайте попробуем обратится к элементу iframe через javaScript, пишем код:
var iframe = document.querySelector('iframe');
console.log(iframe);здесь мы в консоль выводим элемент iframe и все его содержимое.
В консоли видим в самом элементе у нас находится свойство document раскрывая которое мы увидим исходный код страницы внешнего ресурса на который ссылается iframe, причем если мы перезагрузим нашу страницу ,то исходного кода в объекте уже не обнаружим, для этого придется закрыть страницу ,а затем открыть ее заново. Это связано с тем что содержимое iframe кешируется в браузере.
Мы также можем получить доступ к фрейму через свойство frames объекта window:
console.log(window.frames);в консоль возвращается массив с фреймами, если мы хотим получить доступ к нашему фрейму, через этот массив нам достаточно прописать:
console.log(window.frames[0]);Здесь мы получаем доступ к первому iframe, так как он у нас один мы успешно выполнили задачу. Да, кстати для того чтобы определить количество элементов iframe на странице мы можем воспользоваться свойством length объекта window
console.log(window.length);которое выведет нам количество фреймов на странице. В нашем случае это один.
Получая доступ к iframe через свойство frames мы также можем менять путь к ресурсу с помощью свойства location:
window.frames[0].location="https://online-convert.com";здесь мы поменяли путь и перешли на новый ресурс.
У объекта window также есть и другие свойства которые позволяют работать с фреймами , top - которое возвращает основное окно вкладку, parent - возвращает родительское окно, self - возвращает текущий объект.
Мы так же через объект window можем работать со свойствами стилей основного окна.
Пример:
window.top.document.body.style.backgroundColor = "gray";здесь мы нашему основному окну задали серый цвет.
Фреймы сейчас мало где используются, обычно только при подгрузке на страницу карт(google, яндекс), это связано прежде собой с развитием новых технологий api, ajax и т.п.
Но все же я хочу вас предостеречь от использования фреймов на ваших страницах сайта, так как они очень негативно влияют на сео-оптимизацию (ведь на другом ресурсе на которые вы ссылаетесь тоже есть заголовки и мета-описания). Тоже касается и стилизации фреймов, они могут отображаться в разных браузерах по своему.
На этом дорогие друзья данная статья подошла к концу. Надеюсь я смог донести до вас информацию и вы не раз еще ею воспользуетесь.
Я желаю вам успехов и удачи! Пока!
