- 浏览: 7157350 次
- 性别:
- 来自: 北京
文章分类
- 全部博客 (397)
- 架构研究 (44)
- 网络协议-TCP/HTTP (20)
- SPRING (23)
- HIBERNATE 3 (30)
- STRUTS 2 (20)
- Java/J2se (25)
- Servlet/Jsp (9)
- 开发工具IDE (10)
- WEB服务器 (17)
- 前端--Java Script (33)
- 前端--CSS (7)
- OS--Linux (31)
- OS--MAC OS (19)
- MySQL数据库 (19)
- Oracle数据库 (11)
- 项目管理工具 (12)
- 数据报表技术 (4)
- 图像处理技术 (10)
- 其它综合技术 (13)
- 权限管理 (1)
- MyBatis (1)
- 网络安全 (6)
- IO (21)
- PostgreSQL (2)
- Eclipse RCP (1)
- GWT (1)
- 算法 (3)
- Storm (2)
- zookeeper (3)
- 消息 (1)
最新评论
-
bukebuhao:
已解决,打开文件太多。ulimit -n 上次临时生效后再次s ...
TFS(Taobao File System)配置dataServer、分区、挂载数据盘 -
bukebuhao:
ds重启后启动不了。报错信息如下,请大神帮助[2018-08- ...
TFS(Taobao File System)配置dataServer、分区、挂载数据盘 -
墨上清:
感谢,看完有了一个完整的知识网络。
Spring MVC 教程,快速入门,深入分析 -
云卷云舒灬:
谢谢,学到很多
Spring MVC 教程,快速入门,深入分析 -
luozhy:
非常感谢非常感谢
Project Web Access ActiveX控件 安装
高度自适应
-------------------------------------------------
方法一:
经典代码 iFrame 自适应高度,在IE6/IE7/IE8/Firefox/Opera/Chrome/Safari通过测试。
只适用于同域下,不能跨域。
<iframe src="http://127.0.0.1:8080/HC1/zhuanpan.htm" id="iframepage" name="iframepage" frameBorder=0 scrolling=no width="100%" height="1000" onLoad="iFrameHeight()" ></iframe> <script type="text/javascript" language="javascript"> //经典代码 iFrame 自适应高度,在IE6/IE7/IE8/Firefox/Opera/Chrome/Safari通过测试。 function iFrameHeight() { var ifm= document.getElementById("iframepage"); var subWeb = document.frames ? document.frames["iframepage"].document : ifm.contentDocument; if(ifm != null && subWeb != null) { ifm.height = subWeb.body.scrollHeight; } } </script
方法二:
只适用于同域下,不能跨域。
<script language="javascript" type="text/javascript"> //** iframe自动适应页面 **// //输入你希望根据页面高度自动调整高度的iframe的名称的列表 //用逗号把每个iframe的ID分隔. 例如: ["myframe1", "myframe2"],可以只有一个窗体,则不用逗号。 //定义iframe的ID var iframeids=["ifm"] //如果用户的浏览器不支持iframe是否将iframe隐藏 yes 表示隐藏,no表示不隐藏 var iframehide="yes" function dyniframesize() { var dyniframe=new Array() for (i=0; i<iframeids.length; i++) { if (document.getElementById) { //自动调整iframe高度 dyniframe[dyniframe.length] = document.getElementById(iframeids[i]); if (dyniframe[i] && !window.opera) { //dyniframe[i].style.display="block" if (dyniframe[i].contentDocument && dyniframe[i].contentDocument.body.offsetHeight) //如果用户的浏览器是NetScape dyniframe[i].height = dyniframe[i].contentDocument.body.offsetHeight; else if (dyniframe[i].Document && dyniframe[i].Document.body.scrollHeight) //如果用户的浏览器是IE dyniframe[i].height = dyniframe[i].Document.body.scrollHeight; } } //根据设定的参数来处理不支持iframe的浏览器的显示问题 if ((document.all || document.getElementById) && iframehide=="no") { var tempobj=document.all? document.all[iframeids[i]] : document.getElementById(iframeids[i]) tempobj.style.display="block" } } } if (window.addEventListener) window.addEventListener("load", dyniframesize, false) else if (window.attachEvent) window.attachEvent("onload", dyniframesize) else window.onload=dyniframesize </script> <iframe src="http://127.0.0.1:8080/HC1/zhuanpan.htm" frameBorder=0 width="100%" scrolling="auto" id="ifm" name="ifm" ></iframe>
载入完成事件
-------------------------------------------------------------------
经常会遇到这样一种情况。
在iframe里嵌入另外一个页面时。如果iframe载入的页面响应较快,或许我们感觉不到页面载入的不同步,但试想,如果一个需要内嵌到iframe里的页面的响应很慢,这里会出现一种什么现象呢?这时将会出现所有页面已经载入完成,但在iframe元素处,将会出现空白,直到内嵌页面完成载入时,该空白处才会显示新载入的页面。
可想而知,一个页面如果长时间的空白,对于浏览者来说将意味着什么。
如果在内嵌页面未载入完成时,给出一种加载提示信息。如:“页面加载中”之类的,我想这对浏览页面用户来讲,将不再是煎熬,更是一种视觉上的享受。
为了实现这样的效果,一般会采用如下原理处理。
·iframe载入区域给出友好的提示信息。
·当iframe载入完成时,清空提示信息,而让iframe显示。
这些都比较容易,但现在的问题的关键是怎么监听iframe元素内的页面已经载入完成。
关键这个问题,一般来讲,会分两种情况的来讨论解决方案。
·同域的嵌套。最好是让子页面调用父页面的方法。
·如果是异域,但子页面无法修改,那么:在Firefox/Opera/Safari中,可以直接使用iframe onload事件;而在IE中,可以通过定时器测定子页面的document.readyState,或者使用iframe onreadystatechange事件计算该事件的响应。
1.同域嵌套。
parent.html
function ifrmLoaded() { // code here }
sub.html
window.onload = function() { window.parent.ifrmLoaded(); }
有时候,为了防止自己的页面不被别人嵌套,可以采用如下方式解决:
if(window.parent!=window) window.parent.location="http://hqlong.com"; //or if(window.top!=window) window.top.location="http://hqlong.com";
2.嵌套页面不能修改,或者异域嵌套。
2.1 Firefox/Opera/Safari中直接使用iframe onload事件
document.getElementById('ifrm').onload = function() { //here doc }
2.2 在IE下,定时器测document.readyState或者注册iframe onreadystatechange事件
2.2.1 使用定时器
var oFrm = document.getElementById('ifrm'); var fmState=function(){ var state=null; if(document.readyState){ try{ state=oFrm.document.readyState; }catch(e){state=null;} if(state=="complete" || !state) { onComplete(); return; } window.setTimeout(fmState,10); } }; //在改变src或者通过form target提交表单时,执行语句: if(fmState.TimeoutInt) window.clearTimeout(fmState.timeoutInt); fmState.timeoutInt = window.setTimeout(fmState,400);
2.2.2 使用iframe onreadystatechange事件
var oFrm = document.getElementById('ifrm'); oFrm.onreadystatechange = function() { if (this.readyState && this.readyState == 'complete') { onComplete(); } }
每当iframe加载页面,过程内会激活onreadystatechange事件三次,相应的状态分别是loading,interactive和complete,而最后一次才是complete.
3. 兼容Firefox/Opera/Safari/IE的处理方式。
var oFrm = document.getElementById('ifrm'); oFrm.onload = oFrm.onreadystatechange = function() { if (this.readyState && this.readyState != 'complete') return; else { onComplete(); }
发表评论
-
HttpServletRequestWrapper 用法
2014-02-14 22:15 14674Servlet规范中所引入的filter令人心动不已,因为它引 ... -
javascript常用 正则
2010-06-14 16:42 2149javascript身份证号验证 正则 //这个可以 ... -
javaScript 计算网页内容的宽与高 (浏览器的标准模式与怪异模式)
2010-01-06 15:07 4340标准模式与怪异模式 ... -
12 ADS.js库(第二版本)
2009-05-11 10:07 3341前面的 第11篇文章 用到了这个版本的ADS.js / ... -
11 自己的JS调试工具 myLogger()对象
2009-05-11 09:58 2227/** * @author elf */ funct ... -
10 javaScript的异常处理 try{ }catch(theException){ }
2009-05-03 15:04 1818例子: try { //一个异常在这里产生 ... -
9 通过call()和apply()重新定义执行环境
2009-05-03 15:02 1640通过前面学习,已知道this对象的环境是如何随着函数被赋值给其 ... -
8 this是什么
2009-04-26 14:55 1940this在javascript中 情况是不同与java c+ ... -
7 编写类
2009-04-25 20:19 1440以前写过类似的例子, 见http://elf8848.itey ... -
6 继承
2009-04-25 19:45 1558javascript 中没有从一个类扩展出另一个类的底层类结构 ... -
5 迭代对象
2009-04-25 19:23 1400我们常用到for循环 var list=[5,6,7, ... -
4 没有重载
2009-04-25 19:11 1548关于"重载"的概念, 就不用说了. ... -
3 创建自己的库 ADS.js(第一版本)
2009-04-25 18:43 2971伪命名空间的使用. 在javascript2.0广泛使 ... -
2 不要检测版本,要检测对象
2009-04-25 13:09 1490为了编写能兼容各种浏览器的 javascript ,我们可能首 ... -
1 在html中包含javascript
2009-04-25 11:10 5488方法一: 通过外部源文件来包含javascript,这是最正 ... -
常用的JS-备份
2009-03-20 08:46 2650我常用 的HTML 类型<!DOCTYPE html ... -
JS 闭包
2009-03-15 18:32 3630function outerFun() { ... -
DOM 删除节点
2009-03-13 17:48 3344removeChild() 方法删除指定节点。 ... -
如何使用定时器settimeout、setInterval执行能传递参数的函数
2009-03-11 19:03 15438无论是window.setTimeout还是window.se ... -
JavaScript函数参数个数
2009-03-11 18:51 3969<html><head><met ...
相关推荐
iframe高度自适应代码及演示页面。 适合新手,用到iframe,并且需要高度自适应的人士。 老手自动绕行,又没什么技术含量。。。 解压之后,打开iframe-auto.html之后查看效果. 如果不能查看,检查是否允许执行js
iframe 跨域 自适应高度 模板 iframe 跨域 自适应高度 模板 iframe 跨域 自适应高度 模板
Iframe 高度自适应,js控制Iframe 高度自适应.docx
iframe包含的页面的高度,兼容性好,iframe高度自适应
iframe高度自适应.pdf
Iframe自动根据类容改变自己的大小,解决Iframe设置高度后无法缩小!拜一个高人所赐,特表示感谢!
根据iframe内容高度自适应。不能确保所有的地方都能通用,但是大部分地方都能适用。
NULL 博文链接:https://jxdwuao.iteye.com/blog/1243362
完美解决跨域iframe的高度自适应,完美解决跨子域iframe的高度自适应,嵌入几个页面解决跨域iframe的高度自适应。。。
iframe自适应高度和宽度
jsp页面iframe高度自适应的js代码.docx
iframe 自适应高度iframe 自适应高度iframe 自适应高度iframe 自适应高度iframe 自适应高度iframe 自适应高度iframe 自适应高度iframe 自适应高度
用jquery实现iframe高度自适应实例代码完美兼容多数浏览器
纯JS实现的iframe自适应高度。兼容主流浏览器。
文件为iframe高度自适应的代码demo,能够兼容常用浏览器,项目开发当中我常拿来用
这个库允许的高度与同跨域iframe来适应他们所包含的内容的宽度自动调整大小。它最常见的问题与使用iframes提供一系列的功能,其中包括: 高度和宽度大小的iframe内容大小。 作品以多个嵌套的iframe。 跨域iframe域...
iframe高度自适应,多浏览器兼容 已测试过在ie6,7,8,firefox8,chrom15中通过
解决IE,Firefox,chrome,safari浏览器中iframe显示高度自适应问题
通用,可行的iframe高度自适应程序,通过ie6-ie8,ff3.5,opera,google为代表的前大内核的浏览器,可以保证iframe 高度自适应,其中涉及调第三方程序设置站点session