захватить нажмите на div, окружающий фрейм

Question

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

Answer 1

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

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

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

top.parentFunction();

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

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

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

Answer 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>

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

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

Answer 3

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

Вот их пример

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