使用javascript实现Iframe自适应高度
方法一:
$(window.parent.document).find("#ContentIframe").load(function() {
var main = $(window.parent.document).find("#ContentIframe");
var thisheight = $(document).height();
if (thisheight < 800)
thisheight = 800;
main.height(thisheight);
});
这种写法,只能对于加载的时候对固有元素的自适应高度,当元素变化的时候(如添加了很多元素,高度变化后)不能及时改变父窗体的iframe高度。
方法二:
function setMainHeight() {
var main = $(window.parent.document).find("#ContentIframe");
var thisheight = $("body").height();
if (thisheight < 800) { thisheight = 800; }
main.height(thisheight+50);
setTimeout(setMainHeight, 2000);
}
添加一个计时器,轮询判断子页面的高度变化。
以上2种都可以是iframe实现高度自适应,小伙伴们根据自己的项目需求,自由选择吧
相关推荐
-
JS实现iframe自适应高度的方法示例
本文实例讲述了JS实现iframe自适应高度的方法.分享给大家供大家参考,具体如下: <iframe id="mainFrame" name="mainFrame" src="/zwgk/hsearchview" width="740" frameborder="0" scrolling="no" scrolling="no" frameborder="
-
JS实现很实用的对联广告代码(可自适应高度)
本文实例讲述了JS实现很实用的对联广告代码(可自适应高度).分享给大家供大家参考.具体如下: 这是一款很实用的基于JS+CSS+DIV的网页对联广告代码,自适应网页高度,也就是始终保持在一定调试,这款暂时没有关闭功能. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-lr-useful-adv-auto-height-codes/ 具体代码如下: <html> <head> <meta http-equiv="
-
JS实现自适应高度表单文本框的方法
本文实例讲述了JS实现自适应高度表单文本框的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&
-
兼容主流浏览器的iframe自适应高度js脚本
兼容主流浏览器的 Iframe 自适应高度,js脚本如下: 复制代码 代码如下: //iframe 高度自适应 function iframeAutoFit(iframeObj) { setTimeout(function () { if (!iframeObj) return; iframeObj.height = (iframeObj.Document ? iframeObj.Document.body.scrollHeight : iframeObj.contentDocument.bod
-
js控制iframe的高度/宽度让其自适应内容
复制代码 代码如下: <mce:script language= "Javascript "><!-- window.onload=function() { parent.document.all("iframe1").style.height = document.body.scrollHeight; parent.document.all("iframe1").style.width = document.body.scro
-
JS实现DIV高度自适应窗口示例
本文实例讲述了JS实现DIV高度自适应窗口.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head
-
js实现的真正的iframe高度自适应(兼容IE,FF,Opera)
找到了下面这个js 复制代码 代码如下: function SetCwinHeight(obj) { var cwin=obj; if (document.getElementById) { if (cwin && !window.opera) { if (cwin.contentDocument && cwin.contentDocument.body.offsetHeight) cwin.height = cwin.contentDocument.body.offset
-
Javascript 文本框textarea高度随内容自适应增长收缩
直接上代码: 方案一: 枫芸志 » 文本框textarea高度自适应增长/伸缩 textarea { height:100px; width: 300px; } 晴枫制作 http://jb51.net // 最小高度 var minHeight = 100; // 最大高度,超过则出现滚动条 var maxHeight = 300; function ResizeTextarea(){ var t = document.getElementById('txtContent'); h = t.s
-
关于div自适应高度/左右高度自适应一致的js代码
在使用DIV和CSS进行网页布局中,DIV的自适应高度和自适应宽度是一个很常见的问题. 为了保证页面的整体美观性,需要将两个或者多个层的高度/宽度保持一致. 左右自适应高度一致 Jquery 复制代码 代码如下: <div style="width:300px;"> <div id="Left" style="float:left;background-color:blue;">1<br/>3<br/&g
-
JavaScript 处理Iframe自适应高度(同或不同域名下)
1.同域名下Iframe自适应高度的处理 复制代码 代码如下: <iframe onload="Javascript:SetIFrameHeight(this)" src="../Home/b" id="win" name="win" width="100%" height="1"> </iframe> 当然此处我用的是Asp.Net MVC 此处src设置为路由
-
js实现iframe自动自适应高度的方法
本文实例讲述了js实现iframe自动自适应高度的方法.分享给大家供大家参考.具体如下: 在编写网页的时候,很多时候要用到自动伸缩iframe高度 ,假如ifram中嵌入的是一个列表,那么增加数据后,刷新列表,iframe高度会自动伸长.删除数据后,iframe高度要自动缩短. 将下一段代码拷贝到iframe所在那个html或者jsp页面.在</html>标签后,调用此函数即可. <script type="text/javascript"> autoAdjus
随机推荐
- 详解Angular2中Input和Output用法及示例
- asp.net Bundle功能扩展
- Ruby学习笔记之gem 命令详解
- Win2003下配置iis+php+mysql+zend图文 使其支持asp,.net,cgi,perl和php
- 基于JavaScript实现购物网站商品放大镜效果
- PHP数据库操作之基于Mysqli的数据库操作类库
- wampserver改变默认网站目录的办法
- C#实现集合转换成json格式数据的方法
- Cocos2d-x UI开发之CCControlColourPicker控件类使用实例
- js实现仿百度风云榜可重复多次调用的TAB切换选项卡效果
- Nodejs实现多人同时在线移动鼠标的小游戏分享
- 首届世界CSS设计大赛结果揭晓
- 全面解析Bootstrap中transition、affix的使用方法
- ASP+FSO生成的网页文件默认编码格式以及转换成UTF-8编码方法
- 点选TOP后并不是直接跳到页顶的,而是滚动上去
- js实现div层缓慢收缩与展开的方法
- javascript 图片裁剪技巧解读
- C#使用oledb导出数据到excel的方法
- Java 数组详解及示例代码
- 二维指针动态分配内存连续问题深入分析