检测里面的iframe点击事件(Detect click event inside iframe)

2019-06-21 05:26发布

我正在写TinyMCE的插件,并有检测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      
}); 

我见过的其他职位通常有不同域的问题(这还没有)。 但是,尽管如此,没有检测到事件。

可以像这样做呢?

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

如果不是这样,你可以只添加<script>标记到的iframe(如果你有机会到里面的代码),然后用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:

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 5:

刚刚发布的情况下,它可以帮助别人。 对我来说,下面的代码工作完美:

$(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 6:

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


Answer 7:

在我的情况有两个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 。)



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>

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


文章来源: Detect click event inside iframe