jquery 实现iframe 自适应高度
转自: http://www.cnblogs.com/luluping/archive/2009/04/17/1437843.html
超级简单的方法,也不用写什么判断浏览器高度、宽度啥的。
下面的两种方法自选其一就行了。一个是放在和iframe同页面的,一个是放在test.html页面的。
注意别放错地方了哦。
iframe代码,注意要写ID
<iframe src="test.html" id="main" width="700" height="300" frameborder="0" scrolling="auto"></iframe>
jquery代码1:
//注意:下面的代码是放在test.html调用
$(window.parent.document).find("#main").load(function(){
var main = $(window.parent.document).find("#main");
var thisheight = $(document).height()+30;
main.height(thisheight);
});
jquery代码2:
//注意:下面的代码是放在和iframe同一个页面调用
$("#main").load(function(){
var mainheight = $(this).contents().find("body").height()+30;
$(this).height(mainheight);
});
测试过,第二种有效,不过要注意一点是,增加的JS要写在iframe下面,放在头部是测试没有效果。
测试代码:
<iframe id="mainframe" name="mainframe" marginwidth="0" marginheight="0" src="/Home/Activitylist"
frameborder="0" width="100%" scrolling="no" height="100%"></iframe>
<script type="text/javascript">
//注意:下面的代码是放在和iframe同一个页面调用,放在iframe下面
$("#mainframe").load(function () {
var mainheight = $(this).contents().find("body").height() + 30;
$(this).height(mainheight);
});
</script>
jquery 实现iframe 自适应高度的更多相关文章
- jquery iframe自适应高度[转]
经典代码 iFrame 自适应高度,在IE6/IE7/IE8/Firefox/Opera/Chrome/Safari通过测试. 很古老的方法: <iframe src="../In ...
- jquery 清空 iframe 的内容,,iframe自适应高度
$(iframe).contents().find("body").html(""); iframe自适应高度 $("#AllDescription& ...
- 真正的让iframe自适应高度 兼容多种浏览器随着窗口大小改变
今天有朋友问到我关于"iframe自适应高度"的问题,原本以为是很简单的问题,没想到折腾了20分钟才搞定.期间遇到几个问题,要么是高度自适应了,但是当窗口改变时会出现滚动条.也就是 ...
- 让iframe自适应高度-真正解决
需求:实现 iframe 的自适应高度,能够随着页面的长度自动的适应以免除页面和 iframe 同时出现滚动条的现象. (需要只有iframe出现滚动条) 本人一开始这么写:会造成只有主页面加载是设定 ...
- [转]让iframe自适应高度-真正解决
原文地址:https://www.cnblogs.com/rogge7/p/7762052.html 需求:实现 iframe 的自适应高度,能够随着页面的长度自动的适应以免除页面和 iframe 同 ...
- 【前端开发】前端引入公共部分footer header的几种方法,及iframe自适应高度js
一.引入页面几种方法 1.IFrame引入,看看下面的代码 <iframe frameborder=0 border=0 width=300 height=300 ...
- iframe自适应高度处理
一中方法: 在子页面加载完毕的时候执行 parent.document.getElementById("iframe").height=0; parent.document.get ...
- 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 ...
随机推荐
- 使用maven项目 转XSD、 WSDL 成Java类
因为项目需要,在网上查找了很多WSDL的使用方式,但是感觉不是特别顺利.现在是利用Maven 项目快速转化的方法. 首先建立一个maven 项目 ,并将下面的pom文件复制进去. <projec ...
- linux 终端输出颜色
在Linux终端下调试程序时,有时需要输出大量信息.若能控制字体的颜色和显示方式,可使输出信息对比鲜明,便于调试时观察数据. 终端的字符颜色由转义序列(Escape Sequence)控制,是文本模式 ...
- Unity3D protobuf-net使用方式
1.下载protobuf-net 2.创建Unity工程,创建一个Plugins文件夹,将protobuf-net解压把里面得protobuf-net放到Plugins 3.创建一个名为mcs的文本文 ...
- IIS "rewrite.dll failed to load. The data is the error." 错误解决方法
在Windows 10 build 17133.73上部署一个较老版本的ASP.NET 2.0程序,访问时候出现: Service Unavailable HTTP Error 503. The se ...
- C语言assert()函数用法总结
assert宏的原型定义在<assert.h>中,其作用是如果它的条件返回错误,则终止程序执行,原型定义: #include <assert.h> void assert( i ...
- JSPatch - 基本使用和学习
介绍 JSPatch是2015年由bang推出的能实现热修复的工具,只要在项目中引入极小的JSPatch引擎,就可以用 JavaScript 调用和替换任何 Objective-C 的原生方法,获得脚 ...
- 慕课学习--OSI与TCP/IP网络协议
**OSI:开放系统互连参考模型 (Open System Interconnect 简称OSI)是国际标准化组织(ISO)和国际电报电话咨询委员会(CCITT)联合制定的开放系统互连参考模型,为开放 ...
- 9.5Django操作数据库的增删改查
2018-9-5 18:10:52 先贴上笔记 day61 2018-04-28 1. 内容回顾 1. HTTP协议消息的格式: 1. 请求(request) 请求方法 路径 HTTP/1.1\r\n ...
- App开发如何制作测试数据
OHHTTPStubs 使用第三方请求库模拟返回json数据 https://github.com/AliSoftware/OHHTTPStubs 使用青花瓷maplocal制造假数据 https:/ ...
- TFS二次开发09——查看文件历史(QueryHistory)
这篇文章给大家展示怎样获取一个文件的历史版本,内容很简单,直接上代码了. string tpcURL = "http://127.0.0.1:8080/"; TfsTeamProj ...