Javascript跨域问题解决方案

摘要:
上述实现方法是解决这一问题的好方法;该解决方案的主要优点是,尽管浏览器将禁止js跨域访问页面中的对象,但对iframe的层次关系引用没有限制,即父级仍然可用;该解决方案使用两层嵌入式iframe,并使用第二层iframe中的页面和父级。父级的页面与域名相关,以避免跨域问题,实现两个页面之间的相关数据传输。本质上,它是使用父级。parent在父页面中实现js的回调!

---本方法来自网上,因最近项目需求,解决了三天未果,最终发现此文并测试可用。

一个

非常优雅绝妙的解决方案!话不多说,直接上解决方案原理图:Javascript跨域问题解决方案第1张

该图要解决的问题说明如下:
在AAA.com域名下的index.htm页面中内嵌了BBB.com域名下的一个页面index.htm,正常情况下iframe内部的index.htm页面是无法访问父页面index.htm中的任何dom对象或者js函数的,因为跨域,但我们经常又需要做一些参数回传的事情怎么办呢?以上的这种实现方式就很好的解决了这个问题;

解决方案的关键优雅之处在于:浏览器虽然会禁止js跨域访问页面中的对象,但对于iframe的层级关系引用并没有做限制,即parent仍然可用;该方案就是利用了2层内嵌iframe、使用第二级iframe中的页面与parent.parent的页面是同域名的关系,从而避免跨域问题实现两个页面间相关数据的传递,本质上就是利用parent.parent实现对父父页面中js的回调

举个实际的案例吧:
功能描述
A域名下的页面index.htm中内嵌了一个iframe页面,iframe内引用的是B域名的sub-index.htm页面,但是为了避免出现在index.htm页面中出现滚动条,我们需要明确知道sub-index.htm页面的高度和宽度,可是sub-index.htm的页面内容是不可控的,可能会根据不同用户页面大小会不一样;问题就是如何把sub-index.htm页面的高度和宽度传递给index.htm页面?

具体解决
1、在index.htm页面中声明一个js函数process(height, width);用来实现设置页面内iframe的高度和宽度;
2、在sub-index.htm页面中再内嵌一个隐藏的iframe,iframe的src指向A域名下的页面ex.htm?height=xx&width=yy,该页面没有任何内容,只是用来传递sub-index.htm页面加载完之后的宽度和高度这两个数据的,页面内js拿到request中的参数之后直接调用parent.parent.process(height, width);完成对父页面宽度和高度的设置;
看如下的这个时序图:Javascript跨域问题解决方案第2张


 

免责声明:文章转载自《Javascript跨域问题解决方案》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇zabbix_sender自定义监控mysql通过mysql_install_db初始化数据目录时使用--user选项的作用是什么?下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

js(javascript)与ios(Objective-C)相互通信交互

随着苹果SDK的不断升级,越来越多的新特性增加了进来,本文主要讲述从iOS6至今,Native与JavaScript的交互方法 一、UIWebview && iframe && JavaScript  <=iOS6 iOS6原生没有提供js直接调用Objective-C的方式,只能通过UIWebView的UIWebVi...

layer弹出层不居中解决方案,仅显示遮罩,没有弹窗

问题:项目中layer询问层的弹窗仅显示遮罩层,并不显示弹窗…… 原因:图片太多将layer弹窗挤出屏幕下方,看不见了…… 解决方案:让layer的弹出层居中显示 一、问题描述 用layer做操作结果提示时,发现如果页面超出屏幕的高度时,弹出的提示不是屏幕居中,而是在页面高度的中间,如果一个页面的高度比较大,就看不到提示了。 还有一种情况是Layer弹出窗...

iframe嵌套页面中的跳转

简单说一下场景。 假设有A、B、C和D四个JSP页面,D通过iframe嵌套在C中,C通过iframe嵌套在B中,B通过iframe嵌套在A中。 然后现在在D中编写JavaScript代码跳转页面。 在本页面跳转(D页面所在的iframe中跳转) window.location.href = 'http://t.zoukankan.com/要跳转的页面路径...

文件异步上传

本文摘抄自网络 XHR对象还有一个属性upload, 它返回一个XMLHttpRequestUpload 对象,这个对象拥有下列下列方法: onloadstart onprogress onabort onerror onload ontimeout onloadend 这些方法在XHR对象中都存在同名版本,区别是后者是用于加载资源时,而前者用于资源上...

iframe高度自适应

前两天在网上看到了一道面试题,问iframe高度自适应的问题。发现自己之前几乎没有关注过iframe的问题,所以在这里记录一下。 原题目是: 页面A的域名是:http://www.taobao.com,页面B的域名是http://www.tmall.com,如果A使用iframe引用页面B,如何做到iframe的高度自适应(即B内容有多高,iframe就有...

vue使用iframe嵌入html,js方法互调

前段时间 使用h5搞了个用cesium.js做的地图服务功能,后来想整合到vue项目,当然最简单的就是iframe直接拿来用了。但html和vue的方法交互就是成了问题,vue调用html种方法还好,尤其是html调用vue中的方法当初就没有解决,忙着项目上线直接搞了个setInterval不停轮询,哎不说他了;现在空点了来把问题解决了,俗话说得好闲时学来...