将 onClick 应用到 iframe答案

【问题标题】：Apply onClick to Iframe将 onClick 应用到 iframe
【发布时间】：2017-11-06 11:06:06
【问题描述】：

有没有办法用其他元素“封装”一个 iframe 来模拟 onClick？我知道 Iframe 不支持事件，但我需要跟踪来自我的网站的通过 Iframe 离开的点击。

谢谢！

【问题讨论】：

【解决方案1】：

如果框架包含来自同一域的页面（不违反same-origin policy），您可以直接与其文档交互：

<script type="text/javascript">
window.onload = function() {
    var oFrame = document.getElementById("myframe");
    oFrame.contentWindow.document.onclick = function() {
        alert("frame contents clicked");
    };
};
</script>

如果它包含外部页面，那么你就不走运了 - 出于明显的安全原因，无法做你想做的事。尽管所有内容在视觉上都是同一页面的一部分，但来自不同域的框架必须在脚本方面保持独立。否则任何页面都可以，例如创建一个隐藏的 iframe 加载您的网络邮件并从中窃取您的会话 cookie。用户可以访问所有数据，但页面作者不应访问。

【讨论】：

为什么是安全原因？内容显示在我的页面上。
@TheGateKeeper 内容将显示，但如果脚本在另一个域中，则无法访问内容。
@TheGateKeeper 看到 this 无法比这更好地解释了。
但从技术上讲，Iframe 上的内容不会出现在我的页面上吗？
@TheGateKeeper 是的，但是浏览器会阻止您访问它

【解决方案2】：

上面的脚本非常适合测试 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>

并且 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>

然后测试事件点击，如果您熟悉 Google 的事件跟踪，在 Google Analytics（分析）仪表板中的标准报告 > 实时 > 事件下，点击将显示为事件操作：点击，事件标签：我的框架是点击。或长期在仪表板中的行为 > 事件下。

我已经对此进行了测试，正如之前的海报所指出的那样，这仅在 iframe 源位于同一域中时才有效。

【讨论】：

【解决方案3】：

尝试使用：https://github.com/vincepare/iframeTracker-jquery

由于相同的来源政策，无法从父页面读取 iframe 内容 (DOM)，因此跟踪基于与页面/iframe 边界监控系统关联的模糊事件，从而判断哪个 iframe 是鼠标光标时间。

将您要跟踪的 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)
        }
    });
});

还有更多选择。

【讨论】：