javascript 将 onClick 应用到 Iframe
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10071431/
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
Apply onClick to Iframe
提问by TheGateKeeper
Is there any way to "encapsulate" an Iframe with some other element to simulate onClick? I know the Iframe doesn't support events but I need to track clicks from my website that are leaving thru the Iframe.
有没有办法用其他一些元素“封装”一个 Iframe 来模拟 onClick？我知道 Iframe 不支持事件，但我需要跟踪从我的网站离开 Iframe 的点击次数。
Thanks!
谢谢！
回答by Shadow Wizard is Ear For You
If the frame contains page from the same domain (does not violate same-origin policy), you can interact directly with its document:
如果框架包含来自同一域的页面（不违反同源策略），您可以直接与其文档交互：
<script type="text/javascript">
window.onload = function() {
var oFrame = document.getElementById("myframe");
oFrame.contentWindow.document.onclick = function() {
alert("frame contents clicked");
};
};
</script>
If it contains external page then you're out of luck - no way to do what you want for obvious security reasons. Although all the contents is visually parts of the same page, frames coming from different domains must stay separate in terms of scripting. Otherwise any page could e.g. create a hidden iframe loading your webmail and steal your session cookie from it. All the data is accessible to the user, but it should not be accessible to the page author.
如果它包含外部页面，那么您就不走运了-出于明显的安全原因，无法做您想做的事情。尽管所有内容在视觉上都是同一页面的一部分，但来自不同域的框架在脚本方面必须保持独立。否则任何页面都可能创建一个隐藏的 iframe，加载您的网络邮件并从中窃取您的会话 cookie。用户可以访问所有数据，但页面作者不应访问这些数据。
回答by Gurmeet Singh
Try using: https://github.com/vincepare/iframeTracker-jquery
尝试使用：https: //github.com/vincepare/iframeTracker-jquery
Since it's impossible to read iframe content (DOM) from the parent page due to the same origin policy, tracking is based on the blur event associated to a page/iframe boundary monitoring system telling over which iframe is the mouse cursor at any time.
由于同源策略无法从父页面读取 iframe 内容 (DOM)，因此跟踪基于与页面/iframe 边界监控系统关联的模糊事件，随时告诉鼠标光标位于哪个 iframe。
Match the iframe elements you want to track with a jQuery selector and call iframeTracker with a callback function that will be called when a click on the iframe is detected :
将要跟踪的 iframe 元素与 jQuery 选择器匹配，并使用回调函数调用 iframeTracker，该回调函数将在检测到 iframe 上的单击时调用：
jQuery(document).ready(function($){
$('.iframe_wrap iframe').iframeTracker({
blurCallback: function(){
// Do something when the iframe is clicked (like firing an XHR request)
}
});
});
And many more options.
还有更多选择。
回答by Heres2u
The above script will work great for testing the click function in the iframe. More specifically, if you are using Google's newer analytics.jstracking code with event tracking to track clicks in the iframe, the above code would look like this:
上面的脚本非常适合测试 iframe 中的点击功能。更具体地说，如果您使用带有事件跟踪的Google 较新的analytics.js跟踪代码来跟踪 iframe 中的点击，则上述代码将如下所示：
<script type="text/javascript">
window.onload = function() {
var oFrame = document.getElementById("myframe");
oFrame.contentWindow.document.onclick = function() {
ga('send', 'event', 'link', 'click', 'My Frame Was Clicked');
};
};
</script>
and the iframe may look like this (note the id="myframe" is referenced in the javascript):
并且 iframe 可能如下所示（注意 id="myframe" 在 javascript 中被引用）：
<iframe id="myframe" src="http://www.yourowndomain.com" scrolling="yes" marginwidth="0" marginheight="0" vspace="0" hspace="0" height="800" style="border:0; overflow:hidden; width:100%;"></iframe>
Then to test the event click, if you are familiar with Google's event tracking, in the Google Analytics Dashboard under Standard Reports > Real-Time > Events a click would show up as Event Action: click, Event Label: My Frame Was Clicked. Or long term in the Dashboard under Behavior > Events.
然后测试事件点击，如果您熟悉谷歌的事件跟踪，在谷歌分析仪表板中的标准报告>实时>事件下，点击将显示为事件操作：点击，事件标签：我的框架被点击。或长期在仪表板中的行为 > 事件下。
I've tested this and as the previous poster indicated this will only work when the iframe source is on the same domain.
我已经对此进行了测试，并且正如之前的海报所指出的那样，这仅在 iframe 源位于同一域中时才有效。
