jQuery 将点击事件添加到 iframe
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15080222/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Add click event to iframe
提问by user1170330
I want to add a click event to an iframe. I used this exampleand got this:
我想将一个点击事件添加到iframe. 我使用了这个例子并得到了这个：
$(document).ready(function () {
$('#left').bind('click', function(event) { alert('test'); });
});
<iframe src="left.html" id="left">
</iframe>
But unfortunately nothing happens.
When I test it with another element (e.g. a button), it works:
但不幸的是什么也没有发生。
当我用另一个元素（例如按钮）测试它时，它可以工作：
<input type="button" id="left" value="test">
回答by Christophe
You could attach the click to the iframe content:
您可以将点击附加到 iframe 内容：
$('iframe').load(function(){
$(this).contents().find("body").on('click', function(event) { alert('test'); });
});
Note: this will only work if both pages are in the same domain.
注意：这仅在两个页面位于同一域中时才有效。
Live demo: http://jsfiddle.net/4HQc4/
现场演示：http: //jsfiddle.net/4HQc4/
回答by Roko C. Buljan
Two solutions:
两种解决方案：
- Using
:afteron a.iframeWrapperelement - Using
pointer-events:none;one the iframe
- 使用
:after一对.iframeWrapper元素 - 使用
pointer-events:none;一个 iframe
1. Using :after
1. 使用 :after
Quite straightforward. The iframe wrapper has a :after(transparent) pseudo element with higher z-index- that will help the wrapper to register the click:
很直接。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. Using pointer-events:none;
2. 使用 pointer-events:none;
Clicks are not handleable from outside the iframe from an external resource(if the iframe is not in your domain).
You can only create that function inside your 'called into iframe'page, not from within the iframe-hostingpage.
无法从外部资源的 iframe外部处理点击（如果 iframe 不在您的域中）。
您只能在“调用到 iframe”页面中创建该函数，而不能从iframe 托管页面中创建。
How to do it:
怎么做：
- You can wrapyour
iframeinto a div - make the click "go through" your
iframeusing CSSpointer-events:none; - target clicks with
jQueryon your wrappingDIV(theiframeparent element)
- 你可以把你的
iframe成一个div - 让点击“通过”你
iframe使用的 CSSpointer-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>NOTA BENE:
诺塔贝内：
- No clicks will be registered by the iframe element, so a use-case would be i.e: if by clicking the iframe you want to enlarge it full screen.... Etc...
- Also (kindly suggested by @Christophe) IE8 is blind to
pointer-events:\
- iframe 元素不会注册任何点击，因此用例将是：如果通过单击 iframe 您想将其放大全屏......等等......
- 另外（@Christophe 亲切地建议）IE8 对以下内容视而不见
pointer-events：\
回答by user1170330
I got it to work but only after uploading it to a host. I imagine localhost would work fine too.
我让它工作，但只有在将它上传到主机之后。我想 localhost 也能正常工作。
outer
外
<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>
inner
内
<html>
<head>
<style>
div {
padding:2px;
border:1px solid black;
display:inline-block;
}
</style>
</head>
<body>
<div>Click Me</div>
</body>
</html>
回答by Casey Dwayne
$(document).ready(function () {
$('#left').click(function(event) { alert('test'); });
});
<iframe src="left.html" id="left">Your Browser Does Not Support iframes</iframe>
The script would have to be ran entirely from the iframe. I would recommend a different method of calling content, such as php.
该脚本必须完全从 iframe 运行。我会推荐一种不同的调用内容的方法，例如 php。
iframes aren't really worth the hassle.
iframe 真的不值得麻烦。
回答by Starx
The actual problem is that, the click event does not bind to the DOM of the iframe and bind() is deprecated, use .on()to bind the event. Try with the following codes and you will find the borders of the iframe clickable getting that alert.
实际的问题是，点击事件没有绑定到 iframe 的 DOM 并且 bind() 被弃用，用于.on()绑定事件。尝试使用以下代码，您会发现 iframe 的边框可点击以获取该警报。
$('#left').on('click', function(event) { alert('test'); });
So how to get it done?
那么如何完成呢？
How you should do is, create a function on iframe page, and call that function from that iframe page.
你应该怎么做，在 iframe 页面上创建一个函数，然后从该 iframe 页面调用该函数。
