Порабощение 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 изменила алгоритм вывода, теперь ее можно легче открывать, например так:

jQuery(document).ready(function() {   
	jQuery('.help-btn').click(function() {
		$("#jvlabelWrap > jdiv > jdiv").click();  
	});   
});

Если знать ID фрейма то можно на его содержимое воздействовать так:

var iframeBody = $('body', $('#iframe')[0].contentWindow.document);
$(iframeBody).on('click', 'img', function(event) {
    doSomething();
});

iframe http на сайте htpps

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

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

[site-socialshare]