ie设置document.domain会导致ueditor拒绝访问

使用百度的ueditor富文本编辑器在ie中如果页面设置了document.domain,则会导致编辑器初始化失败,错误信息是拒绝访问,可见是跨域问题导致的。
解决的方法就是在render方法中设置src为一个代理页面,或者javascript伪协议,例如:

container.firstChild.src = "javascript:void((function(){document.open();document.domain='"
+document.domain
+"';document.write('');document.close()})())";

弹出的dialog则需要在\dialogs\internal.js 里也加上:

document.domain = '根域';

至于flash上传问题,需要放个crossdomain.xml文件,具体内容你懂得了……

关于javascript位运算符的技巧

今天说下常用的javascript位运算符的技巧

js位运算来判断奇偶数

if(n&1===0){
//偶数
}else{
//奇数
}

js位运算符来代替Math.floor

(2.9|0)===2
(~~2.9)===2
(2.9>>>0)===2
(2.9>>0)===2
(2.9<<0)===2
//注意
~~(-2.999);//= -2
Math.floor(-2.999);// = -3

RGB2HEX

function RGB2HEX(a,b,c){return"#"+((256+a<<8|b)<<8|c).toString(16).slice(1)}
//或者
function toHexString(r,g,b) {
  return ("00000" + (r << 16 | g << 8 | b).toString(16)).slice(-6);
}
var hex = toHexString(red, green, blue);

检测相等关系

if(a!=123)
if(a^123)
//注意:
false ^ 1 // 1
true ^ 1 // 0
2 ^ 1 // 3
{} ^ 1 // 1

这个很好用的,比如下面的代码

var isReady = 0;

// somewhere else
if( isReady ) { }

// somewhere else, set isReady state to 1
isReady ^= 1;

// somewhere else, set isReady state to 0
isReady ^= 1;

默认值

if (!n) n = defaultValue;
//使用下面的代码
n||(n=defaultValue);

获取a标签和script标签的绝对路径和相对路径

做了一个a标签和script标签获取绝对路径和相对路径的实验,实验代码如下:

<a id="link" href="a.html">a.html</a>
<script type="text/javascript" id="script" src='a.js'></script>
<script type="text/javascript">
    function $(id){
        return document.getElementById(id);
    }
    alert('link.href=>'+$('link').href);
    alert('link.get=>'+$('link').getAttribute('href'));
    alert('link.get0=>'+$('link').getAttribute('href',0));
    alert('link.get1=>'+$('link').getAttribute('href',1));
    alert('link.get2=>'+$('link').getAttribute('href',2));
    alert('link.get4=>'+$('link').getAttribute('href',4));

    alert('script.src=>'+$('script').src);
    alert('script.get=>'+$('script').getAttribute('src'));
    alert('script.get0=>'+$('script').getAttribute('src',0));
    alert('script.get1=>'+$('script').getAttribute('src',1));
    alert('script.get2=>'+$('script').getAttribute('src',2));
    alert('script.get4=>'+$('script').getAttribute('src',4));
</script>

分别在IE6~IE9(都是虚拟机原生,非ie9模拟)、chrome21、FF14,opera12.01,safari5.1.7中做出如下的实验结果:

√代表绝对路径,×代表相对路径(即src或者href属性的值,如果为完整的路径,则是完整路径)

方法 IE6 IE7 IE8 IE9 chrome 21 FF 14 safari 5.1.7 opera 12
link.href
link.get × × × × × ×
link.get0 × × × × × ×
link.get1 × × × × × ×
link.get2 × × × × × × × ×
link.get4 × × × × × ×
script.src × ×
script.get × × × × × × × ×
script.get0 × × × × × × × ×
script.get1 × × × × × × × ×
script.get2 × × × × × × × ×
script.get4 × × × × × ×

详情见MSDN的介绍:http://msdn.microsoft.com/en-us/library/ms536429(v=VS.85).aspx.aspx)

ECMAScript 5的严格模式:语法限制

ECMAScript 5严格模式介绍的第一篇(ECMAScript 5的严格模式:strict mode介绍)文章中提到了严格模式会在语法解析和代码执行两个方面做限制,抛出更多的异常。今天介绍的是ECMAScript 5严格模式的第一部分:语法限制。

ECMAScript 5严格模式的语法限制有七个,下面一一介绍:

禁止函数出现相同的参数

我们知道在普通的函数中,多个参数可以相同(即使我们很少或者没有这样写过),但是在严格模式下,这样的行为是被禁止!
例如下面的代码:

function foo(x,x,y){
    alert(x+y);
}
foo(1,2,3);

在非严格模式下,后面的x会覆盖第一个x的传参,即运行结果实际为2+3=5

但是在严格模式下,上面的代码却会抛出类似“Strict mode function may not have duplicate parameter names”的语法异常。

