为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可供我们使用，最终的解决方案如下：

1. var IframeOnClick = {
2. resolution: 200,
3. iframes: [],
4. interval: null,
5. Iframe: function() {
6. this.element = arguments[0];
7. this.cb = arguments[1];
8. this.hasTracked = false;
9. },
10. track: function(element, cb) {
11. this.iframes.push(new this.Iframe(element, cb));
12. if (!this.interval) {
13. var _this = this;
14. this.interval = setInterval(function() { _this.checkClick(); }, this.resolution);
15. }
16. },
17. checkClick: function() {
18. if (document.activeElement) {
19. var activeElement = document.activeElement;
20. for (var i in this.iframes) {
21. if (activeElement === this.iframes[i].element) { // user is in this Iframe
22. if (this.iframes[i].hasTracked == false) {
23. this.iframes[i].cb.apply(window, []);
24. this.iframes[i].hasTracked = true;
25. }
26. } else {
27. this.iframes[i].hasTracked = false;
28. }
29. }
30. }
31. }
32. };

调用

1. IframeOnClick.track(document.getElementById("iFrame"), function() { alert('a click'); });