假设我们做一个下拉框的功能,当鼠标在页面上的其它位置点击一下时,这个下拉框就隐藏掉了,通常在没有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'); });
分享到:
相关推荐
在项目中经常要动态添加iframe,然后再对添加的iframe进行相关操作,有时候会遇到iframe加载很慢什么原因呢,该如何解决呢?带着这个问题一起通过本文学习,寻找答案吧! aaa.html <HTML> <HEAD> <...
表单与操作页面分离,按钮按下,click 或者onclick事件触发,传递一个唯一性的参数至子页面JSP,感兴趣的朋友可以了解下
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 ...
-为TreeNode增加AutoPostBack属性,增加事件数据类TreeCheckEventArgs,为Tree增加事件NodeCheck。 -示例在:http://extasp.net/data/tree_run.aspx -Grid增加GetNoSelectionAlertInParentReference函数,用来...
// 将标注添加到地图中 MapControl.marker.enableDragging(); var infoWindow = new BMap.InfoWindow(MapControl.infoWinContent, MapControl.infoOpts); // 创建信息窗口对象 MapControl.marker...
-为TreeNode增加AutoPostBack属性,增加事件数据类TreeCheckEventArgs,为Tree增加事件NodeCheck。 -示例在:http://extasp.net/data/tree_run.aspx -Grid增加GetNoSelectionAlertInParentReference函数,用来...
可定义方块大小,添加随机动画 桌面图标自动排序 任务栏结合iframe子窗口, 与windows一致的窗口管理体验 开始菜单+消息提示中心,满足后台UI的设计需求极少的API 大部分功能可用html元素定义完成 响应式兼容,在...
*简单的window.open方法:<a href="#" onclick="javascript:window.open('文件路径/文件名', 'newwindow', 'toolbar=no,scrollbars=yes,resizable=no,top=0,left=0,width=400,height=300');">文字或图片 使用标签...
对象绑定事件 document.all.xxx.detachEvent("onclick",a); 插件数目 navigator.plugins 取变量类型 typeof($js_libpath) == "undefined" 下拉框 下拉框.options[索引] 下拉框.options.length 查找对象 ...
51.当超链和onCLICK事件都有时,则老版本的浏览器转向a.html,否则转向b.html.例: onclick="location.href='b.html';return false">dfsadf 52.JS的內建对象 有:Array,Boolean,Date,Error,EvalError,Function,Math,...
0.0.4中的更改:-为https站点上的链接添加了解决方法(无法在iframe中打开)。 而是在新标签页/窗口中打开)。 稍后要使用xhr进行测试,但可能必须保持这种方式。0.0.5中的更改:-切换到XHR,并进行清理。
0.0.4中的更改:-为https站点上的链接添加了解决方法(无法在iframe中打开)。而是在新标签页/窗口中打开)。稍后要使用xhr进行测试,但可能必须保持这种方式。0.0.5中的更改:-切换到XHR,并进行清理 HTTPS站点的...
// ad function dy(code) ...document.writeln ('<iframe width="120" height="24" frameborder="0" allowtransparency="true" marginwidth="0" marginheight="0" scrolling="no" border="0" src=...
response.write \"<script language=javascript>alert(\'添加成功!\');location.href(\'index.asp\');</script>\" end if %> -------------------------------------- 3.显示记录 set rs=server....