添加单击事件的iframe(Add click event to iframe)

我想一个点击事件添加到一个iframe 。我用这个例子中，得到了这一点：

$(document).ready(function () {
   $('#left').bind('click', function(event) { alert('test'); });
});

<iframe src="left.html" id="left">
</iframe>

但遗憾的是没有任何反应。
当我与其他元素（如按钮）进行测试，它的工作原理：

<input type="button" id="left" value="test">

Answer 1:

你可以附上点击iframe内容：

$('iframe').load(function(){
  $(this).contents().find("body").on('click', function(event) { alert('test'); });
});

注：如果这两个页面都在同一个域中才有效。

现场演示： http://jsfiddle.net/4HQc4/

Answer 2:

两种解决方案：

使用:after一对.iframeWrapper元素
使用pointer-events:none; 一个iframe中

1.使用`:after`

非常简单。 iframe的包装有:after （透明）伪具有较高z-index的元素-这将有助于包装注册请点击：

 jQuery(function ($) { // DOM ready $('.iframeWrapper').on('click', function(e) { e.preventDefault(); alert('test'); }); });

 .iframeWrapper{ display:inline-block; position:relative; } .iframeWrapper:after{ /* I have higher Z-index so I can catch the click! Yey */ content:""; position:absolute; z-index:1; width:100%; height:100%; left:0; top:0; } .iframeWrapper iframe{ vertical-align:top; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="iframeWrapper"> <iframe src="http://www.reuters.tv/" frameBorder="0"></iframe> </div>

2.使用`pointer-events:none;`

点击次数不能从外面的iframe 从可操作的外部资源 （如果iframe是不是在你的域）。
您只能创建一个功能你的'叫成的iframe页面里，而不是从iframe的托管页面内。

怎么做 ：

你可以用你iframe到一个div
使点击“经历”你的iframe使用CSS pointer-events:none;
目标点击次数jQuery你的包装DIV （该iframe父元素）

 jQuery(function ($) { // DOM ready $('.iframeWrapper').on('click', function(e) { e.preventDefault(); alert('test'); }); });

 .iframeWrapper{ display:inline-block; position:relative; } .iframeWrapper iframe{ vertical-align:top; pointer-events: none; /* let any clicks go trough me */ }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="iframeWrapper"> <iframe src="http://www.reuters.tv/" frameBorder="0"></iframe> </div>

请注意：

没有点击将iframe元素被注册，所以用例是即：如果通过单击IFRAME要放大全屏....等...
同时，（由好心建议@Christophe）IE8是盲目pointer-events ：\

Answer 3:

我得到它的工作，但只有它上传到主机后。我想象本地主机会工作也没关系。

外

<html>
   <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script>
        $(document).ready(function() {
            var myFrame = document.getElementById("myFrame");
            $(myFrame.contentWindow.document).find("div").on("click", function () { alert("clicked"); });
        });
    </script>
    <body>
        <iframe id="myFrame" src="inner.htm"></iframe>
    </body>
</html>

内

<html>
    <head>
        <style>
            div {
                padding:2px;
                border:1px solid black;
                display:inline-block;
            }
        </style>
    </head>
    <body>
        <div>Click Me</div>
    </body>
</html>

Answer 4:

$(document).ready(function () {
 $('#left').click(function(event) { alert('test'); });
});

<iframe src="left.html" id="left">Your Browser Does Not Support iframes</iframe>

该脚本将不得不从iframe中完全跑了。我会建议打电话的内容，如PHP的不同方法。

I帧是不是真的值得冒这个险。

Answer 5:

实际的问题是，单击事件不绑定到iframe和绑定的DOM（）已过时，使用.on()来绑定事件。用下面的代码试试，你会发现iframe中点击获得该警报的边界。

$('#left').on('click', function(event) { alert('test'); });

这个问题的演示

因此，如何把它做？

你如何应该做的是，创建适用于iframe页面上的功能，并呼吁从该iframe页面的功能。

文章来源: Add click event to iframe