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

一个

非常优雅绝妙的解决方案!话不多说,直接上解决方案原理图:

该图要解决的问题说明如下:
在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跨域问题解决方案的更多相关文章

  1. thinkphp,javascript跨域请求解决方案

    javascript跨域请求解决方案 前言 对于很多前端或者做混合开发的同学,我们难免会遇到跨域发起请求业务,比如A站点向B站点请求数据等等.由于最近要做一个站点集群的项目,所以具体业务要求很多个站点 ...

  2. 优雅绝妙的Javascript跨域问题解决方案

    关于Javascript跨域问题的解决方案已在之前的一片文章中详细说明,详见:http://blog.csdn.net/sfdev/archive/2009/02/13/3887006.aspx: 除 ...

  3. Javascript 跨域访问解决方案 总结

    在客户端编程语言中,如javascript和ActionScript,同源策略是一个很重要的安全理念,它在保证数据的安全性方面有着重要的意义.同 源策略规定跨域之间的脚本是隔离的,一个域的脚本不能访问 ...

  4. JavaScript 跨域漫游

    前言: 最近在公司做了几个项目都涉及到了iframe,也就是在这些iframe多次嵌套的项目中,我发现之前对iframe的认识还是比较不足的,所以就静下心来,好好整理总结了iframe的相关知识:&l ...

  5. C#进阶系列——WebApi 跨域问题解决方案:CORS

    前言:上篇总结了下WebApi的接口测试工具的使用,这篇接着来看看WebAPI的另一个常见问题:跨域问题.本篇主要从实例的角度分享下CORS解决跨域问题一些细节. WebApi系列文章 C#进阶系列— ...

  6. C#进阶系列——WebApi 跨域问题解决方案:CORS(转载)

    C#进阶系列——WebApi 跨域问题解决方案:CORS   阅读目录 一.跨域问题的由来 二.跨域问题解决原理 三.跨域问题解决细节 1.场景描述 2.场景测试 四.总结 正文 前言:上篇总结了下W ...

  7. 跨域学习笔记2--WebApi 跨域问题解决方案:CORS

    自己并不懂,在此先记录下来,留待以后学习... 正文 前言:上篇总结了下WebApi的接口测试工具的使用,这篇接着来看看WebAPI的另一个常见问题:跨域问题.本篇主要从实例的角度分享下CORS解决跨 ...

  8. jQuery(三) javascript跨域问题(JSONP解决)

    加油~ --WH 一.什么是javascript跨域问题? 域:服务器域名,唯一标识(协议,域名,端口)必须保证一致,说明域相同 跨域:在一个服务器上,去访问另一个服务器上,并且得到另一个服务器返回回 ...

  9. angularjs跨域post解决方案

    转自:http://www.thinksaas.cn/topics/0/34/34536.html 前端同学李雷和后台同学韩梅梅分别在自己电脑上进行开发,后台接口写好的时候,李雷改动完就把前端代码上传 ...

随机推荐

  1. 阅读学术论文的心得体会from小木虫

    我们搞科研的很重要的一个环节就是文献的阅读!关于如何阅读文献?读什么,怎么读?结合我自己的体会,我想这里的关键在于要让我们通过这种方式的学习,学会看懂作者的思想.思路和科学方法,从中学习论文作者发现问 ...

  2. Python 新手常犯错误(第二部分)

    转发自:http://blog.jobbole.com/43826/ 在之前几个月里,我教一些不了解Python的孩子来慢慢熟悉这门语言.渐渐地,我发现了一些几乎所有Python初学者都会犯的错误,所 ...

  3. ResponsiveSlides.js最轻量级的幻灯片插件

    摘要:ResponsiveSlides.js是一个展示同一容器内图片的轻量级响应式jQuery幻灯片插件它支持包括IE6在内的几乎所有的浏览器,在IE6中还支持最大宽度属性,但在其它浏览器中并不原生支 ...

  4. ZOJ 1037 Gridland

    原题链接 题目大意:给出一个格子图,求走完所有节点的最短路径距离. 解法:简单啊,如果都是奇数,可以走一次斜边,其他情况就是长*宽. 参考代码: #include <stdio.h> in ...

  5. matlab演奏《卡农》

    % Cripple Pachebel’s Canon on Matlab% Have fun fs = 44100; % sample ratedt = 1/fs; T16 = 0.125; t16 ...

  6. 常用的phpstorm设置

    1.始终在项目编辑器中显示行号[Show line numbers],可以通过File->Setting->Editor->Appearance->Show line numb ...

  7. Android——GridView(显示文字)

    activity_test9的layout文件: <?xml version="1.0" encoding="utf-8"?> <Linear ...

  8. win7win8一键取得超级管理员权限

    win7win8有时会出现删除不了文件的情况,弹窗提示需要某某权限,下面为解决办法: 在普通帐户中快速获得最高的权限: 新建一个.txt文本,将下面的代码复制粘贴到文件中,另存为或重命名为.reg文件 ...

  9. exceptions-in-java

    http://www.javaworld.com/article/2076721/core-java/designing-with-exceptions.html http://www.javawor ...

  10. set and Sequence theory

    https://en.wikipedia.org/wiki/Class_(set_theory) https://en.wikipedia.org/wiki/Zermelo%E2%80%93Fraen ...