页面域关系:

a.html所属域A:www.A.com
b.html所属域B:www.B.com

问题本质:

js对跨域iframe访问问题,因为要控制a.html中iframe的高度和宽度就必须首先读取得到b.html的大小,A、B不属于同一个域,浏览器为了安全性考虑,使js跨域访问受限,读取不到b.html的高度和宽度.

解决方案:

引入代理代理页面c.html与a.html所属相同域A,c.html是A域下提供好的中间代理页面,假设c.html的地址:www.A.com/c.html ,它负责读取location.hash里面的width和height的值,然后设置与它同域下的a.html中的iframe的宽度和高度.

代码如下: 

a.html代码

首先a.html中通过iframe引入了b.html

代码如下:

<iframe id=”b_iframe” height=”0″ width=”0″ src=”http://www.B.com/b.html” frameborder=”no” border=”0px” marginwidth=”0″ marginheight=”0″ scrolling=”no” allowtransparency=”yes” ></iframe>

  

b.html代码

代码如下:

<script type=”text/javascript”>
var b_width = Math.max(document.documentElement.clientWidth,document.body.clientWidth);
var b_height = Math.max(document.documentElement.clientHeight,document.body.clientHeight);
var c_iframe = document.getElementById(”c_iframe”);
c_iframe.src = c_iframe.src+”#”+b_width+”|”+b_height; //http://www.jb51.net/c.html#width|height”
}
</script>
<iframe id=”c_iframe” height=”0″ width=”0″ src=”http://www.A.com/c.html” style=“display:none” ></iframe> 
<!–js读取b.html的宽和高,把读取到的宽和高设置到和a.html在同一个域的中间代理页面车c.html的src的hash里面–> 

c.html代码

代码如下:

<script type=”text/javascript”>
var b_iframe = parent.parent.document.getElementById(”b_iframe”);
var hash_url = window.location.hash;
var hash_width = hash_url.split(”#”)[1].split(”|”)[0]+”px”;
var hash_height = hash_url.split(”#”)[1].split(”|”)[1]+”px”;
b_iframe.style.width = hash_width;
b_iframe.style.height = hash_height;
</script>

a.html中的iframe就可以自适应为b.html的宽和高了.

javascript跨域通信(一):利用location.hash实现跨域iframe自适应的更多相关文章

  1. 利用location.hash+iframe跨域获取数据详解

    前言 如果看懂了前文利用window.name+iframe跨域获取数据,那么此文也就很好理解了.一样都是动态插入一个iframe,然后把iframe的src指向服务端地址,而服务端同样都是输出一段j ...

  2. JavaScript跨域总结与解决办法 什么是跨域

    什么是跨域 1.document.domain+iframe的设置 2.动态创建script 3.利用iframe和location.hash 4.window.name实现的跨域数据传输 5.使用H ...

  3. 使用 JSONP 实现跨域通信

    简介 Asynchronous JavaScript and XML (Ajax) 是驱动新一代 Web 站点(流行术语为 Web 2.0 站点)的关键技术.Ajax 允许在不干扰 Web 应用程序的 ...

  4. iframe之间通信问题及iframe自适应高度问题

    下面本人来谈谈iframe之间通信问题及iframe自适应高度问题. 1. iframe通信 分为:同域通信 和 跨域通信.所谓同域通信是指 http://localhost/demo/iframe/ ...

  5. js 利用iframe和location.hash跨域解决的方法,java图片上传回调JS函数跨域

    奶奶的:折腾了我二天,最终攻克了!网上有非常多样例. 但跟我的都不太一样,费话不多说了,上图   上代码: IE ,firefix,chrome 測试通过 js :这个主页面,部分代码, functi ...

  6. 【JavaScript】父子页面之间跨域通信的方法

    由于同源策略的限制,JavaScript跨域的问题,一直是一个比较棘手的问题,为了解决页面之间的跨域通信,大家煞费苦心,研究了各种跨域方案.之前也有小网同学分享过一篇“跨域,不再纠结” 开始照着尝试时 ...

  7. 黄聪:利用iframe实现ajax 跨域通信的解决方案(转)

    原文:http://www.cnblogs.com/xueming/archive/2013/02/01/crossdomainajax.html 在漫长的前端开发旅途上,无可避免的会接触到ajax, ...

  8. JavaScript 跨域:window.postMessage 实现跨域通信

    JavaScript 跨域方式实现方式有很多,之前,一篇文章中提到了 JSONP 形式实现跨域.本文将介绍 HTML5 新增的 api 实现跨域:window.postMessage . 1 othe ...

  9. JavaScript系列----AJAX机制详解以及跨域通信

    1.Ajax 1.1.Ajax简介 Ajax简介这一部分我们主要是谈一下ajax的起源,ajax是什么?因为这些是跟技术无关的.所以,大多细节都是一笔带过. Ajax的起源? Ajax一词源于2005 ...

随机推荐

  1. Framework7--Test

    <!doctype html> <html> <head> <title>{{title}}</title> <meta charse ...

  2. SER SERVER存储过程

    Transact-SQL中的存储过程,非常类似于C#语言中的方法,可以重复调用.当存储过程执行一次后,可以将语句存储到缓存中,这样下次执行的时候直接使用缓存中的语句.这样就可以提高存储过程的性能. 一 ...

  3. 行锁sqlserver

    SELECT COUNT(1) FROM BLBQ_Sys_TableId With (RowLock,UpdLock) WHERE Table_Name = @Table_Name commit   ...

  4. Asp.net web api部署在某些服务器上老是404

    asp.net web api部署在Windows服务器上后,按照WebAPI定义的路由访问,老是出现404,但定义一个静态文件从站点访问,却又OK. 这时,便可以确定是WebAPI路由出了问题,经调 ...

  5. html、css、js文件加载顺序及执行情况

      HTML页面加载和解析流程 1. 用户输入网址(假设是个html页面,并且是第一次访问),浏览器向服务器发出请求,服务器返回html文件. 2. 浏览器开始载入html代码,发现<head& ...

  6. 使用 IntraWeb (44) - 测试读取 SqLite (三)

    使用数据连接池(TIWDataModulePool). 新建工程时勾选 Pool Data Connections: 新增的 Pool(TIWDataModulePool) 被放在 ServerCon ...

  7. MongoDB数据库简介及安装

    一.MongoDB数据库简介 简介 MongoDB是一个高性能,开源,无模式的,基于分布式文件存储的文档型数据库,由C++语言编写,其名称来源取自"humongous",是一种开源 ...

  8. gvim 配置Pydiction

    配置windows下gvim 的python关键字补全插件Pydiction 1.下载Pydiction 2.解压缩包,里面有after文件夹.complete-dict.pydiction.py 3 ...

  9. poj3050

    #include <stdio.h> #include <set> #include <string> using namespace std; int a[6]; ...

  10. servers无法输入server name

    Here is the workaround that worked for me: Close Eclipse In {workspace-directory}/.metadata/.plugins ...