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 ...
随机推荐
- asp.net MVC实现文章的“上一篇下一篇”
由于这个东西的原理没有什么难的(只是实现的时候有少量的坑),故直接上代码以便查阅.另:本文给出的Action附送了点击量统计. public ActionResult SingleNews(int? ...
- IOS 跳转到系统的url
About — prefs:root=General&path=AboutAccessibility — prefs:root=General&path=ACCESSIBILITYAi ...
- webservice的调用方法
一.WebService在cs后台程序中的调用 A.通过命名空间和类名直接调用 示例: WebService ws = new WebService(); string s = ws.HelloWor ...
- [置顶] 阅读Oracle官方文档指南
还在整理中.... EXPDP/IMPDP 相关文档:Utilities 2 Data Pump Export 3 Data Pump Import SQL*Loader 相关文档:Utilities ...
- OpenCV3.0.0+win10 64位+vs2015环境的下载,安装,配置
操作系统:WIN10 pro 64 软件版本:VS2015+OpenCV3.0.0 1. 下载安装 http://opencv.org/ https://www.visualstudio.com/ ...
- 如何让msvsmon.exe 以服务方式运行
通常我们在VS上调试程序用的都是msvsmon.exe, 使用管理员权限运行再选项设置任何人可以调试就可以了,而这个在绝大多数情况下都没有问题.而我想说的就是特殊的情况,跟msvsmon的运行权限相关 ...
- Ubuntu 创建启动器
首先我们要了解,Ubuntu 的 Dash 里所有程序都是在 /usr/share/applications 中的,所以我们的思路很简单——建一个类似于“快捷方式”一样的东西扔进去就好了.所以第一步自 ...
- 360回归A股,周鸿祎来给BAT和小米添堵了
排着队回国内上市的公司名单里,终于多了奇虎360的名字. 奇虎360今天宣布,公司董事会收到了来自董事长周鸿祎.中信证券及其附属公司.Golden Brick Capital Private Equi ...
- 使用百度富文本编辑器UEditor碰到的问题
前面使用的是kindEditor,但是发现这个已经不再维护,并且bug不少,而我又不会改,哈哈,所以我就放弃了. 原来想过要用百度的这个UEditor,但是在配置的时候遇到了很多问题,基本上加载不出来 ...
- 自定义连接池java.lang.ClassCastException: com.sun.proxy.$Proxy4 cannot be cast to java.sql.Connection
原因:Connection.getInterfaces() 与数据库驱动有关,数据库驱动不同 Connection.getInterfaces() 的结果也就不同,Connection.getInte ...