在单击时应用于 Iframe

Apply onClick to Iframe

本文关键字：Iframe 应用于 单击      更新时间：2023-09-26

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

谢谢！

如果框架包含来自同一域的页面（不违反同源策略），则可以直接与其文档进行交互：

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

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

尝试使用： 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)
        }
    });
});

还有更多选择。

上面的脚本非常适合测试 iframe 中的单击功能。更具体地说，如果您使用 Google 较新的分析.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 源位于同一域时有效。

相关文章：