Обнаружение события click внутри iframe

Я пишу плагин для TinyMCE и имею проблему с обнаружением событий click внутри iframe.

Из моего поиска я придумал следующее:

Загрузка iframe:

<iframe src='resource/file.php?mode=tinymce' id='filecontainer'></iframe>

HTML внутри iframe:

<input type=button id=choose_pics value='Choose'>

JQuery

//Detect click
$("#filecontainer").contents().find("#choose_pic").click(function(){
    //do something      
});

Другие сообщения, которые я видел, обычно имеют проблемы с разными доменами (это не так). Но, тем не менее, событие не обнаружено.

Можно ли сделать что-то подобное?

Ответы

Ответ 1

Я решил это, сделав вот так:

$('#filecontainer').load(function(){

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

        iframe.find("#choose_pics").click(function(){
               alert("test");
        });
});

Ответ 2

Я не уверен, но вы можете просто использовать

$("#filecontainer #choose_pic").click(function() {
    // do something here
});

Либо это, либо вы можете просто добавить тэг <script> в iframe (если у вас есть доступ к внутреннему коду), а затем использовать window.parent.DoSomething() в кадре с кодом

function DoSomething() {
    // do something here
}

в родительском. Если ни одна из них не работает, попробуйте window.postMessage. Вот некоторая информация об этом.

Ответ 3

API-интерфейс tinymce заботится о многих событиях в редакторе iframe. Я настоятельно рекомендую их использовать. Вот пример обработчика кликов

// Adds an observer to the onclick event using tinyMCE.init
tinyMCE.init({
   ...
   setup : function(ed) {
      ed.onClick.add(function(ed, e) {
           console.debug('Iframe clicked:' + e.target);
      });
   }
});

Ответ 4

Просто публиковать в случае, если это помогает кому-то. Для меня следующий код работал отлично:

$(document).ready(function(){
     $("#payment_status_div").hide();
     var iframe = $('#FileFrame').contents();
     iframe.find("#take_payment").click(function(){
         $("#payment_status_div").show("slow");
     });
});

Где "FileFrame" - это идентификатор iframe, а "take_payment" - это кнопка внутри iframe. Поскольку моя форма внутри iframe отправляется в другой домен, при использовании нагрузки я получил сообщение об ошибке:

Заблокировано кадр с источником " https://www.example.com" от доступа к кадру с исходным кодом https://secure-test.worldpay.com". Протоколы, домены и порты должны соответствовать.

Ответ 5

Я знаю, что это старый, но ID не соответствует вашему коду: select_pic, а один выберите_pics:

<input type=button id=choose_pics value='Choose'>

$("#filecontainer").contents().find("#choose_pic").click(function(){
    //do something      
});

Ответ 6

$("#iframe-id").load( function() {
    $("#iframe-id").contents().on("click", ".child-node", function() {
        //do something
    });
});

Ответ 7

В моем случае два jQuery, для внутреннего и внешнего HTML. У меня было четыре шага, прежде чем я мог приложить внутренние события:

ожидать, когда внешний jQuery будет готов
ожидание загрузки iframe
захватить внутренний jQuery
ожидание готовности внутреннего jQuery

$(function() {   // 1. wait for the outer jQuery to be ready, aka $(document).ready
    $('iframe#filecontainer').on('load', function() {   // 2. wait for the iframe to load
        var $inner$ = $(this)[0].contentWindow.$;   // 3. get hold of the inner jQuery
        $inner$(function() {   // 4. wait for the inner jQuery to be ready
            $inner$.on('click', function () {   // Now I can intercept inner events.
                // do something
            });
        });
    });
});

Хитрость заключается в использовании внутреннего jQuery для присоединения событий. Обратите внимание, как я получаю внутренний jQuery:

        var $inner$ = $(this)[0].contentWindow.$;

Мне пришлось выкинуть jQuery в объектную модель для него. Подход $('iframe').contents() в других ответах не работал в моем случае, потому что он остается с внешним jQuery. (И, кстати, возвращает contentDocument.)

Ответ 8

Если кто-то заинтересован в "быстрой воспроизводимой" версии принятого ответа, см. ниже. Кредиты другу, которого нет на SO. Этот ответ также может быть интегрирован в принятый ответ с редактированием,... (Он должен запускаться на локальном сервере).

<html>
<head>
<title>SO</title>
<meta charset="utf-8"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<style type="text/css">
html,
body,
#filecontainer {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<iframe src="http://localhost/tmp/fileWithLink.html" id="filecontainer"></iframe>

<script type="text/javascript">
$('#filecontainer').load(function(){

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

  iframe.find("a").click(function(){
    var test = $(this);
    alert(test.html());
  });
});
</script>
</body>
</html>

fileWithLink.html

<html>
<body>
<a href="#" onclick="location.href='https://stackoverflow.com/'; return false;">SOreadytohelp</a>
</body>
</html>