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自适应高度
1.iframe自适应页面高度 首先需要给iframe设置一个id,不需要滚动条则加上scrolling="no" 然后加上一个onload事件 function iFrameHe ...
- [转]让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 src= ...
- Iframe自适应高度绝对好使的代码 兼容IE,遨游,火狐[转]
Iframe自适应高度绝对好使的代码,IE.遨游.火狐.Chrome都兼容,需要的朋友可以参考下. 这是我试了很多相关代码后发现的兼容性最好的Iframe自适应高度代码. <script typ ...
- php iframe 自适应高度,两个iframe自适应高度的解决方法
很多小伙伴在做网站的时候对于解决 1.需求分析: 使页面中的iframe可以自适应高度,避免页面高度增加的时候页面和iframe会同时出现滚动条. 2.方法一: 在iframe上面直接加onload的 ...
- 跨域下的iframe自适应高度
采用JavaScript来控制iframe元素的高度是iframe高度自适应的关键,同时由于JavaScript对不同域名下权限的控制,引发出同域.跨域两种情况. 由于客户端js使用浏览器的同源安全策 ...
- iframe 自适应高度的多种实现方式
iframe高度自适应内容 需求:实现 iframe 的自适应高度,能够随着页面的长度自动的适应以免除页面和 iframe 同时出现滚动条的现象. 设置iframe 自适应高度,使其等于内嵌网页的高度 ...
- php iframe 自适应高度,iframe自适应高度
很多小伙伴在做网站的时候对于解决iframe的高度问题都是很头大的一件事,今天吾爱编程为大家介绍一下iframe自适应高度的方法,有需要的小伙伴可以参考一下: 1.需求分析: 使页面中的iframe可 ...
- php iframe 自适应高度,让iframe自适应高度的讲解
为什么需要使用iframe自适应高度呢?其实就是为了美观,要不然iframe和窗口长短大小不一,看起来总是不那么舒服,特别是对于我们这些编程的来说,如鲠在喉的感觉.在页面中通过iframe嵌入了另外一 ...
最新文章
- oracle表中怎么去重复,Oracle里去掉表里组合字段重复的记录步骤是什么呢?
- 6.切勿对STL容器的线程安全性有不切实际的依赖
- STM32利用光敏二极管实现光度测量
- Ibatis2.0使用说明(二)——配置篇(2)
- Exchange 技巧(1) Exchange2010 邮件收发统计
- HarmonyOS开源第三方组件 —— B站开源弹幕库引擎的使用
- 2018:视频标准混战的元年序幕
- Zigbee协议栈中文说明
- 2021春运12306抢票攻略
- linux修改mac地址_如何(以及为什么)在Windows,Linux和Mac上更改您的MAC地址
- 小米4 第三方re奇兔_小米推送测试
- 《非暴力沟通》---第二章(是什么蒙蔽了爱?)读书笔记
- office2007 打开Excel 提示 工作表中的公式包含一个或多个无效引用的解决方法
- apt apt-get_Windows用户准备好进行apt-get吗?
- windows通过注册表修改3389端口号
- Java编写太阳升起,描写早晨太阳升起的句子
- js之div跟随鼠标移动
- 闲鱼如何0到1搭建一套发布引导链路
- 具有对称性质的单参数混沌镜像系统的切换控制
- 天道好轮回苍天饶过谁万般皆是命半点不由人——循环
热门文章
- 祝贺黑龙江馆正式入驻波特城暨龙商龙企龙品走向全球化启动仪式圆满成功
- 20172307 2018-2019-1 《程序设计与数据结构》第4周学习总结
- (六)观察者模式详解(包含观察者模式JDK的漏洞以及事件驱动模型)决了当时的问题,那时LZ接触JAVA刚几个月,比葫芦画瓢的用了观察者模式。...
- 设计-直接不等于简单
- iOS10 推送必看 UNNotificationContentExtension
- php ? ? ?php ?
- iptables 实现地址转换与安全控制
- 2018 东北地区大学生程序设计竞赛(ABEHIK)
- Android运行时权限
- Android内核开发:源码的版本与分支详解