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跨域我的文章之前有讲过,在这里

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

同样也可以试试

Php的另外一种方式

上面的这种,其实也可以在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

本文固定链接: http://www.xiaobai8.com/Blog/897.html | web前端,杭州小白的个人博客,小白的个人博客

该日志由 杭州-小白 于2014年11月15日发表在 javascript, other, 分享 分类下,
原创文章转载请注明: iframe跨域解决 【手记】 | web前端,杭州小白的个人博客,小白的个人博客
关键字: ,

iframe跨域解决 【手记】:目前有1 条留言

  1. 沙发
    瓜丢网:

    :mrgreen: 又一技术男银

    2014-12-26 18:23