10种跨域资源共享的方式与实现原理
跨域的方法很多，不同的应用场景我们都可以找到一个最合适的解决方案。比如单向的数据请求，我们应该优先选择jsonp或者window.name，双向通信我们采取cross frame，在未与数据提供方没有达成通信协议的情况下我们也可以用server proxy的方式来抓取数据。
同源策略
在客户端编程语言中，如网页特效和actionscript，同源策略是一个很重要的安全理念，它在保证数据的安全性方面有着重要的意义。同源策略规定跨域之间的脚本是隔离的，一个域的脚本不能访问和操作另外一个域的绝大部分属性和方法。那么什么叫相同域，什么叫不同的域呢？当两个域具有相同的协议(如http), 相同的端口(如80)，相同的host（如www.111cn.net)，那么我们就可以认为它们是相同的域。比如http://www.111cn.net/index.html和http://www.111cn.net/sub/index.html是同域，而http://www.111cn.net, https教程://www.111cn.net, http://www.111cn.net:8080, http://sub.111cn.net中的任何两个都将构成跨域。同源策略还应该对一些特殊情况做处理，比如限制file协议下脚本的访问权限。本地的html文件在浏览器中是通过file协议打开的，如果脚本能通过file协议访问到硬盘上其它任意文件，就会出现安全隐患，目前ie8还有这样的隐患。
受到同源策略的影响，跨域资源共享就会受到制约。但是随着人们的实践和浏览器的进步，目前在跨域请求的技巧上，有很多宝贵经验的沉淀和积累。这里我把跨域资源共享分成两种，一种是单向的数据请求，还有一种是双向的消息通信。接下来我将罗列出常见的一些跨域方式，以下跨域实例的源代码可以从这里获得。
单向跨域
jsonp
jsonp (json with padding)是一个简单高效的跨域方式，html中的script标签可以加载并执行其他域的javascript，于是我们可以通过script标记来动态加载其他域的资源。例如我要从域a的页面pagea加载域b的数据，那么在域b的页面pageb中我以javascript的形式声明pagea需要的数据，然后在pagea中用script标签把pageb加载进来，那么pageb中的脚本就会得以执行。jsonp在此基础上加入了回调函数，pageb加载完之后会执行pagea中定义的函数，所需要的数据会以参数的形式传递给该函数。jsonp易于实现，但是也会存在一些安全隐患，如果第三方的脚本随意地执行，那么它就可以篡改页面内容，截获敏感数据。但是在受信任的双方传递数据，jsonp是非常合适的选择。
flash urlloader
flash有自己的一套安全策略，服务器可以通过crossdomain.xml文件来声明能被哪些域的swf文件访问，swf也可以通过api来确定自身能被哪些域的swf加载。当跨域访问资源时，例如从域www.a.com请求域www.b.com上的数据，我们可以借助flash来发送http请求。首先，修改域www.b.com上的crossdomain.xml(一般存放在根目录，如果没有需要手动创建) ，把www.a.com加入到白名单。其次，通过flash urlloader发送http请求，最后，通过flash api把响应结果传递给javascript。flash urlloader是一种很普遍的跨域解决方案，不过需要支持ios的话，这个方案就无能为力了。 下面提供了asp html jsp php 防止页面缓存的处理方法，代码如下
php网页
header("expires:mon,26jul199705:00:00gmt");
header("cache-control:no-cache,must-revalidate");
header("pragma:no-cache");
jsp网页
response.addheader("pragma", "no-cache");
html做法
<meta http-equiv='pragma' content='no-cache'>
<meta http-equiv='cache-control' content='no-cache, must-revalidate'>
<meta http-equiv='expires' content='0'>
<base target="_self">
asp做法
<%
response.buffer = true
response.expiresabsolute = now() - 1
response.expires = 0
response.cachecontrol = "no-cache "
%>
同域、子页面高度不会动态增加
这种情况最简单，直接通过脚本获取字页面实际高度，修改iframe元素高度即可。但有二点必须注意：
如果页面内有绝对定位或者没有清浮动的元素，情况有些复杂，不同浏览器处理结果不同，甚至包括webkit内核的浏览器，具体请看这个demo。所以你要么进行浏览器检测，要么用math.max计算一个最大值，要么你想别的方法。
iframe所包含页面可能非常大，需要很长的加载时间，为此直接计算高度的时候，很可能页面还没下载完，高度计算就会有问题。所以最好在iframe的onload事件中计算高度。这里还要注意的是，ie下必须使用微软事件模型obj.attachevent来绑定onload事件。而别的浏览器直接obj.onload = function(){}也可以。
(function(){
var frame = document.getelementbyid("frame_content_parent"),
setiframeheight = function(){
var framecontent = frame.contentwindow.document,
frameheight = math.max(framecontent.body.scrollheight,framecontent.documentelement.scrollheight);frame.height = frameheight;
};
if(frame.addeventlistener){
frame.addeventlistener("load",setiframeheight,false);
}else{
frame.attachevent("onload",setiframeheight);
}
})();
第一步：在toolbar中添加功能按钮
fckconfig.js：fckconfig.toolbarsets[“default”] 中添加按钮名称
fckconfig.toolbarsets["default"] = [
['bold','italic','-','about', 'mydiy']
] ;第二步：
为按钮添加中文名称和英文名称
zh-cn.js：为你的按钮起个中文名字
mydiy : “我的自定义按钮"
en.js：为你的按钮起个英文名字
mydiy:"mydiybutton"
第三步：在toolbar中显示该按钮
fckeditorcode_gecko.js（fckeditorcode_ie.js）：
查找：
case 'newpage':b=new fcktoolbarbutton('newpage',fcklang.newpage,null,null,true,null,4);break;
在break后插入你的代码
比如case 'mydiy':b=new fcktoolbarbutton('mydiy',fcklang.mydiy,null,null,false,true,50);(这个50是按钮的显示图片，要让你的自定义按钮显示为插入图片那个按钮的图片，可以填入37)
这样就可以在toolbar中显示你的按钮了
第四步：定义按钮功能原型
ckeditorcode_gecko.js（fckeditorcode_ie.js）：
查找：
var fcknewpagecommand=function(){this.name='newpage';};
fcknewpagecommand.prototype.execute=function(){fckundo.saveundostep();fck.sethtml('');fckundo.typing=true;};
fcknewpagecommand.prototype.getstate=function(){return fck_tristate_off;};
定义功能原型：（这里直接复newpage的实现代码放到后面，然后进行修改）
比如：var fckmydiycommand=function(){this.name='mydiy';};fckmydiycommand.prototype.execute=function(){ 这里写你所需要执行的代码或者函数，比如alert("i am here !");};fckmydiycommand.prototype.getstate=function(){return 0;};
将上面代码插入到查找内容之后。
第五步：按钮功能实例化：
ckeditorcode_gecko.js（fckeditorcode_ie.js）：
查找：
case 'newpage':b=new fcknewpagecommand();break;
功能实例化：
case 'mydiy':b=new fckmydiycommand();break;
将上面代码插入到查找内容之后。
ok，这样就可以在为fckeditor加上自定义的按钮了。
如果要为按钮加上快捷键，可以在fckconfig.js中：fckconfig.keystrokes = []加上
[ ctrl + 71 /*g*/, 'mydiy' ],
| 问题 | 浏览器 | demo | 解决方法 | |
|---|---|---|---|---|
| 1 | input[button | submit] 不能用 margin:0 auto; 居中 | ie8 | bug | fixed | 为input添加width |
| 2 | body{overflow:hidden;}没有去掉滚动条 | ie6/7 | bug | fixed | 设置html{overflow:hidden;} |
| 3 | haslayout的标签拥有高度 | ie6/7 | bug | fixed | *height:0; _overflow:hidden; |
| 4 | form>[haslayout]元素有margin-left时，子元素中的[input | textarea] 出现2×margin-left | ie6/7 | bug | fixed | form > [haslayout 元素]{margin-left:宽度;} form div{*margin-left:宽度÷2;} |
| 5 | 当border-width有1条<边3条时被设置成dotted时，1px的边dotted显示成dashed | ie7 | bug | fixed | 不在同一个元素上使用不同宽度的 dotted |
| 6 | 当子元素有position:relative的时候，父元素设置overflow:[hidden|auto]相当于给子元素设置了position:visible; | ie6/7 | bug | fixed | 给父元素设置position:relative; |
| 7 | :hover伪类不能改变有position:absolute的子级元素的left/top值 | ie7 | bug | fixed | 把top/left的值设置成除0%外的所有百分值；或添加一个margin-[所有方向]除0外的所有值，包括0% |
| 8 | :focus + selector {} 选择器失效 | ie8 | bug | fixed | 在失效选择器后面添加一个空选择器, :focus{} |
| 9 | 列表中混乱的浮动：在list中浮动图片时，图片出现溢出正常位置；或没有list-style | ie8 | bug | fixed | 用背景图片替换list-style |
| 10 | th 不会自动继承上级元素的 text-align | ie8 | bug | fixed | 给th添加text-align:inherit; |
| 11 | 样式(包括link/style/@import(link)) 最多允许个为是：32 | ie6-8 | ─ 常识 | 99.99%的情况下，不会遇到 |
| 12 | :hover 时若background-color为#fff, 失效 | ie7 | bug | fixed | 把background-color改成background。或者，非#fff || #ffffff |
| 13 | 忽略’>’后有注释的选择器：selector> /**/ selector{} | ie7 | bug | fixed | 官方demo有误 |
| 14 | * html | ie6 | ─ hack | 只对ie6有效 |
| 15 | png图片中的颜色和背景颜色的值相同，但显示不同 | ie6-7 | bug | fixed | 利用 pngcrush 去除图片中的 gamma profiles |
| 16 | margin:0 auto; 不能让block元素水平居中 | ie6-8 | bug | fixed | 给block元素添加一个width |
| 17 | 使用伪类 :first-line | :first-letter, 属性的值中出现!important 会使属性失效 | ie8 | bug | fixed | !important is evil, don’t use it anymore |
| 18 | :first-letter 失效 | ie6 | bug | fixed | 把 :first-letter 移到离{}最近的地方，如 h1, p:first-letter{}，而非 p:first-letter h1{} |
| 19 | position:absolute元素中，a display:block, 在非:hover时只有文本可点击 | ie6/7 | bug | fixed | 给a添加background, 如果背景透明，使用background:url(‘任何页面中已经缓存的文件链接’)，不推荐background：url(#)[官方的解决方法]，因为会增加一下http请求 |
| 20 | float列表元素不水平对齐：li不设置float，a设置display:block;float:[方向]，li不水平对齐 | ie6/7 | bug | fixed | 给li设置display:inline 或 float:[方向] |
| 21 | dt, dd, li 背景失效 | ie6 | bug | fixed | dt, dd, li{position:relative;} |
| 22 | <noscript />元素的样式在启用网页特效的情况下显示了样式 | ie6-8 | bug | fixed | 利用js给<noscript />添加display:none; |
| 23 | 使用filter处理的透明背景图片的透明部分不可点 | ie6-8 | bug | fixed | 把background:none变成background:url(‘链接’)，链接到本身和图片之外的任何文件 |
| 24 | li内元素偏离 baseline 向下拉 | ie8 | bug | fixed | 给li设置display:inline 或 float:[方向] |
| 25 | 列表中li的list-style不显示 | ie6/7 | bug | fixed | 给li添加margin-left，留空间来显示（不要加在ul上） |
| 26 | 图片不能垂直居中 | ie6/7 | bug/fixed | 添加一个空标签，并赋给”layout”, 比如display:inline-block; |
| 27 | 不能自定义指针样式 | ie6-8 | bug | fixed | 给指针文件设置绝对路径 |
| 28 | 背景溢出，拖动滚动条后显示正常 | ie6 | bug | fixed | 给父元素添加overflow:hidden防止溢出，并赋予haslayout,如果添加_zoom:1; |
| 29 | 高度超过height定义的高 | ie6 | bug/fixed | 添加_overflow:hidden;(推荐)或者_font-size:0; |
| 30 | 宽度超过width定义的宽 | ie6 | bug/fixed | 添加_overflow:hidden; |
| 31 | 双倍边距 | ie6 | ─ 常识 | 添加display:inline到float元素中 |
| 32 | margin负值隐藏：haslayout的父元素内的非haslayout元素，使用负边距时，超出父元素部分不可见 | ie6/7 | bug/fixed | 去掉父元素的haslayout；或者赋haslayout给子元素,并添加position:relative; |
| 33 | 给两个浮动元素的某中一个的文字设定为斜体，另一个元素下拉在有斜体文字元素的下面 | ie6 | bug/fixed | 给有斜体文字的元素添加overflow:hidden; |
| 35 | 3px 间隔：在float元素后的元素，会有3px间隔 | ie6 | bug/fixed | 因为是确切的3px，所以，用“暴力破解”吧，比如_margin-left:-3px; |
| 35 | text-align 影响块级元素 | ie6/7 | bug/fixed | 整理你的float；或者分开设置text-align |