JS如何为iframe添加onclick事件
如果页面上有iframe时,鼠标点击在iframe内时,包含iframe的document是不响应任何事件的,
例如:
$("#iframe1").click(function(){//点击iframe
alert("点击1");
});
或者
$(function(){//给iframe循环绑定click事件
for(var n=1;n<=7;n++){
$("#iframe"+n).bind("click",{n:n}, clickHandler);
}
function clickHandler(event) {
var n = event.data.n;
alert("点击"+n);
}
});
均行不通。
所以需要给iframe绑定类似的事件,当iframe指向的是第三方的内容时,还要考虑跨域的问题,因此通过操作iframe的document是行不通的,还好有document.activeElement可供我们使用,最终的解决方案如下:
var IframeOnClick = {
resolution: 200,
iframes: [],
interval: null,
Iframe: function() {
this.element = arguments[0];
this.cb = arguments[1];
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;
}
}
}
}
};
调用方法:
//页面加载添加
$(document).ready(function(){
IframeOnClick.track(document.getElementById("iFrame"), function() { alert('a click'); });
})
JS如何为iframe添加onclick事件的更多相关文章
- 为iframe添加onclick事件
如果页面上有iframe时,鼠标点击在iframe内时,包含iframe的document是不响应任何事件的, 例如: $("#iframe1").click(function() ...
- jq动态添加onclick事件在谷歌中不起作用
$("#oa-bed-rooType").append($('<option/>').val(0).text('请选择房间类型')); $('#oa-bed-roomT ...
- a 标签添加 onclick 事件
a 标签添加 onclick 事件 <a href="javascript:void(0);" οnclick="js_method()">点击&l ...
- js 注册控件的onclick事件
今天做了一个全选功能:1.点击全选,全部选中.选中状态再点击全选,全部取消选中2.点击成员,判断是否成员全部选中,true:全选为选中状态,false:全选为未选中状态. 使用js是比较麻烦的就是如何 ...
- js 页面无滚动条添加滚轮事件
当页面无滚动条时,滑动滚轮时window.onscroll事件不会相应,此时应该去添加滚轮事件 var MouseWheelHandler=function(e){ e.preventDefault( ...
- HTML中在a标签中添加onclick事件
1.链接的onclick 事件被先执行,其次是href属性下的动作; 2.假设链接中同时存在href 与onclick,如果想让href 属性下的动作不执行,onclick 必须得到一个false的返 ...
- 利用事件的冒泡特性,为子标签添加Onclick事件
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- js为元素添加onclick事件
$("div.manu a:last").on('click',function(){ if (page == totalPage) { return; } page = page ...
- 原生js遍历每一个对象,给每一个对象添加onclick事件
<script type="text/javascript"> window.onload = function () { var imgs = document.im ...
随机推荐
- 【19.46%】【codeforces 551B】ZgukistringZ
time limit per test2 seconds memory limit per test256 megabytes inputstandard input outputstandard o ...
- AJAX简介(转)
AJAX全称为“Asynchronous JavaScript and XML”(异步JavaScript和XML),是一种创建交互式网页应用的网页开发技术.它使用:使用XHTML+CSS来表示信息: ...
- C# Tuple VS ValueTuple
C# Tuple VS ValueTuple(元组类 VS 值元组) C# 7.0已经出来一段时间了,大家都知道新特性里面有个对元组的优化:ValueTuple.这里利用详尽的例子详解Tuple VS ...
- PCI的imagework已由freeview软件代替
作者:朱金灿 来源:http://blog.csdn.net/clever101 在PCI 9.1中重要模块集成显示环境imagework还存在,但是到了PCI 10.0中imagework已经消失了 ...
- 【poj3690】Constellations 哈希
传送门 题目分析 考虑将大矩阵的每个1*q矩阵哈希值求出,然后让小矩阵的第一行在大矩阵中找,如果找到,并且能匹配所有行则出现过.否则没出现过. 在初始化1*q矩阵时可以进行优化:假设该行为123456 ...
- spark rdd持久化的简单对比
未使用rdd持久化 使用后 通过对比可以发现,未使用RDD持久化时,第一次计算比使用RDD持久化要快,但之后的计算显然要慢的多,差不多10倍的样子 代码 public class PersistRDD ...
- Canvas,Matrix的变换顺序
Canvas的几何变换是倒序的,Matrix是正序. 比如先平移在旋转: canvas.rotate(); canvas.translate(); //translate先执行,rotate后执行 M ...
- 配置ANDROID_HOME
原文:配置ANDROID_HOME 1.在环境变量中设置一个名为ANDROID_HOME,变量值为SDK路径 2.添加至Path中 备注:ANDROID_HOME的变量值仅允许一个
- 漫步Unity3D(一)
前言 采用Unity它已经将近半年的时间,虽然项目仅仅是一个半成品.但Unity熟几乎相同的游戏.在这里,在使用过程中遇到的问题,再梳.不涉及过于详细的功能和代码.但是,假设他们将参与开发一个在线知识 ...
- Hibernate——(2)增删改查
案例名称:Hibernate完成增删改查 案例描述:抽取出工具类并完成删除.修改.查询功能. 具体过程: 1.使用上面的例子(Hibernate--(1)Hibernate入门http://blog. ...