为iframe添加onclick事件-白红宇的个人博客

为iframe添加onclick事件

发布日期：2021-09-30 18:10:56 浏览次数：17 分类：技术文章

本文共 1231 字，大约阅读时间需要 4 分钟。

假设我们做一个下拉框的功能，当鼠标在页面上的其它位置点击一下时，这个下拉框就隐藏掉了，通常在没有iframe时，这个功能很容易做，给document绑定onmousedown或onclick即可，如果页面上有iframe时，鼠标点击在iframe内时，包含iframe的document是不响应任何事件的，所以需要给iframe绑定类似的事件，当iframe指向的是第三方的内容时，还在考虑跨域的问题，因此通过操作iframe的document是行不通的，还好有document.activeElement可供我们使用，最终的解决方案如下：

var IframeOnClick = {
  	resolution: 200, 	iframes: [], 	interval: null, 	Iframe: function(element, cb) {
  		this.element =element; 		this.cb = cb; 		this.hasTracked = false; 	}, 	track: function(element, cb) {
  		this.iframes.push(new this.Iframe(element, cb)); 		if (!this.interval) {
  			var _this = this; 			this.interval = setInterval(function() { _this.checkClick(); }, this.resolution); 		} 	}, 	checkClick: function() {
  		if (document.activeElement) {
  			var activeElement = document.activeElement; 			for (var i in this.iframes) {
  				if (activeElement === this.iframes[i].element) { // user is in this Iframe 					if (this.iframes[i].hasTracked == false) { 						this.iframes[i].cb.apply(window, []); 						this.iframes[i].hasTracked = true; 					} 				} else {
  					this.iframes[i].hasTracked = false; 				} 			} 		} 	} }; //调用方法，选中iframe对象，和要绑定的事件 IframeOnClick.track(document.getElementById("iFrame"), function() { alert('a click'); });

转载地址：https://blog.csdn.net/iteye_10343/article/details/82650064 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！

上一篇：Mysql 数据库分析慢查询的方法

下一篇：MySQL性能优化的最佳经验

发表评论

关于作者

喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！

-- 愿君每日到此一游！

发表评论

最新留言

关于作者

推荐文章