Trigger click on iframe

Я знаю политику одного и того же происхождения ... просто избавляюсь от этого.Trigger click on iframe

Во всяком случае, у меня есть слайд-шоу (slide.js), в котором есть встроенные видео. Когда пользователь нажимает на видео, я хочу, чтобы слайд-шоу приостанавливалось. События изнутри iframe не запускаются, поэтому я пытаюсь обойти это. Сейчас у меня есть частичное решение. Я обнаружить blur событие на window и если вновь сосредоточены элемент является iframe затем приостановить слайд-шоу:

$(window).blur(function(event){ 
    console.log(event.target); 
    if($('iframe').is(':focus')){ 
     //clicked inside iframe 
     console.log('test'); 
    } 
    console.log('document.activeElement is:'); 
    console.log(document.activeElement); 
    console.log('\n'); 
});

После загрузки страницы я получаю это в консоли:

document.activeElement is: 
BODY

Теперь часть что меня смущает. Событие click только запускает событие фокуса , когда я нажимаю где-то, кроме iframe, сначала. То есть, после загрузки страницы, если я непосредственно нажимаю на iframe, консоль не выполняет проверку журнала. Если я нажимаю либо вне рамки, либо на другой вкладке в браузере, или где-либо еще, событие blur будет срабатывать. После этого, если я нажимаю IFRAME, то я получаю тест в консоли:

После загрузки страницы, я нажимаю на другую вкладку затем вернуться к исходной позиции:

Window {top: Window, window: Window, location: Location, external: Object, chrome: Object…} 
document.activeElement is: 
<body class="full">...</body>

Затем я нажимаю IFRAME:

Window {top: Window, window: Window, location: Location, external: Object, chrome: Object…} 
test 
document.activeElement is: 
<iframe>...</iframe>

Почему ???

Я даже поставить это прежде всего, и это не помогло:

$(window).focus();

Однако, это работает, если я это сделать:

$('input').focus();

Если вход ориентирован, то я могу щелкните iframe и вызовите событие, не нажимая на что-либо еще заранее.

Помоги мне, ты моя единственная надежда ...

источник

2013-05-14 smilebomb

EDIT:

На самом деле, просто используя родной window.focus(), кажется, работает для меня:

FIDDLE

Как насчет добавления другого элемента, чтобы установить фокус:

$('<input>', {type: 'text', 
       style: 'top: -10000px; position: absolute', 
       autofocus:true} 
    ).appendTo('body') 
    .focus(); // just to make sure

FIDDLE

Если можно, я хотел бы добавить входной элемент с автофокусировкой непосредственно к разметке, этак Событие размытия всегда срабатывает при первом щелчке.

FIDDLE

источник

2013-05-14 18:16:53 adeneo

Спасибо за ваш ответ. На самом деле есть вход уже на странице, и я пробовал это раньше, и он работает, когда я фокусирую это в первую очередь. Его возможные другие формы с автофокусом могут конфликтовать с этим, так что это последнее решение. – smilebomb

@jefffabiny - отредактировал мой ответ, это работает для вас? – adeneo

Да, да. Я мог бы поклясться, что пробовал этот уже ... достаточно интересно, $ (window) .focus() не работает. Я отвечу на ваш ответ мгновенно. Сначала я хотел бы, чтобы кто-то попытался объяснить, почему так случилось. – smilebomb

Может быть обходной путь:

$(window).load(function() { 
    $('body').prop('tabindex', -1).focus(); 
});

источник

2013-05-14 18:09:28

В зависимости от того, какие услуги видео, которое вы используете, лучше всего было бы использовать их видео API. Затем вы получите , чтобы получить видео-события и точно знать, когда нужно приостановить и/или возобновить показ слайдов.

YouTube API (demo)

<script src="http://www.youtube.com/iframe_api"></script>

Vimeo API (хороший demo с использованием Froogaloop)

<script src="http://a.vimeocdn.com/js/froogaloop2.min.js"></script>

источник

2013-05-14 18:18:40 Mottie

Это потенциальное решение. Фактически мы используем обе эти услуги и потенциально больше в будущем. Так что это сработает, если я не смогу найти что-то лучше. Несмотря на это, мне очень любопытно, почему браузер ведет себя так. – smilebomb

Мне пришлось сделать это для [AnythingSlider] (http://css-tricks.github.io/AnythingSlider/video.html), когда я написал расширение видео. – Mottie

Trigger click on iframe

ответ

Смежные вопросы