javascript - jQuery 点击跟踪不适用于 iFrame

Question

首先，这是我的代码:

<script type="text/javascript">
    $('#Advertisement-1').click(function () { 
        alert("Ad Clicked!"); 
    });
</script>

<div id="Advertisement-1">
    <!-- PBBG Ads Zone Code Begin -->
    <center>
        <iframe src='http://www.pbbgads.com/ad.php?z=429&bg=000000' width='468' height='67' marginwidth='0' marginheight='0' hspace='0' vspace='0' frameborder='0' scrolling='no'></iframe>
    </center>
    <!-- PBBG Ads Zone Code End -->
</div>

现在，我的问题是当我点击广告时，它没有发送提醒。它只是在新窗口中打开广告。有什么想法可以让点击事件起作用吗？

Answer 1

click事件不适用于 iframe，因为事件不会通过 <iframe> 冒泡。标记在 DOM 中的祖先。

相反，您可以使用 blur 事件来检测您的父页面何时失去焦点。 这个 jQuery 插件旨在跟踪对 iframe 的点击:https://github.com/finalclap/iframeTracker-jquery

它非常易于使用，只需使用选择器选择您的 iframe，并提供一个回调函数(将在点击 iframe 时触发):

jQuery(document).ready(function($){
    $('.iframe_wrap iframe').iframeTracker({
        blurCallback: function(){
            // Do something when iframe is clicked (like firing an XHR request)
        }
    });
});