function foo(x,x,y){
    "use strict";
    alert(x+y);
}
foo(1,2,3);

禁止对象直接量的相同属性名

跟第一条相同,下面的代码在非严格模式是正常的,但是在严格模式却是禁止的,也是抛出语法异常(chrome 下为“Duplicate data property in object literal not allowed in strict mode”)

var obj = {
    a: 1,
    a: 2
}
foo(1,2,3);

禁止重新定义eval和arguments

严格模式中不能声明或重写 evalarguments
这两个标识符,亦即是说,它们不能出现在赋值运算的左边,也不能使用 var 语句来声明。

另外,由于 catch 子句以及具名函数都会隐式地声明变量名,因此在它们的语法中也不允许用 eval 和 arguments 作为标识符。最后要强调的是,arguments 或 eval 也不能使用 delete 去删除。所以下面的代码在严格模式下都会抛出语法异常:

//向 eval或 arguments赋值
eval = function() { }

//重新声明 eval或 arguments
var arguments;

//将 eval或 arguments用做 catch子句的异常对象名
try {
    // …
}
catch (eval) {
    // …
}

//将 eval或 arguments用做函数名
function arguments() { }

//删除 arguments,或形式参数名
function foo() {
    delete arguments;
}

禁止使用 0 前缀声明的 8 进制直接量

例如下面的代码在严格模式下面是错误的:

var num = 012;
alert(num);

而在非严格模式中,num因为0而被解析为八进制数值,所以alert出来的是十进制的10

禁止delete显式声明的标识符、具名函数

//删除变量名
var x;
delete x;

//删除具名函数
function foo() {}
delete foo;

//删除 arguments,或形式参数名
function foo(x) {
delete x;
}

//删除 catch子句中声明的异常对象
try{} catch(e) { delete e }

在非严格模式中,通常这些操作只是”无效的”,并不会抛出异常。此外,用 delete操作其他一些不能被删除的对象属性、标识符时将导致执行期异常。

保留字增多

在严格模式中,在代码中使用一些扩展的保留字也会抛出异常。

这些保留字包括:implements, interface, let,package, private, protected, public, static,以及 yield。

禁止使用with(){}

我们知道with会使作用域链延长,如果你使用严格模式编码,那么使用with语句会直接抛出语法异常。

ECMAScript5的严格模式strict mode介绍

严格模式(Strict Mode)是ECMAScript 5中提出的一个新特性,在严格模式中的代码。这种严格的语境会防止某些特定的操作并抛出更多的异常。严格模式向前兼容,所以在不支持ES5的浏览器中是正常运行代码的,而只有支持严格模式的浏览器才会开启严格模式。

严格模式的好处

启用严格模式有以下好处:

  1. 捕获一些编程错误,并抛出异常。
  2. 阻止进行一些相对“不安全”的操作(例如访问全局变量),抛出异常。
  3. 禁用一些让人迷惑的特性。

启用严格模式,需要从下面两个方面来做限制(检查)

  1. 语法解析阶段:如果在语法检测时发现语法问题,则整个代码块失效,并导致一个语法异常。
  2. 阻止进行一些相对“不安全”的操作(例如访问全局变量),抛出异常。
  3. 代码执行阶段:如果在运行期出现了违反严格模式的代码,则抛出执行异常。

使用严格模式

在全局中使用严格模式

如果要在全局范围内使用严格模式,只需要在代码的第一行加上下面的代码:

"use strict";

这样在一个js文件,或者script标签内的所有代码都需要遵循严格模式的代码要求

函数中使用严格模式

如果要在某个函数中使用严格模式需要在函数的第一行加上"use strict";,如下面的代码

function foo(){
    "use strict";
    //……
}

使用严格模式注意的情况

需要注意的是,如果"use strict";不是出现在第一行(全局的、或者函数的),那么严格模式的启用会被忽略,即还是不会使用严格模式来解析执行代码。

另外在函数的严格模式中函数体和函数声明部分就需要遵循严格模式,而不是只有函数体内的代码才遵循严格模式,例如在严格模式中不允许重新定义eval,说以下面的代码是会抛出异常的

function eval(){
    "use strict";
    //……
}

今天写到这,下一篇介绍严格模式下面的语法限制。
ECMAScript 5的严格模式:语法限制

写了一个html5音乐播放器

昨天查了一些audio资料,自己写了个html5音乐播放器,后来写上瘾了,晚上折腾了一下加上了多首音乐支持、添加了循环模式,添加了进度,歌词等功能,界面仿得亦歌,可是一些icon还是比较难看,毕竟自己不会设计,呵呵,上面的歌曲都是通过goldwave转的ogg格式。访问地址:html5音乐播放器.

html5音乐播放器

