/ Сайтостроение / Адаптивность / Порабощение iFrame

Порабощение iFrame

Технология iFrame и все что с ней связано.

Элемент iframe создаёт встроенный фрейм, который находится внутри обычного документа, он позволяет загружать в область заданных размеров любые другие независимые документы.

Результат запроса в iframe

<form action="https://opttour.ru" target="area" method="post">
<p><input type="text" name="s" class="" id="s" placeholder="Поиск" /></p>
<p><input type="submit" value="Отправить" id="test-btn"></p>
</form>

Результат будет выводится во фрейме

<iframe src="https://opttour.ru/?s=" name="area" width="640" height="480"></iframe>

На данном сайте сделан в виде всплывающего окна.

Использовал данный метод в функционале «Бронирование номера» с всплывающим окном

Изменить css во фрейме

Квест: надо к встроенному в страницу iframe’у подцепить свои стили css.
Предполагаемый вариант, сделать это с помощью скрипта:

var cssLink = document.createElement("link") 
cssLink.href = "file://path/to/style.css"; 
cssLink .rel = "stylesheet"; 
cssLink .type = "text/css"; 
frames['iframe'].document.body.appendChild(cssLink);

либо этого

var $head = $("iframe").contents().find("head");                
$head.append($("", 
    { rel: "stylesheet", href: "file://path/to/style.css", type: "text/css" }));

Ссылка на видео

При вставке ссылки на видео в iframe возникает проблема:
Refused to display ‘https://vimeo.com/’ in a frame because it set ‘X-Frame-Options’ to ‘sameorigin’

Данная проблема решается изменением url ссылки.
для youtube
перед выводом ссылки добавляем https://www.youtube.com/embed/ и после только окончание ссылки yRdKq_-FJPs (после watch?v=)
для vimeo
перед выводом ссылки добавляем http://player.vimeo.com/video/ и после только окончание ссылки 62882435 (после https://vimeo.com/)

jQuery воздействие на объект в iFrame

Если создать функцию воздействия напрямую — это ничего не даст:

$(document).ready(function() { 
setTimeout(function(){ $("#jivo-label-inner-text").click(); }, 10000);
});

Нужно сначала найти этот объект во фрейме:

$(document).ready(function() { 
setTimeout(function(){ $("#jivo_container").contents().find("#jivo-label-inner-text").click(); }, 10000);
});

Эта функция — открытие формы обратной связи/чата Jivosite через 10 секунд посещения страницы. Данная функция не доступна в бесплатной версии.

iframe http на сайте htpps

Если на сайт работает по протоколу https:// то браузеры будут блокировать iframe с адресами незащищенного http:

http — http — позволяется
http — https — позволяется
https — http — НЕ позволяется
https — https — позволяется

Поделится информацией с друзьями

  • Комментарии
  • Вложения

Добавить комментарий

Пока нет комментариев. Будь первым!

Порабощение iFrame
Блочная верстка сайта
Рекомендации для васБлочная верстка сайтаOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.