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 ...
随机推荐
- 本版本延续MVC中的统一验证机制~续的这篇文章,本篇主要是对验证基类的扩展和改善(转)
本版本延续MVC中的统一验证机制~续的这篇文章,本篇主要是对验证基类的扩展和改善 namespace Web.Mvc.Extensions { #region 验证基类 /// <summary ...
- ActiveMQ 消息持久化到数据库(Mysql、SQL Server、Oracle、DB2等)
ActiveMQ具体就不介绍了,直接介绍如何讲ActiveMQ持久化到本地数据库,以SQL Server 2008 R2为例1.下载ActiveMQ后直接解压,我下载的是apache-activemq ...
- 斐讯K2刷不死breed与第三方固件教程
本文主要就是简单的斐讯 K2 刷机教程,方便大家了解一下 K2 怎样刷固件.斐讯 K2 是一款 1200M AC 双频无线路由器,支持 5G 和 2.4G WiFi 信号,虽然缺少 USB 且只有百兆 ...
- LeetCode 16 3Sum Closest (最接近target的3个数之和)
题目链接 https://leetcode.com/problems/3sum-closest/?tab=Description Problem : 找到给定数组中a+b+c 最接近targe ...
- 2555: SubString[LCT+SAM]
2555: SubString Time Limit: 30 Sec Memory Limit: 512 MB Submit: 2601 Solved: 780 [Submit][Status][ ...
- 23种设计模式之外观模式(Facade)
外观模式是对象的结构模式,要求外部与一个子系统的通信必须通过一个统一的外观对象进行,为子系统中的一组接口提供一个一致的界面,外观模式定义了一个高层接口,这个接口使得这一子系统更加容易使用. 优点: 1 ...
- 【CF827E】Rusty String 调和级数+FFT
[CF827E]Rusty String 题意:给你一个01串,其中部分字符是'?',?可以是0或1,求所有可能的d,满足存在一种可能得到的01串,在向右移动d格后与自己相同. $n\le 5\tim ...
- tomcat启动报错:serializer.jar (系统找不到指定的文件。)
下载最新对应版本的tomcat.移除之前的tomcat.删除原本全部tomcat的目录. 疑似tomcat的lib包被动过.
- C++类继承示例
C++的子类与孙子类都实现了虚函数时,孙子类的实现会覆盖掉子类的实现. 继承的最主要的应用就是把不同的类放到一个数组中,然后遍历调用同名函数. 实例如下: #include <iostream& ...
- vue 报错./lib/html5-entities.js this relative module was not
原文参考http://www.bozhiyue.com/web/yuyan/2017/0501/1236324.html 然后就把他俩注视了,是不报错了,但是也没有运行不出来: 居然是因为早上我360 ...