最近做了一个webim的项目,使用长连接做push,在chrome和ie下有些小问题
1. chrome的左下角下一直显示等待push.xx.com的响应
解决方法:接到请求立刻返回http头就可以了,不等到有了推送再返回http头
2.ie下对于每个域名同一时刻最多只能有两个并发请求,如果开多个窗口(这个限制不是针对单个窗口的),有的请求便会被阻塞。
解决方法:对每个窗口使用不同的请求域名
使用三级泛域名配置起来最简单,例如:123.push.xx.com.但是JS里涉及到跨域的问题,所以还是要使用push-123.xx.com这样的二级域名。查了下bind9的手册可以这么搞
;示例
$GENERATE 0-100000 push-$ IN A xx.xx.xx.xx
Copy Code
这样ie下JS可以用时间戳或随机数决定一个domain去请求,不会产生阻塞
做前端的同学都应该听说或者用过,是一段脚本,可以让ie实现css3里的圆角和阴影效果:http://fetchak.com/ie-css3/
用法大致如下
.box {
-moz-border-radius: 15px; /* Firefox */
-webkit-border-radius: 15px; /* Safari and Chrome */
border-radius: 15px; /* Opera 10.5+, future browsers, and now also Internet Explorer 6+ using IE-CSS3 */
-moz-box-shadow: 10px 10px 20px #000; /* Firefox */
-webkit-box-shadow: 10px 10px 20px #000; /* Safari and Chrome */
box-shadow: 10px 10px 20px #000; /* Opera 10.5+, future browsers and IE6+ using IE-CSS3 */
behavior: url(ie-css3.htc); /* This lets IE know to call the script on all elements which get the 'box' class */
} Copy Code
最近用到了这个东西,发现动态改变div的内容之后,这段脚本生成的vml会出现变形。。
所以加了一个手动刷新的函数,通过innerHTML赋值之后调用一下就可以了
el.innerHTML = '....';
if(window.update_css3_fix) update_css3_fix(el);
Copy Code
如果使用jquery就不用这么麻烦,在你的框架里加一段
(function()
{
if (!jQuery.browser.msie) return;
jQuery.fn.__ohtml__ = jQuery.fn.html;
jQuery.fn.html = function(value)
{
jQuery(this).__ohtml__(value);
this.each(function()
{
update_css3_fix(this);
});
return this;
};
})(); Copy Code
另外官网下载的脚本还会产生yourdomain/none的404请求,也已经修复
修改之后的文件ie-css3.htc
ie下的脚本错误总是很神秘的样子,告诉你哪个行,确不告诉你哪个文件,Visual Studio带了一个调试工具倒是可以,long long ago之前用过一次,老崩溃的样子~
如果你又遇到了猜不透的bug,可以尝试下面的shell~
//现去firefox里收集一份js列表
var alljs = [];
XN.array.each(document.getElementsByTagName('script'),function(i,v)
{
if (v.src)
{
alljs.push(v.src);
}
});
console.log(alljs.join('\n')); Copy Code
把列表保存到一个文件,下面跑段shell,把所有js的报错位置的代码打印出来
// 10 100是ie里提示的错误位置
sh ~/bin/get_line.sh /tmp/jslist 10 100
Copy Code
附:
#!/bin/sh
LIST="$1"
ROW="$2"
COL="$3"
if [ ! -n "$ROW" ];then
exit
fi
echo "行:${ROW}"
echo "列:${COL}"
get_row()
{
cat /tmp/js_debug_tmp | sed -n "${ROW}p"
}
cat "$LIST" | while read line
do
wget -q "$line" -O /tmp/js_debug_tmp
echo "文件:${line}"
row="`get_row`"
if [ -n "${COL}" ]; then
row="`echo \"${row}\" | cut -c ${COL}- `"
fi
echo "$row"
done
rm /tmp/js_debug_tmp Copy Code
第n次火星了,可是依然没去过火星.
这个是最近用到才知道,需求是替换onclick属性中的关键字,但是俺单纯的以为geAttribute都会返回一个字符串给我,没想到ie又一次显示了它独到的见解~
<html>
<p id="test" onclick="alert('click');">click me~</p>
<script>
document.write('<pre' + '>');
var el = document.getElementById('test');
var at = el.getAttribute('onclick');
document.writeln(at);
document.writeln(typeof at);
document.write('</' + 'pre>');
</script>
</html> Copy Code |
Run Code
ff下输出
alert('click');
string
ie6和ie7下输出:
function anonymous()
{
alert('click');
}
function
ie8下输出:
function onclick()
{
alert('click');
}
function
其他事件属性肯定也会有同样表现,ie8十分搞笑,换了一个函数名…
最后对于ie我只有这样了:
<html>
<p id="test" onclick="alert('click');">click me~</p>
<script>
var el = document.getElementById('test');
var at = el.getAttribute('onclick');
//函数换成字符串
at = at.toString().replace(/^function (anonymous|onclick)\(\)\n\{\n(.*)\n\}$/m, '$2');
//替换关键词
at = at.replace('click', 'wahaha');
//再变成函数放回去
el.setAttribute('onclick', new Function(at));
</script>
</html> Copy Code |
Run Code
ie下如果您在text输入框按回车就会默认将表单提交,可是俺万万没有想到,竟然强大到连submit的onclick事件都能触发了…
示例1:input外面有form标签,输入框按回车会提交表单
<html>
<body>
<form action="http://g.cn">
<input type="submit" value="haha" onclick="alert(1);" />
<input type="text" />
</form>
</body>
</html> Copy Code |
Run Code
示例2:input外面没有form标签,输入框按回车会触发submit的onclick事件
<html>
<body>
<input type="submit" value="haha" onclick="alert(1);" />
<input type="text" />
</body>
</html>
Copy Code |
Run Code
ajax提交流行的今天,form标签往往直接被省略,所以这个特性很可能造成用户在某个输入框按了回车,然后某处一个不相关的button被ie点了一下….