将onClick应用于Iframe

时间:2012-04-09 09:38:53

标签: javascript html iframe

有没有办法用一些其他元素“封装”iframe来模拟onClick?我知道Iframe不支持活动,但我需要跟踪通过iframe离开我网站的点击次数。

谢谢!

3 个答案:

答案 0 :(得分:4)

如果框架包含来自同一域的页面(不违反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。用户可以访问所有数据,但页面作者不应该访问它。

答案 1 :(得分:2)

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

由于相同的原始策略无法从父页面读取iframe内容(DOM),因此跟踪基于与页面/ iframe边界监视系统关联的模糊事件,告知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)
        }
    });
});

还有更多选择。

答案 2 :(得分:1)

上述脚本非常适合测试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可能如下所示(注意javascript中引用了id =“myframe”):

<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的事件跟踪,请在标准报告&gt;下的Google Analytics信息中心中测试事件点击。实时&gt;点击事件将显示为事件操作:单击,事件标签:我的框架被单击。或者在行为&gt;下的仪表板中长期使用。事件

我已经对此进行了测试,因为之前的海报表明只有当iframe源位于同一个域时才能使用。