跨域操作对程序猿尤其是前端来说是一个又爱又恨的问题。
为什么浏览器禁止iframe跨域操作，举个栗子：
一个骗子，在自己网页嵌套一个银行的登录页面，除了网址，其他很难分辨是否是“李逵”还是“李鬼”，
当然银行网址和骗子的网址不相同，于是构成不同域。
受害人在这个网站的iframe输入银行帐号和密码，骗子通过外部的网页很简单的得到iframe内银行网站输入框的value()
jquery:keyup()
不禁止跨域操作，就是这么遣送的得到输入框的value()；
什么是跨域：
博主有很多域名：
www.imcyk.com与blog.imcyl.com
www.imcyk.com与www.cykcykcykcyk.com
可以看出无论主域或者二级域名，只要不同便是跨域
为什么要跨域
1、黑客：例子所述之目的和xss攻击
2、二次开发人员：这些程序猿往往需要对一个公司不同网站之间进行串联互动，不同域名间的嵌套，例如博主
3、前端工程师：牵扯到网页就跟前端有关，别问我为什么，因为博主也是前端工程师
怎么跨域
这里先讲一个思路
A域名下有aaa.html
B域名下有bbb.html
aaa.html嵌套bbb.html
点击bbb.html的click事件调用aaa.html中的ifr()方法，恭喜你，浏览器禁止
那我们转变思路
A域名下有iframe.html页面
如何aaa.html嵌入的是iframe.html同域调用没问题
那如果bbb.html页面嵌套iframe.html 那么iframe..html调用aaa.html也是没问题的
于是iframe..html便是一个代理页面
如何跨域
页面所属和信息
B域名 bbb.html
A域名 aaa.html 、 iframe.html(代理页面)
目的
点击bbb.html的关闭可以remove掉aaa.htm的iframe
代码
bbb.html
<a href="javascript:closeparent()">[关闭×]</a>
<script>
function closeparent(){
if(typeof(exec_obj)=='undefined'){
exec_obj = document.createElement('iframe');
exec_obj.name = 'tmp_frame';
exec_obj.src = 'http://aaa.com/iframe.html'; //载入页面
exec_obj.style.display = 'none';
document.body.appendChild(exec_obj);
}else{
exec_obj.src = 'http://www.wonyen.com/iframe.html' + Math.random(); //刷新页面
}
}
</script>iframe.html
<script> parent.parent.fMain();//载入页面立刻执行 </script>
aaa.html
<script>
function fMain(){
$('iframe').remove();//移除
}
</script>代码流程
bbb.html点击事件动态加载 iframe.html
iframe.html加载后执行 parent.parent.fMain()；
因为aaa.html 相对iframe.html为第二层父元素所以用到2个parent
aaa.html移除iframe