`

为iframe添加onclick事件

 
阅读更多
假设我们做一个下拉框的功能,当鼠标在页面上的其它位置点击一下时,这个下拉框就隐藏掉了,通常在没有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'); });
分享到:
评论

相关推荐

    JS iFrame加载慢怎么解决

    在项目中经常要动态添加iframe,然后再对添加的iframe进行相关操作,有时候会遇到iframe加载很慢什么原因呢,该如何解决呢?带着这个问题一起通过本文学习,寻找答案吧! aaa.html <HTML> <HEAD> <...

    JSP跨iframe如何传递参数实现代码

    表单与操作页面分离,按钮按下,click 或者onclick事件触发,传递一个唯一性的参数至子页面JSP,感兴趣的朋友可以了解下

    JavaScript基础教程第8版

    8.2.7 onclick事件 165 8.3 表单事件处理 165 8.3.1 onsubmit事件 165 8.3.2 onreset事件 165 8.3.3 onchange事件 166 8.3.4 onselect事件 166 8.3.5 onclick事件 166 8.3.6 onblur事件 166 8.3.7 ...

    ExtAspNet v2.2.1 (2009-4-1) 值得一看

    -为TreeNode增加AutoPostBack属性,增加事件数据类TreeCheckEventArgs,为Tree增加事件NodeCheck。 -示例在:http://extasp.net/data/tree_run.aspx -Grid增加GetNoSelectionAlertInParentReference函数,用来...

    百度地图API调用_实现百度地图动态搜索、静态地图动态插入

    // 将标注添加到地图中 MapControl.marker.enableDragging(); var infoWindow = new BMap.InfoWindow(MapControl.infoWinContent, MapControl.infoOpts); // 创建信息窗口对象 MapControl.marker...

    ExtAspNet_v2.3.2_dll

    -为TreeNode增加AutoPostBack属性,增加事件数据类TreeCheckEventArgs,为Tree增加事件NodeCheck。 -示例在:http://extasp.net/data/tree_run.aspx -Grid增加GetNoSelectionAlertInParentReference函数,用来...

    仿Win10系统WIN10-UI系统PHP网站源码

    可定义方块大小,添加随机动画 桌面图标自动排序 任务栏结合iframe子窗口, 与windows一致的窗口管理体验 开始菜单+消息提示中心,满足后台UI的设计需求极少的API 大部分功能可用html元素定义完成 响应式兼容,在...

    HTML网页基本代码.pdf

    *简单的window.open方法:<a href="#" onclick="javascript:window.open('文件路径/文件名', 'newwindow', 'toolbar=no,scrollbars=yes,resizable=no,top=0,left=0,width=400,height=300');">文字或图片 使用标签...

    js使用小技巧

    对象绑定事件 document.all.xxx.detachEvent("onclick",a); 插件数目 navigator.plugins 取变量类型 typeof($js_libpath) == "undefined" 下拉框 下拉框.options[索引] 下拉框.options.length 查找对象 ...

    107个常用javascript语句

    51.当超链和onCLICK事件都有时,则老版本的浏览器转向a.html,否则转向b.html.例: onclick="location.href='b.html';return false">dfsadf 52.JS的內建对象 有:Array,Boolean,Date,Error,EvalError,Function,Math,...

    Asus Download Master Link Handler-crx插件

    0.0.4中的更改:-为https站点上的链接添加了解决方法(无法在iframe中打开)。 而是在新标签页/窗口中打开)。 稍后要使用xhr进行测试,但可能必须保持这种方式。0.0.5中的更改:-切换到XHR,并进行清理。

    华硕下载Master Link Handler「Asus Download Master Link Handler」-crx插件

    0.0.4中的更改:-为https站点上的链接添加了解决方法(无法在iframe中打开)。而是在新标签页/窗口中打开)。稍后要使用xhr进行测试,但可能必须保持这种方式。0.0.5中的更改:-切换到XHR,并进行清理 HTTPS站点的...

    图库新版jQuery焦点图 JS代码

    // ad function dy(code) ...document.writeln ('<iframe width="120" height="24" frameborder="0" allowtransparency="true" marginwidth="0" marginheight="0" scrolling="no" border="0" src=...

    asp连接数据库代码实例

    response.write \"<script language=javascript>alert(\'添加成功!\');location.href(\'index.asp\');</script>\" end if %> -------------------------------------- 3.显示记录 set rs=server....

Global site tag (gtag.js) - Google Analytics