阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      插件 jQuery.iframetracker 中文API文档

      插件 jQuery.iframetracker 中文API文档 https://github.com/vincepare/iframeTracker-jquery

      iframeTracker jQuery插件

      iframeTracker是一个jQuery插件,可以跟踪iframe的点击次数。

      这对以下内容非常有用:

      • 跟踪Google Adsense上的点击次数(谷歌使用iframe来展示广告)
      • 跟踪Facebook上的点击次数
      • 跟踪Youtube嵌入视频播放器的点击次数
      • ……和任何其他iframe!

      Try it now : demo.

      它是如何工作的 ?

      由于相同的原始策略不可能从父页面读取iframe内容(DOM),因此跟踪基于与页面/ iframe边界监视系统关联的模糊事件,告知哪个iframe随时都是鼠标光标

      如何使用 ?

      将要跟踪的iframe元素与jQuery选择器匹配,并iframeTracker使用将在检测到iframe上的点击时调用的回调函数调用:

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

      您也可以只传递一个函数,然后将其注册为blurCallback:

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

      高级跟踪

      jQuery(document).ready(function($){
      	$('.iframe_wrap iframe').iframeTracker({
      		blurCallback: function(event) {
      			// Do something when iframe is clicked (like firing an XHR request)
      			// You can know which iframe element is clicked via this._overId
      		},
      		overCallback: function(element, event) {
      			this._overId = $(element).parents('.iframe_wrap').attr('id'); // Saving the iframe wrapper id
      		},
      		outCallback: function(element, event) {
      			this._overId = null; // Reset hover iframe wrapper id
      		},
      		_overId: null
      	});
      });
      

      取消跟踪

      您可以通过.iframeTracker()使用false或调用以下内容来删除附加到iframe的跟踪器null:

      $('#iframe_red_1 iframe').iframeTracker(false);
      $('#iframe_red_2 iframe').iframeTracker(null);
      

      Full tutorial available here (it’s in French).

      Tested on jQuery 1.4.4 to 1.11.0, 2.1.4 & 3.2.1.


      Install

      With npm :

      npm install jquery.iframetracker
      

      With bower :

      bower install jquery.iframetracker
      

      About mobile devices

      此插件不适用于智能手机和平板电脑等移动设备,因为此硬件使用触摸屏而非鼠标作为点击输入。这种设计使边界监测技巧无效。

      目录
      目录