51

TinyMCE のプラグインを作成していますが、iframe 内のクリック イベントの検出に問題があります。

私の検索から、私はこれを思いつきました：

iframe を読み込んでいます:

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

iframe 内の HTML:

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

jQuery:

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

私が見た他の投稿では、通常、異なるドメインに問題があります (これはありません)。しかし、それでも、イベントは検出されません。

このようなことはできますか？

4

10 に答える 10

65

私は次のようにして解決しました：

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

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

        iframe.find("#choose_pics").click(function(){
               alert("test");
        });
});
于 2012-12-08T21:26:39.190 に答える
6

よくわかりませんが、単に使用できる場合があります

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

それか<script>、iframeにタグを追加して（内部のコードにアクセスできる場合）、window.parent.DoSomething()フレームでコードを使用して使用できます

function DoSomething() {
    // do something here
}

親で。これらのいずれも機能しない場合は、 を試してくださいwindow.postMessage。ここにいくつかの情報があります。

于 2012-11-18T10:32:37.973 に答える
4 
$("#iframe-id").load( function() {
    $("#iframe-id").contents().on("click", ".child-node", function() {
        //do something
    });
});
于 2016-12-27T11:36:08.080 に答える
4

これは古いことは知っていますが、コードで ID が一致しません。1 つはchoose_picで、1 つはchoose_picsです。

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

$("#filecontainer").contents().find("#choose_pic").click(function(){
    //do something      
});
于 2016-03-30T10:43:40.990 に答える
2

tinymce API は、エディターの 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);
      });
   }
});
于 2012-11-19T09:30:12.463 に答える
1

誰かに役立つ場合に備えて投稿するだけです。私にとって、次のコードは完璧に機能しました：

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

「FileFrame」は iframe の ID で、「take_payment」は iframe 内のボタンです。iframe 内のフォームが別のドメインに投稿されているため、load を使用すると、次のようなエラー メッセージが表示されました。

オリジンが「 https://www.example.com 」のフレームが、オリジンが「 https://secure-test.worldpay.com 」のフレームにアクセスするのをブロックしました。プロトコル、ドメイン、およびポートが一致する必要があります。

于 2015-08-20T13:54:13.910 に答える