Блог веб разработки статьи | видеообзоры | исходный код

Блог веб разработки статьи | видеообзоры | исходный код

webfanat вконтакте webfanat youtube

iframe javaScript

iframe javaScript

Доброго времени суток дорогие друзья в этой рубрике мы рассмотрим как работать с элементом 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 и т.п.

Но все же я хочу вас предостеречь от использования фреймов на ваших страницах сайта, так как они очень негативно влияют на сео-оптимизацию (ведь на другом ресурсе на которые вы ссылаетесь тоже есть заголовки и мета-описания). Тоже касается и стилизации фреймов, они могут отображаться в разных браузерах по своему.

На этом дорогие друзья данная статья подошла к концу. Надеюсь я смог донести до вас информацию и вы не раз еще ею воспользуетесь.

Я желаю вам успехов и удачи! Пока!

Оцените статью:

Статьи

Разработки

Комментарии

В данном разделе пока нет комментариев!

Реклама

Запись экрана

Данное расширение позволяет записывать экран и выводит видео в формате webm