文章标签 » ie

comet的两个小问题

最近做了一个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

这样ie下JS可以用时间戳或随机数决定一个domain去请求,不会产生阻塞

ie-css3.htc的修正增强版

做前端的同学都应该听说或者用过,是一段脚本,可以让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 */
}

最近用到了这个东西,发现动态改变div的内容之后,这段脚本生成的vml会出现变形。。
所以加了一个手动刷新的函数,通过innerHTML赋值之后调用一下就可以了

el.innerHTML = '....';
if(window.update_css3_fix) update_css3_fix(el);

如果使用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;
    };
})();

另外官网下载的脚本还会产生yourdomain/none的404请求,也已经修复

修改之后的文件ie-css3.htc

ie下暴力debug js

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'));

把列表保存到一个文件,下面跑段shell,把所有js的报错位置的代码打印出来

// 10 100是ie里提示的错误位置
sh ~/bin/get_line.sh /tmp/jslist 10 100

附:

#!/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

getAttribute(‘onclick’) in IE

第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>

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>

ie下的默认回车提交之强大…

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>

示例2:input外面没有form标签,输入框按回车会触发submit的onclick事件

<html>
<body>
<input type="submit" value="haha" onclick="alert(1);" />
<input  type="text" />
</body>
</html>

ajax提交流行的今天,form标签往往直接被省略,所以这个特性很可能造成用户在某个输入框按了回车,然后某处一个不相关的button被ie点了一下….