JS iFrame加载慢怎么解决


Posted in Javascript onMay 13, 2016

在项目中经常要动态添加iframe,然后再对添加的iframe进行相关操作,有时候会遇到iframe加载很慢什么原因呢,该如何解决呢?带着这个问题一起通过本文学习,寻找答案吧!

aaa.html

<HTML>
<HEAD>
<TITLE>aaa</TITLE>
</HEAD>
<BODY>
<IFRAME src="bbb.html" name=bbb width="100%" height="190"> </IFRAME>
<INPUT type="button" value="显示text控件值" onclick="alert(bbb.document.all.txt.value)"> 
<SCRIPT LANGUAGE="JavaScript">
alert(bbb.document.all.txt.value);
</SCRIPT>
</BODY>
</HTML>

bbb.html

<HTML>
<HEAD>
<TITLE>bbb</TITLE>
</HEAD>
<BODY>
<input type=text name=txt value="guoguo"> 
</BODY>
</HTML>

问题:

执行上面的aaa.html发现代码直接alert的值没有打出来,而点击按钮却可以打出其值。

分析:

页面加载时,遇到iframe就直接跳过去,加载下面的内容,然后再回来加载iframe,当然也可以理解成遇到iframe又开了一个线程来加载iframe,但是因为涉及到新的IO操作比较耗时,所以加载完成iframe还是晚于页面下部的js代码执行,所以出现了上面的问题。

解决方法:

在js代码中加个延迟(具体延迟多长时间可以凭个人经验了),这样就可以保证正常得到iframe中的对象了。

<SCRIPT LANGUAGE="JavaScript">
setTimeout("alert(bbb.document.all.txt.value)",1500);
</SCRIPT>

结论:当一个页面中包含了iframe时,如果我们要通过js来操作iframe中的对象,一定要等到iframe加载完毕之后再操作,否则得不到想要的对象。

以上所述是小编给大家介绍的JS iFrame加载慢的解决办法,希望对大家有所帮助,同时也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jquery.validate分组验证代码
Mar 17 Javascript
jquery插件开发方法(初学者)
Feb 03 Javascript
ASP.NET jQuery 实例14 在ASP.NET form中校验时间范围
Feb 03 Javascript
JQuery防止退格键网页后退的实现代码
Mar 23 Javascript
js获取判断上传文件后缀名的示例代码
Feb 19 Javascript
jquery实现弹出div,始终显示在屏幕正中间的简单实例
Mar 08 Javascript
js操作DOM--添加、删除节点的简单实例
Jul 08 Javascript
微信小程序 用户数据解密详细介绍
Jan 09 Javascript
基本DOM节点操作
Jan 17 Javascript
jquery 键盘事件的使用方法详解
Sep 13 jQuery
如何从零开始手写Koa2框架
Mar 22 Javascript
详解js中的原型,原型对象,原型链
Jul 16 Javascript
基于JS实现的笛卡尔乘积之商品发布
May 13 #Javascript
基于jQuery倒计时插件实现团购秒杀效果
May 13 #Javascript
js获取鼠标点击的对象,点击另一个按钮删除该对象的实现代码
May 13 #Javascript
最简单的tab切换实例代码
May 13 #Javascript
浅析创建javascript对象的方法
May 13 #Javascript
全面理解JavaScript中的闭包
May 12 #Javascript
Bootstrap框架动态生成Web页面文章内目录的方法
May 12 #Javascript
You might like
php中显示数组与对象的实现代码
2011/04/18 PHP
有关php运算符的知识大全
2011/11/03 PHP
php自动加载autoload机制示例分享
2014/02/20 PHP
php实现微信发红包
2015/12/05 PHP
PHP代码维护,重构变困难的4种原因分析
2016/01/25 PHP
深入了解PHP中的Array数组和foreach
2016/11/06 PHP
PHP微信开发之微信录音临时转永久存储
2018/01/26 PHP
javascript天然的迭代器
2010/10/29 Javascript
javascript打印输出json实例
2013/11/11 Javascript
javascript 密码框防止用户粘贴和复制的实现代码
2014/02/17 Javascript
jQuery实现自定义事件的方法
2015/04/17 Javascript
AngularJs Injecting Services Into Controllers详解
2016/09/02 Javascript
微信小程序 wxapp内容组件 text详细介绍
2016/10/31 Javascript
jQuery异步提交表单实例
2017/05/30 jQuery
微信小程序实现城市列表选择
2018/06/05 Javascript
深入探讨JavaScript的最基本部分之执行上下文
2019/02/12 Javascript
jQuery zTree插件快速实现目录树
2019/08/16 jQuery
原生js中运算符及流程控制示例详解
2021/01/05 Javascript
Python 包含汉字的文件读写之每行末尾加上特定字符
2016/12/12 Python
python实现Excel文件转换为TXT文件
2019/04/28 Python
python使用pandas处理大数据节省内存技巧(推荐)
2019/05/05 Python
Python GUI编程 文本弹窗的实例
2019/06/11 Python
Django Celery异步任务队列的实现
2019/07/24 Python
Python使用__new__()方法为对象分配内存及返回对象的引用示例
2019/09/20 Python
python实现的登录与提交表单数据功能示例
2019/09/25 Python
django 连接数据库出现1045错误的解决方式
2020/05/14 Python
一款基于css3和jquery实现的动画显示弹出层按钮教程
2015/01/04 HTML / CSS
英国电器零售商:PRC Direct
2018/06/21 全球购物
Nip + Fab官网:英国美容品牌
2019/08/26 全球购物
党员干部承诺书范文
2014/03/25 职场文书
学生评语大全
2014/04/18 职场文书
学校志愿者活动总结
2014/06/27 职场文书
法定代表人身份证明书
2015/06/18 职场文书
python基础之爬虫入门
2021/05/10 Python
图文详解Nginx版本平滑升级方案
2021/09/15 Servers
Spring Boot 底层原理基础深度解析
2022/04/03 Java/Android