将点击事件添加到 iframe
[英]Add click event to iframe
问题描述
I want to add a click event to an iframe .
我想将点击事件添加到iframe 。 I used this example and got this:我使用了这个例子并得到了这个：
$(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 (eg a button), it works:当我用另一个元素（例如按钮）测试它时，它可以工作：
<input type="button" id="left" value="test">
6 个解决方案
解决方案1
31 已采纳 2013-02-26 03:02:01
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/
解决方案2
21 2013-02-26 02:19:17
Two solutions:两种解决方案：
- Using
:afteron a.iframeWrapperelement在.iframeWrapper元素上使用:after - Using
pointer-events:none;使用pointer-events:none;one the iframe一个 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 包装器有一个具有更高 z-index的:after （透明）伪元素 - 这将有助于包装器注册点击：
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).来自外部资源的 iframe 外部的点击无法处理（如果 iframe 不在您的域中）。
You can only create that function inside your 'called into iframe' page, not from within the iframe-hosting page.您只能在“调用 iframe”页面中创建该函数，而不是在iframe 托管页面中创建该函数。
How to do it :怎么做：
- You can wrap your
iframeinto a div您可以将iframe包装到 div 中 - make the click "go through" your
iframeusing CSSpointer-events:none;使用 CSS pointer-events:none;使点击“通过”您的iframe； - target clicks with
jQueryon your wrappingDIV(theiframeparent element)在包装DIV（iframe父元素）上使用jQuery进行目标点击
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 ie: if by clicking the iframe you want to enlarge it full screen.... Etc... iframe 元素不会注册任何点击，因此一个用例是 ie：如果通过单击 iframe 您想将其放大全屏......等等......
- Also (kindly suggested by @Christophe) IE8 is blind to
pointer-events:\另外（@Christophe 建议）IE8 对pointer-events视而不见：\
解决方案3
1
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>
解决方案4
0 2013-02-26 02:32:17
$(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.该脚本必须完全从 iframe 运行。 I would recommend a different method of calling content, such as php.我会推荐另一种调用内容的方法，例如 php。
iframes aren't really worth the hassle. iframe 真的不值得麻烦。
解决方案5
0 2013-02-26 02:35:39
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.实际的问题是，click 事件没有绑定到 iframe 的 DOM 并且 bind() 已被弃用，使用.on()来绑定事件。 Try with the following codes and you will find the borders of the iframe clickable getting that alert.尝试使用以下代码，您会发现 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 页面调用该函数。
解决方案6
0 2022-06-29 13:59:01
Pure Javascript纯Javascript
Not my solution but only this works well.不是我的解决方案，但只有这个效果很好。
let myConfObj = {
iframeMouseOver : false
}
window.addEventListener('blur',function(){
if(myConfObj.iframeMouseOver){
console.log('Wow! Iframe Click!');
}
});
document.getElementById('YOUR_CONTAINER_ID').addEventListener('mouseover',function(){
myConfObj.iframeMouseOver = true;
});
document.getElementById('YOUR_CONTAINER_ID').addEventListener('mouseout',function(){
myConfObj.iframeMouseOver = false;
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.