Question

我想向iframe添加点击事件。我用this example得到了这个：

$(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-hosting 页面内创建。

怎么做：

您可以将<{1}}打包到div
中
使用CSS iframe
点击“{1}}点击”
在您的包裹iframe（pointer-events:none;父元素）上使用jQuery定位点击次数

DIV

iframe

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

NOTA BENE：

iframe元素不会注册任何点击，因此一个用例就是：如果点击iframe你想要全屏放大......等等......

另外（@Christophe友善建议）IE8对.iframeWrapper{ display:inline-block; position:relative; } .iframeWrapper iframe{ vertical-align:top; pointer-events: none; /* let any clicks go trough me */ }视而不见：\

Answer 3

我让它工作，但只有在将其上传到主机后才能使用。我想localhost也可以正常工作。

<强>外

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

iframes真的不值得麻烦。

Answer 5

实际问题是，click事件不绑定到iframe的DOM并且不推荐使用bind（），使用.on()来绑定事件。尝试使用以下代码，您会发现iframe可点击的边框获得该警报。

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

Demo of that Issue

那么如何完成它？

您应该如何操作，在iframe页面上创建一个函数，并从该iframe页面调用该函数。

将Click事件添加到iframe

5 个答案:

1。使用`:after`

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

那么如何完成它？

将Click事件添加到iframe

5 个答案:

1。使用:after

2。使用pointer-events:none;

那么如何完成它？

1。使用`:after`

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