Как добавить событие клика в iframe с JQuery

Question

У меня есть фрейм на странице, созданный третьей стороной (рекламой). Я хотел бы вызвать событие click, когда этот iframe включается (чтобы записать некоторые внутренние статистические данные). Что-то вроде:

$('#iframe_id').click(function() {
    //run function that records clicks
});

.. на основе HTML:

<iframe id="iframe_id" src="http://something.com"></iframe>

Кажется, я не могу заставить это работать. Мысли?

Answer 1

Для iframe нет события onclick, но вы можете попытаться перехватить событие щелчка документа в iframe:

document.getElementById("iframe_id").contentWindow.document.body.onclick = 
function() {
  alert("iframe clicked");
}

EDIT Хотя это не решает проблему с несколькими сайтами, FYI jQuery был обновлен, чтобы хорошо работать с iFrames:

$('#iframe_id').on('click', function(event) { });

Обновление 1/2015 Ссылка на объяснение iframe была удалена, поскольку она больше не доступна.

Примечание Код выше не будет работать, если iframe из другого домена, чем страница хоста. Вы все еще можете попробовать использовать хаки, упомянутые в комментариях.

Answer 2

Попробуйте использовать это: Плагин iframeTracker jQuery , например:

jQuery(document).ready(function($){
    $('.iframe_wrap iframe').iframeTracker({
        blurCallback: function(){
            // Do something when iframe is clicked (like firing an XHR request)
        }
    });
});

Answer 3

Я пытался найти лучший ответ, который был бы более автономным, поэтому я начал думать о том, как JQuery выполняет события и пользовательские события. Так как click (из JQuery) - это просто любое событие, я подумал, что все, что мне нужно было сделать, это вызвать событие, учитывая, что по контенту iframe был нажат Таким образом, это было мое решение

$(document).ready(function () {
    $("iframe").each(function () {
        //Using closures to capture each one
        var iframe = $(this);
        iframe.on("load", function () { //Make sure it is fully loaded
            iframe.contents().click(function (event) {
                iframe.trigger("click");
            });
        });

        iframe.click(function () {
            //Handle what you need it to do
        });
    });
});

Answer 4

Это работает, только если фрейм содержит страницу из того же домена (делает не нарушать политику того же происхождения)

Смотрите это:

var iframe = $('#your_iframe').contents();

iframe.find('your_clicable_item').click(function(event){
   console.log('work fine');
});

Answer 5

Вы можете смоделировать событие фокусировки / щелчка, имея что-то вроде следующего. (адаптировано из события $ (окно) .blur, влияющего на Iframe )

$(window).blur(function () {
  // check focus
  if ($('iframe').is(':focus')) {
    console.log("iframe focused");
    $(document.activeElement).trigger("focus");// Could trigger click event instead
  }
  else {
    console.log("iframe unfocused");
  }                
});

//Test
$('#iframe_id').on('focus', function(e){
  console.log(e);
  console.log("hello im focused");
})

Answer 6

Вы можете использовать этот код для привязки щелчка по элементу, который находится в iframe.

jQuery('.class_in_iframe',jQuery('[id="id_of_iframe"]')[0].contentWindow.document.body).on('click',function(){	
	console.log("triggered !!")
});

Answer 7

Ни один из предложенных ответов не сработал для меня. Я решил аналогичный случай следующим образом:

<a href="http://my-target-url.com" id="iframe-wrapper"></a>
<iframe id="iframe_id" src="http://something.com" allowtrancparency="yes" frameborder="o"></iframe>

CSS (конечно, точное позиционирование должно меняться в соответствии с требованиями приложения):

#iframe-wrapper, iframe#iframe_id {
  width: 162px;
  border: none;
  height: 21px;
  position: absolute;
  top: 3px;
  left: 398px;
}
#alerts-wrapper {
  z-index: 1000;
}

Конечно, теперь вы можете поймать любое событие в iframe-обертке.

Answer 8

Вы можете решить эту проблему очень просто, просто поместите этот iframe в оболочку и отслеживайте клики по нему.

Как это:

<div id="iframe_id_wrapper"> <iframe id="iframe_id" src="http://something.com"></iframe> </div>

И отключить события указателя на самом iframe.

#iframe_id { pointer-events: none; }

После этих изменений ваш код будет работать как положено.

$('#iframe_id_wrapper').click(function() { //run function that records clicks });

Answer 9

Решение, которое работает для меня:

var editorInstance = CKEDITOR.instances[this.editorId];

            editorInstance.on('focus', function(e) {

                console.log("tadaaa");

            });

Answer 10

Это может быть интересно для людей, использующих Primefaces (который использует CLEditor):

document.getElementById('form:somecontainer:editor')
.getElementsByTagName('iframe')[0].contentWindow
.document.onclick = function(){//do something}

Я просто взял ответ от Traveling Tech Guy и немного изменил выбор ..;)