Iframe跨域JavaScript自动适应高度
重点分析:
主域名页面:页面A,页面C
其它域名页面:页面B
步骤:
1、页面A(主域名)通过Iframe(id="iframeB")嵌套页面B(其它域名)
2、页面B(其它域名)获取自身高度值pageB_height,再通过Iframe(id="iframeA")嵌套页面C同时传自身高度值pageB_height给页面C
3、因为页面C和页面A同域名,所以可以在页面C中获取页面A的Iframe(id="iframeB"),并将页面A中的iframeB的高度值设为pageB_height
中间页面C(主域名):http://www.main.com/setheight.aspx
<html><head><title>JavaScript使跨域Iframe自动适应高度中间页面</title>
<script type="text/javascript">
function pseth() {
var iObj = window.parent.parent.document.getElementById('iframeB'); //A和main同域,所以可以访问节点
var iObjH = "";
try {
iObjH = window.parent.parent.frames["iframeB"].frames["iframeA"].location.hash; //访问自己的location对象获取hash值
} catch (e) {
iObjH = window.location.toString();
} var arr = iObjH.split("#")[1];
var arrPasearr = arr.split("|");
// alert(arrPasearr[0]);
iObj.style.height = arrPasearr[0] + "px"; //操作dom if (arrPasearr[1] != undefined && arrPasearr[1] != "")
window.parent.parent.document.title = decodeURI(arrPasearr[1]) + '-吉运商城';
}
try {
pseth();
} catch (e) {
}
</script>
</head><body></body></html>
//code by:博客园-曹永思
主页面A(主域名):http://www.main.com/index.aspx
<html><head><title>主页面</title>
</head><body>
<iframe id="iframeB" src="http://b.main.com/index.html" scrolling="no" width="100%" height="1000px" frameborder="0" marginwidth="0" marginheight="0"></iframe>
</body></html>
嵌套的页面B(其它域名): http://b.main.com/index.html
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>嵌套在Iframe里的页面</title>
</head>
<body bgcolor="#f1e7de">
<iframe id="iframeA" name="iframeA" src="" width="0" height="0" style="display:none;" ></iframe>
</body>
<script type="text/javascript">
function sethash() {
var hashH = document.documentElement.scrollHeight; //获取自身高度
var urlC = "http://www.main.com/setheight.aspx"; //设置iframeA的src
document.getElementById("iframeA").src = urlC + "#" + hashH + "|"; //将高度作为参数传递
}
window.onload = sethash;
</script>
</html>
Iframe跨域JavaScript自动适应高度的更多相关文章
- Iframe跨域嵌入页面自动调整高度的办法
http://www.a.com/A.html http://www.a.com/B.html http://www.a.com/D.js http://www.c.com/C.html A.html ...
- 解决Iframe跨域高度自适应,利用window.postMessage()实现跨域消息传递页面高度(JavaScript)
在iframe跨域引用高度自适应这块写的js方式都试了不管用,最终使用的是window.postMessage() 跨域获取高度 传递信息 1.首先,在主页面上使用iframe引入子页面:也就是A.h ...
- javascript跨域、iframe跨域访问
1.window 对象 浏览器会在其打开一个 HTML 文档时创建一个对应的 window 对象.但是,如果一个文档定义了一个或多个框架(即,包含一个或多个 frame 或 iframe 标签),浏览 ...
- IFrame跨域访问自定义高度
由于JS禁止跨域访问,如何实现不同域的子页面将高度返回给父页面本身,是解决自定义高度的难点. JS跨域访问问题描述:应用A访问应用B的资源,由于A,B应用分别部署在不同应用服务器(tomcat)上,属 ...
- IFrame跨域访问&&IFrame跨域访问自定义高度
1.IFrame跨域访问: http://blog.csdn.net/fdipzone/article/details/17619673 2.IFrame跨域访问自定义高度: 由于JS禁止跨域访问,如 ...
- 关于iFrame特性总计和iFrame跨域解决办法
1.iframe 定义和用法 iframe 元素会创建包含另外一个文档的内联框架(即行内框架). HTML 与 XHTML 之间的差异 在 HTML 4.1 Strict DTD 和 XHTML 1. ...
- CP="CAO PSA OUR" 用P3P header解决iframe跨域访问cookie
1.IE浏览器iframe跨域丢失Session问题 在开发中,我们经常会遇到使用Frame来工作,而且有时是为了跟其他网站集成,应用到多域的情况下,而Iframe是不能保存Session的因此,网上 ...
- js iframe跨域访问
1.什么是跨域? 2.前台解决跨域几种方法 2.1 动态创建script 2.2 使用document.domain 2.3使用HTML5新属性postMessage 2.4 利用iframe和loc ...
- JS跨域(ajax跨域、iframe跨域)解决方法及原理详解(jsonp)
这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...
随机推荐
- linux命令学习之:route
我们在网络基础的时候谈过关于路由的问题,两台主机之间一定要有路由才能够互通TCP/IP的协议,否则就无法进行联机.一般来说,只要有网络接口,该接口就会产生一个路由,例如:eth0及lo. route命 ...
- 15-算法训练 P1103
http://lx.lanqiao.cn/problem.page?gpid=T372 算法训练 P1103 时间限制:1.0s 内存限制:256.0MB 编程实现两个复数的运算 ...
- alv界面透视功能
bdcdata_wa-fnam = 'P_MONAT-LOW'. bdcdata_wa-fval = '01'. APPEND bdcdata_ ...
- Solidity通过合约转ERC20代币
ERC20代币并不能像Ether一样使用sendTo.transfer(amt)来转账,ERC20代币只能通过token中定义的transfer方法来转账,每个账户的余额信息也只保存在token合约的 ...
- Hadoop(三) HADOOP常用命令参数介绍
-help 功能:输出这个命令参数手册 -ls 功能:显示目录信息 示例: hadoop fs -ls hdfs://hadoop-server01:9000/ 备注 ...
- svn冲突问题解决办法
经常有人会说,树冲突是很难解决的一类冲突,其实一旦了解了其原理,要解决也不难.先回顾下对于树冲突的定义. 树冲突:当一名开发人员移动.重命名.删除一个文件或文件夹,而另一名开发人员也对它们进行 ...
- DNA甲基化测序方法介绍
DNA甲基化测序方法介绍 甲基化 表观遗传学 DNA 甲基化是表观遗传学(Epigenetics)的重要组成部分,在维持正常细胞功能.遗传印记.胚胎发育以及人类肿瘤发生中起着重要作用,是目前新的研究热 ...
- Oracle VM VirtualBox如何设置网络地址转换NAT
使用VirtualBox 安装好服务器后,需要设置网络,如果有IP, 则可以直接连接物理网络了, 如果没有,则可以直接使用NAT网络.设置方便快速. 先将虚拟机中的网络设置为自动获取,然后点击Virt ...
- C#在Winform程序中显示QQ在线状态
首先,引入必要的命名空间 using System.Windows.Forms; using System.Net; 其次,在Form中拖入一个PictureBox控件,并设置其SizeMode为A ...
- java正则表达式(字符串)
参考:http://blog.csdn.net/kdnuggets/article/details/2526588 补充: ?号的使用: ^/branch/([a-z]+[/]?)$ 可以匹配 /b ...