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

我知道这很旧,但您的代码中的 ID 不匹配,一个是choose_pic,一个是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 回答
4
$("#iframe-id").load( function() {
    $("#iframe-id").contents().on("click", ".child-node", function() {
        //do something
    });
});
于 2016-12-27T11:36:08.080 回答
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 中的表单已发布到不同的域,因此在使用加载时,我收到一条错误消息:

阻止来源为“ https://www.example.com ”的框架访问来源为“ https://secure-test.worldpay.com ”的框架。协议、域和端口必须匹配。

于 2015-08-20T13:54:13.910 回答
1

在我的例子中,有两个 jQuery,用于内部和外部 HTML。在附加内部事件之前,我有四个步骤:

  1. 等待外部 jQuery 准备好
  2. 等待 iframe 加载
  3. 抓取内部 jQuery
  4. 等待内部 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。)

于 2017-06-02T17:25:26.597 回答
1

如果有人对已接受答案的“快速重现”版本感兴趣,请参见下文。归功于不在 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>

文件WithLink.html

<html>
<body>
<a href="https://stackoverflow.com/">SOreadytohelp</a>
</body>
</html>
于 2017-09-07T10:02:54.197 回答
1

就我而言,我试图从父文档中触发一个自定义事件,并在子 iframe 中接收它,所以我必须执行以下操作:

var event = new CustomEvent('marker-metrics', {
    detail: // extra payload data here
});
var iframe = document.getElementsByTagName('iframe');
iframe[0].contentDocument.dispatchEvent(event)

并在 iframe 文档中:

document.addEventListener('marker-metrics', (e) => {
  console.log('@@@@@', e.detail);
});
于 2018-07-19T16:27:38.457 回答
1

尝试

 $('#yourIframeid').on("load", function () {
            $(this).contents().on("contextmenu, keydown, mousedown, mouseup, click", function (e) {
               //do your thing
            });
           
        });

$('#yourIframeid').on("load")如果 $('#yourIframeid').onload(不起作用,请使用 。

于 2021-03-01T05:43:44.180 回答