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)

【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';就可以了。暂时原因不明了,记录在此备份下,懂得朋友可以来说道说道

IE动态创建带name的iframe跳转问题

在一些前端项目中可能要用到动态创建iframe的需求,例如无刷新ajax上传文件。但是在IE下创建带有name的iframe会有个bug,创建的代码如下:

var iframe = document.createElement('iframe');
iframe.name = 'test';

上面的这段javascript代码在IE下赋不了name属性!!!即iframe.name = 'test';这段代码未执行。

在IE中我们可以使用下面的代码来动态创建带有name的iframe:

var iframe = document.createElement('<iframe name="test">');

但是上面的代码在非IE浏览器下却报错,这时候我们可以使用判断IE,如果是ie则使用第二段方法动态创建iframe,或者我们可以捕获异常,如下面的代码:

addEventListener第二个参数的handleEvent

昨天无意中看到一篇老外的文章,文章提到了addEventListener第二个参数可以传入object,并且对象中handleEvent为事件处理函数。例如下面的javascript代码:

var obj = {
    handleEvent: function() {
        alert('body clicked');
    }
};
document.body.addEventListener('click',obj,false);

测试发现这段代码在IE9+,chrome,FF,opera等浏览器是正确的(测试范围可能不够宽),而且可以成功的绑定click事件。在Qwrap群里一问才知道是DOM2中接口,很有意思的一个发现,@貘大大 也发微博说自己先入为主了,我相信很多人跟@貘大大 一样都先入为主了。

addEventListener的handleEvent应用

发现了这个“新大陆”有什么用法呢?哈哈~首先想到的是对象引用。

看下面的javascript代码:

<script type="text/javascript">
var obj = {
handleEvent: function() {
    alert('body clicked');
}
};
document.body.addEventListener('click',obj,false);
function fn2(){
    obj.handleEvent = function(){
        alert('fn2');
    };
}
</script>
<button onclick="fn2();">change</button>

因为对象的引用关系,点击下button就可以切换绑定事件的处理函数,而不需要remove之前的事件,然后重新绑定一个新的处理函数。

【PPT分享】XSS注入和防范

这是我前些日子准备的关于《XSS注入和防范》的技术分享ppt,现在放出来,之前是做的powderpoint文件,后来网上流传impress.js做ppt,于是自己也整了个impress.js版本的放在了SAE上面,经过测试发现当ppt的内容较多,带有图片等,impress.js效果就会比较卡。不多说其他的,说说ppt的内容:

《XSS注入和防范》主要从xss是什么,xss的危害,xss的类型及其防范的措施,几个方面来讲解xss。希望对大家理解xss有所帮助,另外多说句cookie的httponly方式,在apache下面有个漏洞,当cookie超过4k的时候就会出现泄漏,所以要注意这个漏洞!(具体代码:狂点此处

废话不多说了,上ppt地址:【PPT分享】XSS注入和防范,请使用支持chrome浏览器查看ppt页面
XSS注入和防范