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 ...
随机推荐
- Python 小结
1. Python pass是空语句,是为了保持程序结构的完整性. pass 不做任何事情,一般用做占位语句. 2.删除一个list里面的重复元素 方法一:是利用map的fromkeys来自动过滤重复 ...
- MyBatis 学习记录3 MapperMethod类
主题 之前学习了一下MapperProxy的生产过程,自定义Mapper类的对象是通过动态代理生产的,调用自定义方法的时候实际上是调用了MapperMethod的execute方法:mapperMet ...
- go_函数
函数语法要点 返回值类型写在最后面 可返回多个值 函数可作为参数 没有默认参数,可选参数,只有可变参数列表(...int) package main import ( "fmt" ...
- inputStream输入流转为String对象(将String对象转为inputStream输入流)
不得不说org.apache.commons包下有很多实用的工具类. org.apache.commons.io.IOUtils; 要将inputStream输入流转为String对象,只需使用org ...
- DBArtist之Oracle入门第4步: Oracle创建数据库
刚开始进去后,我是懵逼的状态,不知道要干嘛,之前常用的是MSSQL,感觉两者还是有区别的: oracle中:1.查询数据库名:select name,dbid from v$database;或者sh ...
- 为什么ajax发GET请求就成功,POST请求则报错?
为什么ajax发GET请求就成功,POST请求则报错? (1)首先说明的是请求的URL是一个静态资源,比如一个json文件.(2)现在现象是发GET请求就成功,POST请求则报错.(3)最新发现:就算 ...
- Intellij IDEA 安装插件 报 ‘plugin xxxx is incompatible‘ 解决方案
网上下载安装LOMBOK失败,直接下载插件安装: 在离线安装IDEA插件的时候,可能会出现该问题.引起的原因主要就是版本号不一致. 下面介绍下离线安装找到合适的版本号. 1.在IDEA的help-&g ...
- Android TV上的焦点切换效果
转载:http://blog.csdn.net/wzlas111/article/details/39741091 Android TV上的焦点凸显特效相信大家都看到过,那么我们就来实现它吧,首先上张 ...
- Openssl req命令
一.简介 req指令用来创建和处理PKCS#10格式的证书 二.语法 openssl req [-inform PEM|DER] [-outform PEM|DER] [-in filename] [ ...
- 954I Yet Another String Matching Problem
传送门 分析 我们先考虑暴力如何计算 对于S的子串SS,如果它有位置i使得SS[i] != T[i]那么我们就将两个字符之间用并查集连边 最后答案很明显就是并查集中所有边的个数 于是我们可以发现对于S ...