跨域通信总结
昨天看到了HTML5的跨域通信解决方案，使用postMessage和XMLHttpRequest level 2,记录如下：
- postMessage
- 浏览器支持情况 只有IE6、7不支持。浏览器支持情况监测：if(typeof window.postMessage==="undefined"){}
- 发送消息 window.postMessage("hello,world","blog.husters.org"); 第一个参数是要发送的消息，第二个参数是要发送的目的地。要发送消息给iframe，可以在相应的iframe的contentwindow中调用document.getElementByName("iframe")[0].contentWindow.postMessage("hello,world","blog.husters.org");
- 监听事件（通过白名单鉴定源） 看下面的小段代码就明白了： [php] var originWhiteList=["blog.husters.org","huawei.husters.org","www.husters.org"]; function checkWhiteList(origin){ for (var i=0;i<originWhiteList.length;i++){ if(origin===originWhiteList[i]){ reture true; } } return false; } function messageHandle(e){ if(checkWhiteList(e.origin){ postMessage(e.data); }else{ } } [/php]
- XMLHttpRequest Level 2
- 浏览器支持情况 检测思路：检测XMLHttpRequest是否支持withCredentials: var xhr=new XMLHttpRequest(); if(typeof xhr.withCredentials==="undefined"){}else{}
- 构建跨源请求 var crossOriginRequest=new XMLHttpRequest(); 接下来，通过指定不同元的地址来构造跨源XMLHttpRequest crossOriginRequest.open("GET","http://blog.husters.org",true)
- 使用进度事件 [php] crossOriginRequest.onProgress=function(e){ var total=e.total; var loaded=e.loaded; if(e.lengthComputable){ console.log(load/total+" % loaded"); cross.OriginRequest.upload.onProgress=function(e){ var total=e.total; var loaded=e.loaded; if(e.lengthComputable){ console.log(loaded/total+"%upload");[/php]
