检测 iframe 内的点击事件

Question

我正在为 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      
});

我见过的其他帖子通常在不同的域中都有问题（这没有）。 但是，仍然没有检测到该事件。

可以做这样的事情吗？

Answer 1

我通过这样做解决了它：

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

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

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

Answer 2

我不确定，但你可以使用

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

或者你可以在 iframe 中添加一个<script>标签（如果你可以访问里面的代码），然后在框架中使用window.parent.DoSomething()和代码

function DoSomething() {
    // do something here
}

在父级。 如果这些都不起作用，请尝试window.postMessage 。 这里有一些关于这方面的信息。

Answer 3

我知道这是旧的，但代码中的 ID 不匹配，一个是choose_pic一个是choose_pics ：

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

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

Answer 4

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

Answer 5

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);
      });
   }
});

Answer 6

只是张贴以防它对某人有帮助。 对我来说，以下代码工作完美：

$(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 ”。 协议、域和端口必须匹配。

Answer 7

就我而言，内部和外部 HTML 有两个 jQuery 。 在附加内部事件之前，我有四个步骤：

等待外部 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 。）

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

文件链接.html

<html>
<body>
<a href="https://stackoverflow.com/">SOreadytohelp</a>
</body>
</html>

Answer 9

就我而言，我试图从父文档触发自定义事件，并在子 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);
});

Answer 10

尝试

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

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

检测 iframe 内的点击事件

问题描述

10 个解决方案

解决方案1
65 已采纳 2012-12-08 21:26:39

解决方案2
6 2012-11-18 10:32:37

解决方案3
4 2016-03-30 10:43:40

解决方案4
4 2016-12-27 11:36:08

解决方案5
2 2012-11-19 09:30:12

解决方案6
1 2015-08-20 13:54:13

解决方案7
1 2017-06-02 17:25:26

解决方案8
1 2017-09-07 10:02:54

解决方案9
1 2018-07-19 16:27:38

解决方案10
1 2021-03-01 05:43:44

检测 iframe 内的点击事件

问题描述

10 个解决方案

解决方案1 65 已采纳 2012-12-08 21:26:39

解决方案2 6 2012-11-18 10:32:37

解决方案3 4 2016-03-30 10:43:40

解决方案4 4 2016-12-27 11:36:08

解决方案5 2 2012-11-19 09:30:12

解决方案6 1 2015-08-20 13:54:13

解决方案7 1 2017-06-02 17:25:26

解决方案8 1 2017-09-07 10:02:54

解决方案9 1 2018-07-19 16:27:38

解决方案10 1 2021-03-01 05:43:44

解决方案1
65 已采纳 2012-12-08 21:26:39

解决方案2
6 2012-11-18 10:32:37

解决方案3
4 2016-03-30 10:43:40

解决方案4
4 2016-12-27 11:36:08

解决方案5
2 2012-11-19 09:30:12

解决方案6
1 2015-08-20 13:54:13

解决方案7
1 2017-06-02 17:25:26

解决方案8
1 2017-09-07 10:02:54

解决方案9
1 2018-07-19 16:27:38

解决方案10
1 2021-03-01 05:43:44