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 ...
随机推荐
- 用django搭建一个简易blog系统(翻译)(一)
Django 入门 原始网址: http://www.creativebloq.com/netmag/get-started-django-7132932 代码:https://github.com/ ...
- 使用元组Tuple,返回多个不同类型的值
记得我在不知道Tuple时,如果想实现调用某个函数时,返回多个值,则需要使用ref或者out了. string name = ""; int result= GetInfo(ref ...
- VS2012配色方案
VS2012配色方案 这些天由于公司项目比较忙,所以天天盯着电脑8小时,而且我的开发工具VS2012是白色背景的所以每天下班都搞的眼睛巨疼. 今天在网上找到一个很好的配色方案,所以有同样烦恼的童鞋们可 ...
- C#奇葩关键字
C#奇葩关键字——忐忑 那就认识认识吧,可是又太多,所以也只能是想到哪里是哪里,我们这就让思绪自由飞翔一会吧! 1.@ 这个东东看似和邮件有关啊,但是在C#的世界里,可跟邮件没有一毛钱关系,它是str ...
- 如何判断一个对象是否为jquery对象
当我们在用jquery的each做循环遍历的时候常常会使用到this 而有时候我们不知道this所指的到底是什么,因为要使用jquery 的方法 前提此对象必须是jquery对象. 另外要判断一个ja ...
- WampServer Mysql配置
WAMP:Windows下的Apache+Mysql+Perl/PHP/Python,一组常用来搭建动态网站或者服务器的开源软件.可点击此处下载WampServer,然后,按照提示安装WAMP.需要说 ...
- JS中for循序中延迟加载实现动态效果
JS中for循序中延迟加载实现动态效果 今天在做一个前端的效果的时候碰到一个棘手的问题,就是实现一个动态的圆柱效果,废话不多少,直接上代码. <script src="js/jquer ...
- [Android开发常见问题-11] Unable to execute dex: Multiple dex files define 解决方法
最近在开发一个工程,其中用到了一个开源的库项目Android-ViewPagerIndicator. 这个项目是作为一个库出现的,如下图: 这个项目中包含了android-support-v4.jar ...
- java.lang.NoClassDefFoundError: com.umeng.analytics.MobclickAgent
07-24 09:58:23.239: E/AndroidRuntime(29487): FATAL EXCEPTION: main 07-24 09:58:23.239: E/AndroidRunt ...
- 利用jquery对ajax操作,详解原理(附代码)
1. jQuery load() 方法 jQuery load() 方法是简单但强大的 AJAX 方法. load() 方法从服务器加载数据,并把返回的数据放入被选元素中. 语法: $(selecto ...