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 相关文章推荐
用YUI做了个标签浏览效果
Feb 20 Javascript
JavaScript实现的一个计算数字步数的算法分享
Dec 06 Javascript
javascript针对不确定函数的执行方法
Dec 16 Javascript
JavaScript实现时钟滴答声效果
Jan 29 Javascript
EasyUI Datebox 日期验证之开始日期小于结束时间
May 19 Javascript
Bootstrap弹出框(Popover)被挤压的问题小结
Jul 11 Javascript
常用的 JS 排序算法 整理版
Apr 05 Javascript
详解使用jest对vue项目进行单元测试
Sep 07 Javascript
微信小程序实现跑马灯效果
Oct 21 Javascript
Vuex modules模式下mapState/mapMutations的操作实例
Oct 17 Javascript
JavaScript 替换所有匹配内容及正则替换方法
Feb 12 Javascript
JavaScript实现动态留言板
Mar 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 session处理的定制
2009/03/16 PHP
PHP 第二节 数据类型之数组
2012/04/28 PHP
php对数组排序的简单实例
2013/12/25 PHP
php设计模式之单例模式代码
2016/06/11 PHP
Laravel框架中VerifyCsrfToken报错问题的解决
2017/08/30 PHP
JS 控制CSS样式表
2009/08/20 Javascript
Javascript 二维数组
2009/11/26 Javascript
Jquery 跨域访问 Lightswitch OData Service的方法
2013/09/11 Javascript
jquery对象和DOM对象的任意相互转换
2016/02/21 Javascript
详解Node.js如何开发命令行工具
2016/08/14 Javascript
微信小程序 Page()函数详解
2016/10/17 Javascript
详解angular中如何监控dom渲染完毕
2017/01/03 Javascript
微信小程序实现的3d轮播图效果示例【基于swiper组件】
2018/12/11 Javascript
[03:12]2016完美“圣”典风云人物:单车专访
2016/12/02 DOTA
[43:26]完美世界DOTA2联赛PWL S2 Forest vs Rebirth 第二场 11.20
2020/11/23 DOTA
python实现单线程多任务非阻塞TCP服务端
2017/06/13 Python
python正则表达式re之compile函数解析
2017/10/25 Python
Python中多个数组行合并及列合并的方法总结
2018/04/12 Python
详解python:time模块用法
2019/03/25 Python
Python3.6实现带有简单界面的有道翻译小程序
2019/04/16 Python
利用Python的sympy包求解一元三次方程示例
2019/11/22 Python
详解Python在使用JSON时需要注意的编码问题
2019/12/06 Python
python学生信息管理系统实现代码
2019/12/17 Python
python、PyTorch图像读取与numpy转换实例
2020/01/13 Python
CSS3实现多背景模拟动态边框的效果
2016/11/08 HTML / CSS
浅谈html5与APP混合开发遇到的问题总结
2018/03/20 HTML / CSS
现代家居用品及礼品:LBC Modern
2018/06/24 全球购物
员工拾金不昧表扬信
2014/01/09 职场文书
团组织关系介绍信
2014/01/12 职场文书
本科毕业生求职信
2014/06/15 职场文书
注册资产评估专业求职信
2014/07/16 职场文书
上课说话检讨书
2015/01/27 职场文书
nginx如何将http访问的网站改成https访问
2021/03/31 Servers
mysql优化
2021/04/06 MySQL
Python进程间的通信之语法学习
2022/04/11 Python
Python  lambda匿名函数和三元运算符
2022/04/19 Python