iframe自适应高度处理方案
第一种:这个方案能解决大多数自适应高度问题,方法是在iframe所要加载的页面上添加代码,把它的高度告诉iframe所在页面。缺点显而易见,如果iframe要加载的页面非常多而且不固定那么代码加起来很麻烦。
$(function () {
fixParentHeight();
}); function fixParentHeight() {
var thisbodyheight = document.body.clientHeight;
$(window.parent.document).find("#iframe").height(thisbodyheight);
}
第二种:获取iframe与浏览器顶部的距离,用浏览器全高减去这个距离,得到iframe到底部的距离,将这个作为iframe高度。缺点是这个高度不能跟随iframe动态调整,如果iframe高度很小那么它还是会占据屏幕整个下半部分。
function stretchHeight(targetobj, delta) {
var sf = function () {
var tableWrap = $(targetobj);
var tableOffset = tableWrap.offset();
var documentHeight = $(document.documentElement).height();
if ($.browser.msie) {
documentHeight = document.documentElement.clientHeight;
} else {
documentHeight = window.innerHeight;
}
var tableHeight = documentHeight - tableOffset.top - (delta == undefined ? 0 : delta);
tableWrap.height(tableHeight);
};
sf();
$(window).resize(function () {
sf();
});
}
stretchHeight($("#iframe"), 10);
iframe自适应高度处理方案的更多相关文章
- html之小积累-.-iframe自适应高度
在做系统框架的时候,常常会用到iframe,当需求是iframe不能出现纵向滚动条,需要根据加载页面的高度,一致延伸,但是iframe的高度自适应问题比较麻烦,当时也是纠结了好久. 方案1:当遇到if ...
- jquery 清空 iframe 的内容,,iframe自适应高度
$(iframe).contents().find("body").html(""); iframe自适应高度 $("#AllDescription& ...
- 真正的让iframe自适应高度 兼容多种浏览器随着窗口大小改变
今天有朋友问到我关于"iframe自适应高度"的问题,原本以为是很简单的问题,没想到折腾了20分钟才搞定.期间遇到几个问题,要么是高度自适应了,但是当窗口改变时会出现滚动条.也就是 ...
- jquery iframe自适应高度[转]
经典代码 iFrame 自适应高度,在IE6/IE7/IE8/Firefox/Opera/Chrome/Safari通过测试. 很古老的方法: <iframe src="../In ...
- js实现iframe自适应高度
转自:http://www.jb51.net/article/15780.htm 对于自适应高度的代码有很多,可效率什么的考虑进来好代码就不多见了,不过思路倒是差不多的! 不带边框的iframe因为能 ...
- 网页制作技巧:iframe自适应高度
转自:http://www.enet.com.cn/article/2012/0620/A20120620126237.shtml 通过Google搜索iframe 自适应高度,结果5W多条,搜索if ...
- Iframe 自适应高度的方法!
第一种方法:代码简单,兼容性还可以,大家可以先测试下. function SetWinHeight(obj) { var win=obj; if (document.getElementById) { ...
- iframe自适应高度的多种方法小结
转自:http://www.jb51.net/article/15780.htm 不带边框的iframe因为能和网页无缝的结合从而不刷新页面的情况下更新页面的部分数据成为可能,可是 iframe的大小 ...
- iframe自适应高度的多种方法方法小结
对于自适应高度的代码有很多,可效率什么的考虑进来好代码就不多见了,不过思路倒是差不多的 不带边框的iframe因为能和网页无缝的结合从而不刷新页面的情况下更新页面的部分数据成为可能,可是 ifram ...
随机推荐
- mac osx 10.9安装配置macvim
如果你已经安装了macvim,升级后又不能用了,建议你可以看看http://kodira.de/2013/10/macvim-osx-10-9-mavericks/这篇文章,如果你还没有安装,下面由我 ...
- JUC.Condition学习
JUC.Condition学习笔记[附详细源码解析] 目录 Condition的概念 大体实现流程 I.初始化状态 II.await()操作 III.signal()操作 3个主要方法 Conditi ...
- poj1269
基础题,直线间关系 #include <iostream> #include <math.h> #include <iomanip> #define eps 1e- ...
- 把项目做成jar包
方法一.在eclipse3.1中把项目做成jar包步骤. 打包前的工作. 在项目下创建一个文件夹,名为META-INF,再在其下创建文件MANIFEST.MF 编辑的内容如下: Manifest-Ve ...
- KingPaper初探 wamp下本地虚拟主机的搭建
在本地我们进行网站或系统开发时,因为我们本地的地址以localhost为主机名的 我们上传到服务器会有很多东西要修改 为了避免这些不必要的修改,我们可以在本地搭建虚拟主机 一下是在wamp下搭建虚拟 ...
- 一步一步深入spring(5)--使用基于注解的spring实现 AOP
1.要利用spring aop,至少需要添加以下jar包 使用spring需要的jarspring.jar .commons-logging.jar 使用切面编程(AOP)需要的jar aspectj ...
- Volt 模块引擎与phalcon框架组合使用指南
---- 近期工作中web页面使用由C语言编写的VOLT模板引擎,相比之前由js动态加载页面速度更快,更利于百度数据的抓取,现根据文档整理一下使用思路 (Volt是一个超快速和设计者友好的模板语言,C ...
- js中常用的Math方法总结
1.min()和max()方法 Math.min()用于确定一组数值中的最小值.Math.max()用于确定一组数值中的最大值. alert(Math.min(2,4,3,6,3,8,0,1,3)); ...
- 运行ORB-SLAM笔记_使用篇(二)
1. 编译完成之后就可以使用了,按照说明我们可以知道,首先开启roscore
- 四、spark常用函数说明学习
1.parallelize 并行集合,切片数.默认为这个程序所分配到的资源的cpu核的个数. 查看大小:rdd.partitions.size sc.paraliel ...