iframe自适应高度的多种方法小结
转自:http://www.jb51.net/article/15780.htm
不带边框的iframe因为能和网页无缝的结合从而不刷新页面的情况下更新页面的部分数据成为可能,可是 iframe的大小却不像层那样可以“伸缩自如”,所以带来了使用上的麻烦,给iframe设置高度的时候多了也不好,少了更是不行,现在,总结一下iframe动态调整高度的方法,主要是以下JS函数:
第一种方法:(代码简单,兼容性还可以,先测试下)
function SetWinHeight(obj) {
var win=obj;
if (document.getElementById){
if (win && !window.opera){
if (win.contentDocument && win.contentDocument.body.offsetHeight)
win.height = win.contentDocument.body.offsetHeight;
else if(win.Document && win.Document.body.scrollHeight)
win.height = win.Document.body.scrollHeight;
}
}
}
最后,加入iframe,不能丢掉onload属性,当然了,id也必须也函数中的win匹配
<iframe width="" align="center" height="" id="win" name="win" onload="Javascript:SetWinHeight(this)"
frameborder="" scrolling="no" src="1.htm"></iframe>
第一种方法:(经典代码 iFrame 自适应高度,在IE6/IE7/IE8/Firefox/Opera/Chrome/Safari通过测试)
<iframe src="http://www.fufuok.com/" id="iframepage" name="iframepage" frameBorder= scrolling=no
width="100%" onLoad="iFrameHeight()" ></iframe>
Javascript代码:
<script type="text/javascript" language="javascript">
function iFrameHeight() {
var ifm= document.getElementById("iframepage");
var subWeb = document.frames ? document.frames["iframepage"].document : ifm.contentDocument;
if(ifm != null && subWeb != null) {
ifm.height = subWeb.body.scrollHeight;
}
}
</script>
第三种方法:(下面这个兼容性更好一些)
<script language="javascript" type="text/javascript">
function dyniframesize(down) {
var pTar = null;
if (document.getElementById){
pTar = document.getElementById(down);
}else{
eval('pTar = ' + down + ';');
}
if (pTar && !window.opera){
//begin resizing iframe
pTar.style.display="block"
if (pTar.contentDocument && pTar.contentDocument.body.offsetHeight){
//ns6 syntax
pTar.height = pTar.contentDocument.body.offsetHeight +;
pTar.width = pTar.contentDocument.body.scrollWidth+;
}else if (pTar.Document && pTar.Document.body.scrollHeight){
//ie5+ syntax
pTar.height = pTar.Document.body.scrollHeight;
pTar.width = pTar.Document.body.scrollWidth;
}
}
}
</script>
<iframe src ="/default2.aspx" frameborder="" marginheight="" marginwidth="" frameborder=""
scrolling="auto" id="ifm" name="ifm" onload="javascript:dyniframesize('ifm');" width="100%">
</iframe>
注意:src=中你必须填写的网页地址,一定要和本页面在同一个站点上,否则,会抱错,说“拒绝访问!”(实际上这是因为Js的跨域问题导致拒绝访问的),意思就是说如果该网页不是发布验证的话,会报错的。
iframe自适应高度的多种方法小结的更多相关文章
- iframe自适应高度的多种方法方法小结
对于自适应高度的代码有很多,可效率什么的考虑进来好代码就不多见了,不过思路倒是差不多的 不带边框的iframe因为能和网页无缝的结合从而不刷新页面的情况下更新页面的部分数据成为可能,可是 ifram ...
- iframe自适应高度的多种方法方法小结(转)
对于自适应高度的代码有很多,可效率什么的考虑进来好代码就不多见了,不过思路倒是差不多的不带边框的iframe因为能和网页无缝的结合从而不刷新页面的情况下更新页面的部分数据成为可能,可是 iframe的 ...
- 真正的让iframe自适应高度 兼容多种浏览器随着窗口大小改变
今天有朋友问到我关于"iframe自适应高度"的问题,原本以为是很简单的问题,没想到折腾了20分钟才搞定.期间遇到几个问题,要么是高度自适应了,但是当窗口改变时会出现滚动条.也就是 ...
- iframe自适应高度(兼容多种浏览器)
http://jingyan.baidu.com/article/b87fe19eaeb2cf5218356896.html 让iframe自适应高度,下面是实现的源码: <div id=&qu ...
- iframe自适应高度,多层嵌套iframe自适应高度的解决方法
在页面无刷新更新方面,虽然现在的ajax很强悍,但是处理代码相对多点.想比之下,iframe就简单多了!处理iframe的自适应宽.高,会经常用到,网上整理了一份,写在这里备用: 单个iframe 高 ...
- 让iframe自适应高度-真正解决
需求:实现 iframe 的自适应高度,能够随着页面的长度自动的适应以免除页面和 iframe 同时出现滚动条的现象. (需要只有iframe出现滚动条) 本人一开始这么写:会造成只有主页面加载是设定 ...
- [转]让iframe自适应高度-真正解决
原文地址:https://www.cnblogs.com/rogge7/p/7762052.html 需求:实现 iframe 的自适应高度,能够随着页面的长度自动的适应以免除页面和 iframe 同 ...
- Iframe 自适应高度的方法!
第一种方法:代码简单,兼容性还可以,大家可以先测试下. function SetWinHeight(obj) { var win=obj; if (document.getElementById) { ...
- 【前端开发】前端引入公共部分footer header的几种方法,及iframe自适应高度js
一.引入页面几种方法 1.IFrame引入,看看下面的代码 <iframe frameborder=0 border=0 width=300 height=300 ...
随机推荐
- R 安装与环境配置
R语言是一种很方便的应用于科学计算的语言,推荐给大家学习. 由于R的版本对程序包的兼容有些问题,推荐使用2.15.3. 下面给出下载链接,安装一路默认即可,可以自己更存放目录,其他的都没有影响.下面是 ...
- 面积最大的全1子矩阵--九度OJ 1497
题目描述: 在一个M * N的矩阵中,所有的元素只有0和1,从这个矩阵中找出一个面积最大的全1子矩阵,所谓最大是指元素1的个数最多. 输入: 输入可能包含多个测试样例.对于每个测试案例,输入的第一行是 ...
- 搞JAVA在北京月薪15K的朋友来到厦门却很难找到工作
朋友是搞JAVA开发的,从北京来.来前朋友们都感觉他在厦门应该很快就能找到工作,因为厦门的IT人员很缺. 没想到来厦门大概半个多月了,到现在都还没着落.面试单位每周基本只有两家,而且面试的感觉都说不错 ...
- seo技巧-2015/10/05
1.每页都要有它自己的文件名,并且有它自己的上级文件夹和它自己相关关键字. 2.建议在每页上使用一个的H1标签.我也试着使用许多H2 或H3的标签在页面内辅助构成正文内容. 3. 有时花费一点钱帮助你 ...
- Linux下的GitHub安装与简单配置教程
1.GitHub简介 Git是一个分布式版本控制系统,与其相对的是CVS.SVN等集中式的版本控制系统. 2.Git的安装 1)安装Git a.查看与使用 在ubuntu下可以使用如下命令进行查看系统 ...
- 设置sudo权限
由于CentOS安装之后,普通用户无sudo权限,故应该设置sudo权限. 此处假设当前用户为“cloudgis”. 1. 设置sudo权限,则设置如下: $ su root 输入root 密码 $ ...
- 企业部署Linux应用将拥有更低的整体拥有成本
企业部署Linux应用将拥有更低的整体拥有成本 使用Linux能为企业的IT解决方案降低TCO(整体拥有成本Total Cost of The Ownership)吗?在面临这个问题时,很多企 ...
- 两年内从零到每月十亿 PV 的发展来谈 Pinterest 的架构设计(转)
原文:Scaling Pinterest - From 0 To 10s Of Billions Of Page Views A Month In Two Years 译文:两年内从零到每月十亿 PV ...
- 2d网络游戏的延迟补偿(Lag compensation with networked 2D games)
http://gamedev.stackexchange.com/questions/6645/lag-compensation-with-networked-2d-games ——————————— ...
- HDU 2101 A + B Problem Too 分类: ACM 2015-06-16 23:57 18人阅读 评论(0) 收藏
A + B Problem Too Time Limit: 3000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others ...