博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
iframe高度自适应、载入完成事件
阅读量:6937 次
发布时间:2019-06-27

本文共 2994 字,大约阅读时间需要 9 分钟。

hot3.png

高度自适应

-------------------------------------------------

方法一:

经典代码 iFrame 自适应高度,在IE6/IE7/IE8/Firefox/Opera/Chrome/Safari通过测试。 

只适用于同域下,不能跨域。

 

Js代码  收藏代码

 
 //经典代码 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; } } 

 

方法二:

只适用于同域下,不能跨域。

Js代码  收藏代码

 //** iframe自动适应页面 **////输入你希望根据页面高度自动调整高度的iframe的名称的列表//用逗号把每个iframe的ID分隔. 例如: ["myframe1", "myframe2"],可以只有一个窗体,则不用逗号。//定义iframe的IDvar iframeids=["ifm"]//如果用户的浏览器不支持iframe是否将iframe隐藏 yes 表示隐藏,no表示不隐藏var iframehide="yes"function dyniframesize() {var dyniframe=new Array()for (i=0; i
 

 

载入完成事件

-------------------------------------------------------------------

经常会遇到这样一种情况。

在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";//orif(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();     }

转载于:https://my.oschina.net/VWRpBbK/blog/378233

你可能感兴趣的文章
DotNetTextBoxV3.0在线编辑器控件Ver3.5.0 Open Source免费开源版
查看>>
CF 429B B.Working out (四角dp)
查看>>
学习wordpress+SAE
查看>>
CSS控制的内容超过容器宽度后显示省略号
查看>>
MySQL 调优/优化的 100 个建议
查看>>
挨踢项目求生法则-需求篇
查看>>
centos搭建ntp服务器
查看>>
mysql一个冷门参数引起的同步故障
查看>>
dreamweaver中基本代码的含义
查看>>
云端保护刻不容缓
查看>>
php安装memcached扩展:
查看>>
第4章 部署模式 Deployment Plan(部署规划)
查看>>
Navicat for MySQL使用手记(中)--导入/导出数据表
查看>>
互动交流:移动系统安全研究专题及用户关心的焦点问题调研
查看>>
我的友情链接
查看>>
去哪儿网支付系统架构演进(下篇)
查看>>
./configure: error: the HTTP rewrite module requires the PCRE library
查看>>
使用AzCopy命令行工具上传VHD
查看>>
使用Windows Azure 第一步就应该创建地缘组Affinity groups
查看>>
征询一下意见
查看>>