将点击事件添加到 iframe
Posted
技术标签:
【中文标题】将点击事件添加到 iframe【英文标题】：Add click event to iframe 【发布时间】：2013-02-11 09:05:40 【问题描述】：我想向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">
【问题讨论】：
你为什么不把它添加到left.html？ 我的页面上有几个 iframe。我希望该上下文菜单可以在它们之上展开。 【参考方案1】：您可以将点击附加到 iframe 内容：
$('iframe').load(function()
$(this).contents().find("body").on('click', function(event) alert('test'); );
);
注意：这只有在两个页面在同一个域中时才有效。
现场演示：http://jsfiddle.net/4HQc4/
【讨论】：
哦，我明白了。它仅在我单击文本时有效，但在页面上的其他位置无效。 当您单击 iframe 正文中的任何位置时，它会起作用。这是另一个将点击附加到窗口的示例：jsfiddle.net/4HQc4/1 Life 演示中的代码对我有用：$($("iframe")[0].contentWindow).on('contextmenu', function(e) alert('test'); );
也可以在这个 iframe 中的特定 DIV 上添加点击事件？我的 iframe 分为 2 个 div，只有其中一个是可点击的。
当然 :-) $(this).contents().find("#idOfTheClickableDiv")。 contents() 是 iframe 文档，从那里您可以在 iframe 中找到您想要的任何内容......前提是您不违反相同的来源政策。【参考方案2】：
两种解决方案：
-
在
.iframeWrapper 元素上使用:after
使用 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 不在您的域中）。 您只能在 'called into iframe' 页面内创建该函数，而不能在 iframe-hosting 页面内创建。
怎么做：
你可以包装你的iframe到一个div中
使用 CSS pointer-events:none; 使点击“通过”您的 iframe
在包装 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：
iframe 元素不会注册任何点击，因此一个用例是：如果通过单击 iframe 来将其放大全屏......等等...... 另外（由@Christophe 友情建议）IE8 对pointer-events 视而不见：\
【讨论】：
@Christophe doh，忘了说 IE 甚至无法正确处理position... :) （我们应该注意到这一点）；）开玩笑，谢谢
如何“释放”点击返回 iframe ？
@RickyLevi 我认为没有办法这样做。如果有的话，那将是一个安全/隐私问题。【参考方案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>
【讨论】：
将在 CORS 上被阻止【参考方案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。
iframe 真的不值得麻烦。
【讨论】：
【参考方案5】：实际的问题是，click 事件没有绑定到 iframe 的 DOM 并且 bind() 已被弃用，使用.on() 绑定事件。尝试使用以下代码，您会发现 iframe 的可点击边框会收到该警报。
$('#left').on('click', function(event) alert('test'); );
Demo of that Issue
那么如何完成呢？
您应该怎么做，在 iframe 页面上创建一个函数，然后从该 iframe 页面调用该函数。
【讨论】：
我明白了，谢谢。我只是想知道，为什么它似乎在上面提到的示例中有效 (***.com/questions/1609741/…)。 @RickyLevi，你有一个示例 JsFiddle 可以展示吗？ 我只是在评论中加载链接，然后单击 IFRAME，根据该代码 - 应该弹出一个警报（或者我可能误解了演示）......警报永远不会弹出。跨度>以上是关于将点击事件添加到 iframe的主要内容，如果未能解决你的问题，请参考以下文章