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 id="iframe_shg" src="http://www.c.com/c.html" frameborder="0" width="100%"></iframe>
________________________________________________________________
B.html:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>B.html</title>
</head>
<body>
<script type="text/javascript">
window.onload = function() {
var isSet = false
var inteval = setInterval(function() {
var search = location.search.replace('?', '')
if (isSet) {
clearInterval(inteval)
return
}
if (search) {
var height = search.split('=')[1]
var doc = parent.parent.document
var ifr = doc.getElementById('iframe_shg')
ifr.style.height = height + 'px'
isSet = true
}
}, 500)
}
</script>
</body>
</html>
________________________________________________________________
D.js
// 计算页面的实际高度,iframe自适应会用到
function calcPageHeight(doc) {
var cHeight = Math.max(doc.body.clientHeight, doc.documentElement.clientHeight)
var sHeight = Math.max(doc.body.scrollHeight, doc.documentElement.scrollHeight)
var height = Math.max(cHeight, sHeight)
return height
}
window.onload = function () {
var doc = document
var height = calcPageHeight(doc)
var myifr = doc.getElementById('myifr')
if (myifr) {
myifr.src = 'http://www.a.com/B.html?height=' + height
// console.log(doc.documentElement.scrollHeight)
}
};
_________________________________________________________________
C.html
<body>
........................
<iframe id="myifr" style="display:none" src="http://www.a.com/B.html"></iframe>
<script type="text/javascript" src="http://www.a.com/D.js"></script>
</body>
Iframe跨域嵌入页面自动调整高度的办法的更多相关文章
- Iframe跨域JavaScript自动适应高度
重点分析: 主域名页面:页面A,页面C 其它域名页面:页面B 步骤: 1.页面A(主域名)通过Iframe(id="iframeB")嵌套页面B(其它域名) 2.页面B(其它域名) ...
- 解决Iframe跨域高度自适应,利用window.postMessage()实现跨域消息传递页面高度(JavaScript)
在iframe跨域引用高度自适应这块写的js方式都试了不管用,最终使用的是window.postMessage() 跨域获取高度 传递信息 1.首先,在主页面上使用iframe引入子页面:也就是A.h ...
- IFrame跨域访问自定义高度
由于JS禁止跨域访问,如何实现不同域的子页面将高度返回给父页面本身,是解决自定义高度的难点. JS跨域访问问题描述:应用A访问应用B的资源,由于A,B应用分别部署在不同应用服务器(tomcat)上,属 ...
- IFrame跨域访问&&IFrame跨域访问自定义高度
1.IFrame跨域访问: http://blog.csdn.net/fdipzone/article/details/17619673 2.IFrame跨域访问自定义高度: 由于JS禁止跨域访问,如 ...
- IE下IFrame引用跨域站点页面时,Session失效问题解决
问题场景:在一个应用(集团门户)的某个page中, 通过IFrame的方式嵌入另一个应用(集团实时监管系统)的某个页面. 当两个应用的domain 不一样时, 在被嵌入的页面中Session失效.(s ...
- 子页面iframe跨域执行父页面定义的JS方法
问题需求:父页面与子页面iframe跨域嵌套,子页面要触发父页面所定义的js方法.父子页面的数据传递. 下文中会用到一些文件:父页面: parent.html嵌在父页面的子iframe页面:child ...
- iframe跨域cookie问题
今天在项目里面遇到了iframe跨域不能写cookie的问题.应用场景是这样的:有A和B两个业务,A要通过iframe的方式嵌入B,但是在ie下A不能通过写cookie的方式记录信息,在firefox ...
- js iframe跨域访问
1.什么是跨域? 2.前台解决跨域几种方法 2.1 动态创建script 2.2 使用document.domain 2.3使用HTML5新属性postMessage 2.4 利用iframe和loc ...
- iframe跨域通信实战
"长时间不写文章,开头的方式总是那么出奇的相似",最近很忙,好久没写博客了啊(是不是?). 更换工作已经有三个月有余,这段三个月把过去三年没加过的班都加了一次.收获挺多,发现的问题 ...
随机推荐
- 第二十四篇configparser(**)
configparser模块 config:配置,parser:解析.字面意思理解configparser模块就是配置文件的解析模块. 来看一个好多软件的常见文档格式如下: [DEFAULT] # 标 ...
- NLP系列-中文分词(基于统计)
上文已经介绍了基于词典的中文分词,现在让我们来看一下基于统计的中文分词. 统计分词: 统计分词的主要思想是把每个词看做是由字组成的,如果相连的字在不同文本中出现的次数越多,就证明这段相连的字很有可能就 ...
- C++ 学习笔记之——文件操作和文件流
1. 文件的概念 对于用户来说,常用到的文件有两大类:程序文件和数据文件.而根据文件中数据的组织方式,则可以将文件分为 ASCII 文件和二进制文件. ASCII 文件,又称字符文件或者文本文件,它的 ...
- Queue模块初识
Queue模块实现了多生产者.多消费者队列.它特别适用于信息必须在多个线程间安全地交换的多线程程序中.这个模块中的Queue类实现了所有必须的锁语义.它依赖于Python中线程支持的可用性:参见thr ...
- [转]如何清空Chrome缓存和Cookie
当您使用浏览器(例如 Chrome)时,浏览器会将网站中的一些信息保存在其缓存和 Cookie 中. 清除这些内容可以解决某些问题,例如网站上的加载或格式设置问题. 在 Chrome 中 在计算机上打 ...
- io学习2-磁盘阵列RAID
磁盘阵列 RAID(Redundant ArrayOf Inexpensive Disks) 如果你是一位数据库管理员或者经常接触服务器,那对RAID应该很熟悉了,作为最廉价的存储解决方案,RAID早 ...
- 完全删除SQL server 2008
一.在控制面板卸载程序 二.点击删除 遇到这种情况则重新启动计算机,之后依次按步骤进行即可. 三.卸载一些相关组件,方法与之类似 四.删除磁盘里的默认文件(一般数据库默认安装在C盘) 路径:" ...
- Resources for Browser/Webkit/GPU
Tali Garsiel's site: http://taligarsiel.com/ Webkit Main Flow Chromium Project: http://www.chromium. ...
- iMuseum
iMuseum 每日环球展览 iMuseum https://itunes.apple.com/cn/app/%E6%AF%8F%E6%97%A5%E7%8E%AF%E7%90%83%E5%B1%95 ...
- Hibernate 映射文件基本概述
映射文件描述了对象与数据库的关系,是Hibernate运行的核心文件之一,也是编写Hibernate的重点 映射文件是从java对象的角度去考虑的问题 基本的一个映射文件 <?xml versi ...