iframe跨域解决 【手记】

iframe跨域解决 【手记】

关于跨域的问题，网上已经讲了很多，在这里，我就不一一讲解了，

这里有个参考地址，可以了解下跨域的多种情况.

http://www.cnblogs.com/rainman/archive/2011/02/20/1959325.html

关于iframe跨域解决，也有参考地址

http://www.cnblogs.com/pigtail/archive/2013/01/24/2875310.html

http://www.cnblogs.com/ljhero/archive/2011/07/09/2101540.html

关于ajax跨域我的文章之前有讲过，在这里

https://www.xiaobai8.com/Blog/494.html

同样也可以试试

Php的另外一种方式

<? 
define('CORS' 
koupit-pilulky.com
 , 'http://www.baidu.com'); 
header ( 'Access-Control-Allow-Origin:' . CORS ); 
?>

上面的这种，其实也可以在nginx里面配置.

那么以上都是废话，现在进入正题，iframe跨域解决心得，那么下面的demo也是参考上面的链接地址写的demo，主要是上面的文章，时间已经过去很久了，又没有demo，新手们也许不是很明白，那么我在这里放一个demo 出来，让大家了解清楚，到底是怎么实现的.

首先呢，必须你要知道跨域的种类有哪些,请看前面链接的文章就OK了.

Demo文件夹 里面有两个目录.

1.开始环境准备工作

一个main 目录（本地配置host文件映射到 www.main.com）

一个visited目录（本地配置host文件映射到 www.visited.com）

前提你是会配置本地开发环境的,因为你是要本地模拟两个域名，你不可能因为做这种跨域调试，真的把代码发布到线上吧。。。。

2.上面准备工作做好之后，打开浏览器访问

http://www.main.com/main.html

而main.html其实里面是有iframe 嵌入 http://www.visited.com/visited.html 的页面的.

此时是同协议的不同域名访问，一般因为visited.html要操作main.html的元素，所以是属于跨域操作.这个时候，浏览器会抛出一个跨域的异常提示 (why?浏览器安全限制呗)

一般这种情况的解决方式，就是新增代理文件，其实很多跨域解决方案，都是要增加代理文件的.通过代理文件中转，我这里使用的proxy.html 作为中转.这个文件在主域名下面，还是蛮重要的呢.

在这整个的流程里面，其实也没有什么新技术，主要还是去监控嵌入页面的url地址的变化做出相应的更改,具体的可以看我demo中的代码，因为这个要自己实际操作过的才知道到底怎么回事。同样我们也可以结合网上的一些文章，在看看我这个简单的demo之后，相信大家对iframe跨域的解决方式也就不会感到疑惑和陌生了.

后记:

这里仅仅是自己的一点理解,写的比较简单,没有什么更高深的东西，因为在实际项目操作中，又不用考虑，不是每个项目，都跟某宝一样，访问量那么大，就遭对手嫉妒了，实际情况，实际操作就可以了.

有什么不明白也可以留言我哦. web前端 杭州-小白

demo 附件这里下载 iframe20141115