javascript实现框架高度随内容改变的方法
本文实例讲述了javascript实现框架高度随内容改变的方法。分享给大家供大家参考。具体如下:
有两种方法:
一、就是通过父页面改变
这里要理解框架的两个属性 contentWindow 和contentDocument 两个属性的意思和window document意思差不多,不同的是contentWindow 所有浏览器都支持,contentDocument ie6,7不支持,chrome 也不支持
<iframe onload="change_height()"></iframe> function change_height(){ var iframe=document.getElementById("iframe_id"); //取得框架元素 var i_height=iframe.contentWindow.document.body.scrollHeight||iframe.contentWindow.document.documentElement.scrollHeight; //取得框架内容的高度 iframe.height=i_height; //改变 }
二、就是通过内容改变
在内容页进行
window.onload=function(){ var iframe=parent.document.getElementById("iframe_id"); //取得框架元素 iframe.height=document.body.scrollHeight||document.documentElement.scrollHeight; //取得框架内容的高度并改变 }
希望本文所述对大家的javascript程序设计有所帮助。
相关推荐
-
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设置为路由
-
通过javascript获取iframe里的值示例代码
复制代码 代码如下: <script type="text/javascript" language="javascript"> function CCCC(){ var File_NAME=""; var count=0; if(document.frames("myFrame").document.all.length){ for(var i=0;i<document.all.length;i++){ i
-
JavaScript设置IFrame高度自适应(兼容各主流浏览器)
复制代码 代码如下: function SetIFrameHeight(down) { var Sys = {}; var ua = navigator.userAgent.toLowerCase(); var s; (s = ua.match(/msie ([\d.]+)/)) ? Sys.ie = s[1] : (s = ua.match(/firefox\/([\d.]+)/)) ? Sys.firefox = s[1] : (s = ua.match(/chrome\/([\d.]+)/
-
框架页面高度自动刷新的Javascript脚本
实现原理:加载index.htm时候,每隔1秒钟自动调用脚本刷新框架页面代码 代码优点:只需要设置index.html框架页面中的脚本,调用加载的子页面中不需要设置任何代码. index.htm代码如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quo
-
Javascript 完美运动框架(逐行分析代码,让你轻松了运动的原理)
大家一听这名字就知道,有了这套框架 网上的效果基本都是可以实现的.实际上之前的运动框架还是有局限性的,就是不能让好几个值一块运动. 那这个问题怎么解决呢? 我们先来看看之前的运动框架 function getStyle(obj, name) { if (obj.currentStyle) { return obj.currentStyle[name]; } else { return getComputedStyle(obj, null)[name]; } } function startMov
-
javascript实现iframe框架延时加载的方法
本文实例讲述了javascript实现iframe框架延时加载的方法.分享给大家供大家参考.具体实现方法如下: 有的时候我们希望页面的一些东西实现延时加载,这样可以不影响网站打开速度,下面我来给大家介绍javascript实现iframe框架延时加载方法吧. 需要加载区域HTML代码: 复制代码 代码如下: <div id="indexlogin"></div> 下面代码放在底部 复制代码 代码如下: <span id="tmpjsnews&qu
-
JavaScript框架(iframe)操作总结
框架编程概述 一个 HTML页面可以有一个或多个子框架,这些子框架以<iframe>来标记,用来显示一个独立的HTML页面.这里所讲的框架编程包括框架的自我控制以及框架之间的互相访问,例如从一个框架中引用另一个框架中的JavaScript变量.调用其他框架内的函数.控制另一个框架中表单的行为等. 框架间的互相引用 一个页面中的所有框架以集合的形式作为window对象的属性提供,例如:window.frames就表示该页面内所有框架的集合,这和表单对象.链接对象.图片对象等是类似的,不同的是,这
-
JavaScript实现防止网页被嵌入Frame框架的代码分享
最近,国内开始流行另一种流氓行为:使用框架(Frame),将你的网页嵌入它的网页中. 比如,有一家网站号称自己是"口碑聚合门户",提供全国各个网上论坛的精华内容.但是,其实它就是用框架抓取他人的网页,然后在上面加上自己的广告和站标,这同盗版书商有何不同?! 防止方法,在 复制代码 代码如下: </body> 之前加入这段代码: 复制代码 代码如下: <script type="text/javascript"> if ( top.locat
-
javascript实现框架高度随内容改变的方法
本文实例讲述了javascript实现框架高度随内容改变的方法.分享给大家供大家参考.具体如下: 有两种方法: 一.就是通过父页面改变 这里要理解框架的两个属性 contentWindow 和contentDocument 两个属性的意思和window document意思差不多,不同的是contentWindow 所有浏览器都支持,contentDocument ie6,7不支持,chrome 也不支持 <iframe onload="change_height()">
-
checkbox:click事件触发span元素内容改变的方法
示例如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>checkbox</title> <script src="jquery.js"></script> </head> <body> <p>我想去<span id
-
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
-
JavaScript运动框架 解决防抖动问题、悬浮对联(二)
本文实例是对JavaScript运动框架(一)的应用 scrollTop:有时候网页很长,其高度大于显示器高度,会产生滚动,那么在高度方向上,"滚走"的部分就是scrollTop var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; offsetTop:此属性可以获取元素的上外缘距离最近采用定位父元素内壁的距离,如果父元素中没有采用定位的,则是获取上外边缘距离文档内壁的距离.所谓的定
-
AngularJs Javascript MVC 框架
在6月google发布了AngularJs 1.0稳定版, 并宣称:AngularJS可以让你扩展HTML的语法,以便清晰.简洁地表示应用程序中的组件,并允许将标准的HTML作为你的模板语言,AngularJS可以通过双向数据绑定自动从拥有JavaScript对 象(模型)的UI(视图)中同步数据. 开始接触AngularJs是在4月份来到新项目组,这时AngularJs还处于0.8未稳定版,项目中已经开始使用了,并且这套框架应用到了项目整个UI端,服务端也是未稳定的web api,真心佩服团队
-
javascript运动框架用法实例分析(实现放大与缩小效果)
本文实例讲述了javascript运动框架用法.分享给大家供大家参考,具体如下: 该运动框架可以实现多物体任意值运动 运行效果截图如下: 例子: <!doctype html> <html> <head> <meta charset="utf-8"> <title>运动框架</title> <style> #div1{ width:100px; height:100px; background:red;
-
javascript中获取元素标签中间的内容的实现方法
使用ajax,通过会把服务器端响应获取到reponseText或者reponseXML中的信息,以某种方法动态的写到div和span标记中,这样,可以在无刷新的情况下,改变页面内容的显示. 通过javascript进行动态的修改,修改的方法有两种: 1. 一种是使用html的每个标记的innerHTML属性,使用此属性,只要为它提供一个有意义的html代码片段,那么html解释器就可以将其中的内容进行解释,并显示在页面上,使用这种方式比较简单,每次修改前不需要先把原来的内容清除掉,而可以直接进行
-
JavaScript实现点击单元格改变背景色的方法
本文实例讲述了JavaScript实现点击单元格改变背景色的方法.分享给大家供大家参考,具体如下: <html> <body> <table onclick="SetColor(event)" id="_t" width="500" border="0" cellspacing="0" cellpadding="0"> <tr> <t
-
自定义javascript验证框架示例【附源码下载】
本文实例讲述了自定义javascript验证框架.分享给大家供大家参考,具体如下: 看过 jquery 验证框架,在使用的时候,其实还是很晕的,很麻烦,使用的时候代码也不简洁,因此才有了弄一个自己的jquery验证框架的计划,基本原理就是对 input ,select, textarea 这三类控件做校验,在里面定义自定义属性作为检验. 另外采用js 做i18n 国际化,通过cookies 中的语言,调用不同的js 语言包, 对于自己开发项目来说,足够用了,而且,还可以灵活扩展.个人用应该不错.
-
当编辑框内容改变 对应的单元格也随着改变vba代码
当编辑框内容改变,对应的单元格也随着改变 复制代码 代码如下: Private Sub TextBox1_Change() ThisWorkbook.ActiveSheet.Range("J1") = TextBox1.Text End Sub 利用这个代码可以写很多自动计算的Excel小模块了
随机推荐
- Spring Boot中使用Actuator的/info端点输出Git版本信息
- java 算法之归并排序详解及实现代码
- JS+CSS实现仿支付宝菜单选中效果代码
- 鼠标滚轮改变图片大小的示例代码
- MySQL ERROR 1045 (28000) 错误的解决办法
- JavaScript声明变量时为什么要加var关键字
- 浅谈页面装载js及性能分析方法
- 仿windows工具条样式
- javascript:void(0)的作用示例介绍
- linux之awk命令的用法
- 关于Oracle listener日志解析利器的使用方法
- jQuery之排序组件的深入解析
- 如何用jQuery实现ASP.NET GridView折叠伸展效果
- Jquery异步请求数据实例代码
- MemcacheQ安装及使用方法
- 详细解读Java的串口编程
- 一段几乎可以让你死机的JS代码
- Android开发之RadioGroup的简单使用与监听示例
- 利用Python进行异常值分析实例代码
- 微信小程使用swiper组件实现图片轮播切换显示功能【附源码下载】