Добавить событие click в iframe

Я хочу добавить событие click к iframe. Я использовал этот пример и получил следующее:

$(document).ready(function () {
   $('#left').bind('click', function(event) { alert('test'); });
});

<iframe src="left.html" id="left">
</iframe>

Но, к сожалению, ничего не происходит. Когда я тестирую его другим элементом (например, кнопкой), он работает:

<input type="button" id="left" value="test">

Ответы

Ответ 1

Вы можете прикрепить клик к содержимому iframe:

$('iframe').load(function(){
  $(this).contents().find("body").on('click', function(event) { alert('test'); });
});

Примечание: это будет работать, только если обе страницы находятся в одном домене.

Live demo: http://jsfiddle.net/4HQc4/

Ответ 2

Два решения:

Использование :after в элементе .iframeWrapper
Используя pointer-events:none; один iframe

1. Используя `:after`

Совершенно просто. Оболочка iframe имеет :after (прозрачный) псевдоэлемент с более высоким z-индексом -, который поможет обертке зарегистрировать клик:

jQuery(function ($) { // DOM ready
  
   $('.iframeWrapper').on('click', function(e) {
     e.preventDefault();
     alert('test');
   });
  
});

.iframeWrapper{
  display:inline-block;
  position:relative;
}
.iframeWrapper:after{ /* I have higher Z-index so I can catch the click! Yey */
  content:"";
  position:absolute;
  z-index:1;
  width:100%;
  height:100%;
  left:0;
  top:0;
}

.iframeWrapper iframe{
  vertical-align:top;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="iframeWrapper">
  <iframe src="http://www.reuters.tv/" frameBorder="0"></iframe>
</div>

Ответ 3

Я получил его для работы, но только после его загрузки на хост. Я полагаю, что localhost тоже будет работать отлично.

внешняя

<html>
   <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script>
        $(document).ready(function() {
            var myFrame = document.getElementById("myFrame");
            $(myFrame.contentWindow.document).find("div").on("click", function () { alert("clicked"); });
        });
    </script>
    <body>
        <iframe id="myFrame" src="inner.htm"></iframe>
    </body>
</html>

внутренний

<html>
    <head>
        <style>
            div {
                padding:2px;
                border:1px solid black;
                display:inline-block;
            }
        </style>
    </head>
    <body>
        <div>Click Me</div>
    </body>
</html>

Ответ 4

$(document).ready(function () {
 $('#left').click(function(event) { alert('test'); });
});

<iframe src="left.html" id="left">Your Browser Does Not Support iframes</iframe>

script должен выполняться полностью из iframe. Я бы порекомендовал другой метод вызова контента, например php.

iframe на самом деле не стоят хлопот.

Ответ 5

Фактическая проблема заключается в том, что событие click не связывается с DOM iframe, а bind() устарел, используйте .on() для привязки события. Попробуйте со следующими кодами, и вы найдете границы iframe clickable, получая это предупреждение.

$('#left').on('click', function(event) { alert('test'); });

Демонстрация этой проблемы

Итак, как это сделать?

Как вы должны это сделать, создать функцию на странице iframe и вызвать эту функцию на этой странице iframe.