Article Detail

为iframe添加onclick事件

如果页面上有iframe时，鼠标点击在iframe内时，包含iframe的document是不响应任何事件的，例如： $("#iframe1").click(...

HTML 阅读 84.6万 5 分钟阅读 2017-07-26 14:30

如果页面上有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;  
                }  
            }  
        }  
    }  
};

调用

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

Comments 评论区

广西南宁市 2017-07-26 14:35

iphone微信页面二维码长按识别不了
微信页面上的二维码长按可以识别我现在页面上的二维码安卓设备可以识别 Iphone就不行请问谁知道是怎么回事啊~
刚刚我也遇到这样的问题，然后发现是因为包住图片的外层div设置了position:fixed了，
设置成position:absolute就可以了。不知道微信自带的浏览器是怎么回事。
iphone的微信页面识别二维码要确保二维码图片和包住图片的div都没有设置position:fixed。

广西南宁市2017-07-27 11:21:36

这个问题是ios微信客户端在处理二维码识别区时，没有把内嵌的顶栏高度计算在内…
最简单的办法是给img加padding…

广西南宁市2017-07-27 11:21:59

#¹...我这边是把二维码图片加了64px的高度就可以了...

广西南宁市2017-07-27 11:22:37

我在页面写了一个width是100%的二维码然后隐藏起来了，识别就没问题了

广西南宁市2017-07-27 11:22:46

解决这问题不复杂，iOS在小二维码有touchstart事件时，将二维码做一个弹出层并弹出到全屏，touchend时候关闭这个浮层，这是因为二维码的位置如果在右侧，以及太小导致的BUG。Android上面不用这么做。

广西南宁市2017-07-27 11:26:18

腾讯浏览服务-技术指南

#⁰

广西南宁市 2017-07-26 16:06

javascript取网页DOM自定义属性值和设置自定义属性值的通用方法

HTML元素，属性已经十分丰富了。但是，在某些场合下，也会显得捉襟见肘，这时候自定义属性就发挥了十分关键的作用。
Html元素的自定义属性，使用起来，十分方便，例如：
<input type=”button” value=”Click Me, Baby!” />
假设我们现在需要限制，这个按钮，只能点击2次，然后就失效了。
 
通常的实现方式，是可以利用全局变量的形式来记录点击次数，但我们这里用自定义属性来实现这个功能，展示一下自定义属性的优势；我们对上面的button做一下改造：
<input type=”button” value=”Click Me, Baby!” clickCount=”0” />
可以看到，我为这个button 增加了一个自定义属性 clickCount， 并将初始值设为 0；下面我们来写实现功能的js代码：
1. 给 button 增加click事件的处理
<input type=”button” value=”Click Me, Baby!” clickCount=”0”  onclick=”customAttributeDemo(this);" />
2. 我们来写 customAttributeDemo(obj) 这个函数
 
对于IE来讲，使用自定义属性非常简单，因为IE自动将自定义属性解析到了DOM中，和标准属性没有任何区别，IE下的版本：
function customAttributeDemo(obj)
{
    if (obj.clickCount === '0')
    {
        obj.clickCount = '1';
    }
    else
    {
        obj.disabled = true;
    }
}
上面的代码在 FireFox 下将失效，因为FireFox对自定义属性的使用，限制更高，只能使用 attributes[] 集合来访问，FireFox 下的代码：
function customAttributeDemo(obj)
{
    if (obj.attributes['clickCount'].nodeValue === '0')
    {
        obj.attributes['clickCount'].nodeValue = '1';
    }
    else
    {
       obj.disabled = true;
    }
}
上面的代码，也适用于IE，所以，这个代码，就是具有兼容性的代码了，嘿嘿
 
感谢小秦网友的交流，他给出了 getAttribute 和 setAttribute 的方法：
function customAttributeDemo(obj)
{
    if (obj.getAttribute('clickCount') === '0')
        obj.setAttribute('clickCount', '1');
    else
        obj.disabled = true;
}

#⁰

广西南宁市 2017-07-28 14:34

判断js中数据类型

判断字符串类型的：

        function isString(obj) 
       {
            return obj+"" === obj;
        }

判断bool类型的：
        function isBool(obj)
        {
            return obj ==!!obj;
        }

判断数字类型的：

        function isNumber(obj)
        {
            return obj == -obj;
        }

#⁰

广西南宁市 2017-07-28 17:45

在jQuery中响应Ctrl+S，而不是直接打开系统保存对话框

$(window).keydown(function(e) {
	console.log(e);//打印event，观察各属性，代替查阅文档，调试用。
	if (e.keyCode == 83 && e.ctrlKey) {
		e.preventDefault();
		//dosomething
	}
});

关键点：1. 键盘事件 2. 阻止默认Ctrl+S执行了两次keydown事件，第一次是按下Ctrl，第二次是按下S。Event的ctrlKey, shiftKey, metaKey这三个属性分别keydown发生时，ctrl，shift和metakey是否处于按下的状态。如果不使用这几个属性，你得结合keyup事件才能判断ctrl+s是否按下。

广西南宁市2017-07-28 17:46:35

1）js实现

function keyDown(e){
	e.preventDefault();
	var currKey=0, e=e||event||window.event;
	currKey = e.keyCode||e.which||e.charCode;
	if(currKey == 83 && (e.ctrlKey||e.metaKey)){
		$('#btn_save').click();
		return false;
	}
}
document.onkeydown = keyDown;

2）使用codemirror插件实现
codemirror本身十分强大，键盘监听命令很全，不过Ctrl+S这样的指令是需要手动添加的，需要在声明editor时添加下面的代码

extraKeys: {
	'Ctrl-S': function(){
		$('#btn_save').click();
	}
}

#⁰

广西南宁市 2017-08-08 10:47

jquery方式判断checkbox是否选中（.is(":checked")）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>1-6-1</title>
<!-- 引入 jQuery -->
<script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
//等待dom元素加载完毕.
$(document).ready(function(){
	var $cr = $("#cr");  //jQuery对象
	$cr.click(function(){
		if($cr.is(":checked")){ //jQuery方式判断
			alert("感谢你的支持!你可以继续操作！");
		}
	})
});
</script>
</head>
<body>
<input type="checkbox" id="cr"/><label for="cr">我已经阅读了上面制度.</label>
</body>
</html>

#⁰

广西南宁市 2017-08-08 10:48

手机版网页阻止屏幕滑动

//阻止屏幕滑动
$('html,body').on(touchmove,function(e){
    e.preventDefault()
});

广西南宁市2017-08-08 10:51:50

给以某网站域名链接开头的a标签、超链接添加图标logo

#main #content a[href^="https://lizhenqiu.com"]{
	letter-spacing:0;
	font-size: 14px;
	padding:3px 0 3px 27px;
	background:url(images/url_yuncode_icon.png) no-repeat -155px -329px;
}

#⁰

Comment Form 留下评论

正在回复 #0

粘贴图片、拖拽文件，或点上面的按钮上传 图片会自动插入 [img] 标签，其他附件会自动插入 [attach] 标签。

正在上传...

提交前会先拉起旧项目同款第三方人机验证。

不再要求填写昵称；reply 会生成一条带楼层回链的新评论，quote 会附带完整引用块，并保持评论锚点跳转。