Захват нажмите на div, окружающий iframe

Как я могу захватить событие click или mousedown на div, окружающем iframe. Я попытался подключить funciton к событию click на div, но поскольку iframe никогда не пузырится событие до окружающего div, функция никогда не вызывается. Есть ли способ, который я могу захватить событие в div, а затем распространить его на iframe для действия по умолчанию.

Ответы

Ответ 1

Если щелчок находится в области iframe, контекст iframe обрабатывает событие клика, он не переходит к родительскому элементу iframe. Таким образом, div никогда не зарегистрирует событие click вообще, если это произошло в области iframe.

Кроме того, если iframe содержит страницу, которая не принадлежит к тому же домену, что и родитель iframe, любое взаимодействие запрещено (re. та же самая политика происхождения).

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

top.parentFunction();

Итак, в iframe вы добавляете прослушиватель событий, который делегирует родительскому элементу iframe (доступный с помощью ссылки top.

Распространение событий намного сложнее, поэтому я просто перейду к библиотеке Diego Perini NWEvents. Я считаю, что его система событий является одной из лучших, и он особенно относится к взаимодействию iframe.

Я, конечно же, не стал бы писать собственный код, чтобы достичь этого, это может быть легко проектом продолжительностью в один год, если вы хотите сделать это правильно и даже тогда уступите работу Диего.

Ответ 2

Нет никакого "хорошего" способа сделать это, но если вам действительно нужно обнаружить щелчок на Iframe, вы можете сделать это в последних браузерах.

<iframe src="http://mtw-ed.com/" id="iframe" style=""></iframe>

<script type="text/javascript">
var inIframe = false;
function checkClick() {
    if (document.activeElement 
      && document.activeElement === document.getElementById("iframe")) {
        if (inIframe == false) {
            alert("iframe click");
            inIframe = true;
        }
    } else
        inIframe = false;
}
setInterval(checkClick, 200);
</script>

Этот script будет проверять каждые 200 мс независимо от того, находится ли пользователь в IFrame. Конечно, они, возможно, не нажали на Iframe, чтобы добраться туда, но я боюсь, что это лучшее, что вы можете сделать без решения @BGerrissen.

Он обнаружит только первый 'click', если вы не выйдете еще раз. Он работает только в действительно современных браузерах.

Ответ 3

Вы можете использовать библиотеку, например porthole, чтобы передавать сообщения между родителем и iframe, даже через домены. Использование этого не будет точно разворачивать событие (вы не сможете получить объект события), но вы можете создать свое собственное событие в виде простого сообщения, а затем обработать его в родительском клиенте.

Вот их пример

Однако, я использовал ответ Брендона, поскольку он проще работает для моей текущей потребности.