Как добавить событие click в iframe с помощью JQuery

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

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

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

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

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

Ответ 1

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

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

ИЗМЕНИТЬ Хотя это не решает проблему вашего кросс-сайта, FYI jQuery обновлен, чтобы хорошо играть с iFrames:

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

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

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

Ответ 2

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

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

Ответ 3

Я пытался найти лучший ответ, который был более автономным, поэтому я начал думать о том, как JQuery выполняет события и настраиваемые события. Поскольку щелчок (из 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
        });
    });
});

Ответ 4

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

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

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

Ответ 5

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

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

Ответ 6

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

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

Ответ 7

Это может быть интересно для ppl с использованием Primefaces (который использует CLEditor):

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

В основном я только что взял ответ от Traveling Tech Guy и немного изменил выбор.;)

Ответ 8

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

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

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

                console.log("tadaaa");

            });