Iframe 高度自适应 example （跨子域实现）
跨子域的iframe高度自适应
比如 'https://www.kzwr.com/topics/baidu' 嵌入了 'http://pan.kzwr.com/'，这种跨子域的页面,实现起来也比较简单，看下面的详细代码：
<!doctype html>
<html >
<head>
<title>iframe 自适应高度测试</title>
<style>
iframe{
background-color:aquamarine;
width:100%
}
</style>
</head> <body>
<iframe src="./index1.html" frameborder="0" id="ifr"></iframe>
</body>
</html>
<!doctype html>
<html>
<head>
<title>hello</title>
<style>
#one {
width: 100px;
height: 1110px;
background-color: #ff6a00;
}
</style>
</head>
<body>
<div id="one"> </div>
<script>
// 计算页面的实际高度，iframe自适应会用到
//www.kzwr.com 欢迎朋友们前来交流
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 height = calcPageHeight(document)
parent.document.getElementById('ifr').style.height = height + 'px'
}
</script>
</body>
</html>
Iframe 高度自适应 example （跨子域实现）的更多相关文章
- 跨子域的iframe高度自适应
一.跨子域的iframe高度自适应 比如 'a.jd.com/3.html' 嵌入了 'b.jd.com/4.html',这种跨子域的页面 3.html 1 2 3 4 5 6 7 8 9 10 11 ...
- 完美实现跨域Iframe高度自适应【Iframe跨域高度自适应解决方案】
Iframe的强大功能偶就不多说了,它不但被开发人员经常运用,而且黑客们也常常使用它,总之用过的人知道它的强大之处,但是Iframe有个致命的“BUG”就是iframe的高度无法自动适应,这一点让很多 ...
- 跨域iframe高度自适应(兼容IE/FF/OP/Chrome)
采用JavaScript来控制iframe元素的高度是iframe高度自适应的关键,同时由于JavaScript对不同域名下权限的控制,引发出同域.跨域两种情况. 由于客户端js使用浏览器的同源安全策 ...
- 跨域iframe高度自适应（兼容IE/FF/OP/Chrome）
采用JavaScript来控制iframe元素的高度是iframe高度自适应的关键,同时由于JavaScript对不同域名下权限的控制,引发出同域.跨域两种情况. 由于客户端js使用浏览器的同源安全策 ...
- 谷歌、火狐浏览器下实现JS跨域iframe高度自适应的完美解决方法，跨域调用JS不再是难题！
谷歌.火狐浏览器下实现JS跨域iframe高度自适应的解决方法 导读:今天开发的时候遇到个iframe自适应高度的问题,相信大家对这个不陌生,但是一般我们都是在同一个项目使用iframe嵌套页面,这个 ...
- CSS完美实现iframe高度自适应（支持跨域）
Iframe的强大功能偶就不多说了,它不但被开发人员经常运用,而且黑客们也常常使用它,总之用过的人知道它的强大之处,但是Iframe有个致命的"BUG"就是iframe的高度无法自 ...
- Iframe高度自适应（兼容IEFirefox、同域跨域）
在实际的项目进行中,很多地方可能由于历史原因不得不去使用iframe,包括目前正火热的应用开发也是如此. 随之而来的就是在实际使用iframe中,会遇到iframe高度的问题,由于被嵌套的页面长度不固 ...
- Iframe高度自适应（兼容IE/Firefox、同域/跨域）
在实际的项目进行中,很多地方可能由于历史原因不得不去使用iframe,包括目前正火热的应用开发也是如此. 随之而来的就是在实际使用iframe中,会遇到iframe高度的问题,由于被嵌套的页面长度不固 ...
- iframe高度自适应
前两天在网上看到了一道面试题,问iframe高度自适应的问题.发现自己之前几乎没有关注过iframe的问题,所以在这里记录一下. 原题目是: 页面A的域名是:http://www.taobao.com ...
随机推荐
- 【Oracle】Oracle数据库DATABASE LINK 的命名
当前数据库的GLOBAL_NAMES参数设置为 TRUE,使用DATABASE LINK 时,DATABASE LINK的名称必须与被连接库的 GLOBAL_NAME一致. 而要建多个 DBLINK到 ...
- C# 在根据窗体中的表格数据生成word文档时出错
出错内容为:
- 转：devise使用
1.gem install devise 2.在gemfile中添加 gem 'devise' 3.bundle install 4.执行 rails generate devise:install ...
- Keepalive VIP 故障
前端环境如下: Nginx + Keepalived ( MASTER ) --> node * | | Cisco ASA --> VIP 1.18 | | Nginx + Keepal ...
- bootstrap 的页码显示问题-------------德州
之前一个小bug,无论上边怎么搜索,下边的页码,不会改变 调整: 1,在mapper中添加计数, 2,找到service,queryPage中添加, 3,关键一部,如果没有会报错:,找不到该列 so, ...
- linux 系统的后台运行
后台运行:nohup 程序名 & 杀死后台 ps -ef|grep 名称 kill -9 id(查出的程序id)
- atom 配置备忘
插件 vim-mode-plus vim-mode-plus-ex-mode plateformio-ide-terminal 'cmd窗口 docblockr 帮助你快速的生成注释 linte ...
- ubuntu linux常用指令（1）
序号 命令 说明 1 sudo su 从普通用户切换到root用户 2 su user 从root用户切换到普通用户 3 ls 列出当前目录的文件和目录,但是不包括隐藏文件和目录 4 ls -a 列出 ...
- 在linux下安装并操作tomcat
1.安装tomcat1).下载tomcat从官网http://tomcat.apache.org/下载tomcat,保存在/home目录下.root@ubuntu:/home/ubuntu/Downl ...
- jsp出现getOutputStream() has already been called for this response异常的原因和解决方法
jsp出现getOutputStream() has already been called for this response异常的原因和解决方法 在tomcat5下jsp中出现此错误一般都是在js ...