代码还算简洁,javascript只用了400行左右,css和html也不是很多,后期如果找个视觉帮忙设计下界面就帅了,哈哈

主要功能:

  1. 支持音乐列表
  2. 支持歌词滚动
  3. 歌词实时显示到title
  4. 支持列表循环和单曲循环循环模式
  5. 支持音量调节
  6. 支持拖动改变播放进度
  7. 更多功能等你去发现哦

写的比较仓促,所有功能都是在一天内完成的,难免会有bug,欢迎拍砖

【PPT】那些年,我们一起跨过域

这个是入职腾讯第二月做的跨域分享,介绍了五种跨域方式,比较了他们之间的优缺点,希望可以解决小组内经常遇见的跨域问题。另外简单列举了另外五个跨域的方式,因为不经常用,所以也就简单的一笔带过了。

名字有点小清新,我想最后一个月的分享也是《那些年系列》:《那些年,我们一起跨过域》《那些年,我们错过的爱情(html5+css3)》,为什么是那些年呢,装清纯吧,感觉自己老了呗。

言归正传,我介绍的五种跨域方式是:

  1. document.domain
  2. location.hash
  3. window.name
  4. postMessage
  5. flash

以上五种跨域方式可能是现实工作中最常用的跨域方式,例如简单的跨域iframe自适应高度,你可以使用location.hash,跨子域可以使用document.domain,ppt每个方法都要详细的介绍,并且附上了我亲自写的demo哦~很有诚意是不(不要吐血),哈哈,好了又凑了一篇文章。另外附上昨天用css3画的企鹅:http://4.qdemo.sinaapp.com/qie.htm。ps:office 2010的ppt切换动画好炫哦

slideshare被墙,下载地址:http://4.qdemo.sinaapp.com/xdomain/naxieniankuayu.pptx


微盘下载:http://vdisk.weibo.com/s/6wt-O

将uglifyjs添加到鼠标右键菜单

之前几天根据YUICompressor和TBCompressor整合到鼠标右键菜单自己将uglifyjs也添加到了右键菜单,下面简单记录下过程。效果如下

uglifyjs添加到鼠标右键菜单

配置windows nodepath环境

鼠标右键我的电脑,选择属性→高级属性管理→高级选项卡→环境变量,添加新的环境变量,名字为NODE_PATH,变量值为nodejs的安装路径,例如下面

C:\Program Files\nodejs

然后保存退出

安装uglifyjs

在命令行安装uglifyjs,

npm install uglify-js -g

安装uglifyjs到鼠标右键菜单

找到第二步安装的uglifyjs的路径下的bin文件夹,例如我的安装在:

C:\Program Files\nodejs\node_modules\npm\node_modules\uglify-js\bin

然后下载uglifyjs的安装文件解压到这个文件夹

uglifyjs到鼠标右键菜单安装文件

  • 双击运行install.cmd就可以安装了。
  • 卸载运行uninstall.cmd就可以卸载。

主要的代码还是根据YUICompressor的安装文件改的,压缩的时候首先将源文件copy为dev作为备份,然后压缩替换原文件。例如a.js,压缩后变成a.dev.js原文件和压缩后的js文件。美化则是将美化后的代码存到bea.js,即a.js美化后为a.bea.js

pngfix.js可能导致xss攻击

今天看了国外大佬Spanner的一篇关于pngfix的文章,已经到下班时间,就简单说说pngfix的xss攻击。

pngfix.js

pngfix.js是IE6中解决png不透明的js方案,原理其实就是遍历了页面的img,然后使用滤镜来解决。

pngfix导致xss

pngfix.js使用了如下的代码:

var imgID = (img.id) ? "id='" + img.id + "' " : "";

img.outerHTML = strNewHTML

如果使用如下的代码就会出现xss:

<img src=1.png id="'&gt;&lt;img src=1 onerror=alert(/png_fixed!/)&gt;">

详细原文地址:http://www.thespanner.co.uk/2012/06/12/pngfix/

IE中iframe和document.selection.createRange导致跨域

帮忙在活动中找bug,两层iframe,经过调试发现是document.selection.createRange导致的错误,在浏览器中报“拒绝访问”,猜测是跨域导致的。于是加上document.domain主域就搞定了。

本来以为是两层iframe导致的(因为他们反映一层iframe没有问题),于是自己建了个demo,test.qq.com/qq1.html代码如下:

<iframe src="http://demos.qq.com/qq2.html" frameborder="0" id="myIframe"></iframe>

demos.qq.com/qq2.html代码如下:

<script type="text/javascript">
    //document.domain = 'qq.com';
    var a = document.selection.createRange();
</script>

这样在IE9中访问test.qq.com/qq1.html就会报错,而把qq2.htmlqq1.html都添加document.domain='qq.com';就可以了。暂时原因不明了,记录在此备份下,懂得朋友可以来说道说道