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 相关文章推荐
JS 容错处理代码, 屏蔽错误信息
Mar 09 Javascript
Javascript Jquery 遍历Json的实现代码
Mar 31 Javascript
基于Jquery的文字滚动跑马灯插件(一个页面多个滚动区)
Jul 26 Javascript
javascript 表格内容排序 简单操作示例代码
Jan 03 Javascript
JavaScript 开发工具webstrom使用指南
Dec 09 Javascript
js实现倒计时及时间对象
Nov 15 Javascript
Bootstrap 3 进度条的实现
Feb 22 Javascript
详解webpack进阶之插件篇
Jul 06 Javascript
javaScript产生随机数的用法小结
Apr 21 Javascript
vue下拉菜单组件(含搜索)的实现代码
Nov 25 Javascript
vue 中url 链接左边的小图标更改问题
Dec 30 Javascript
在 HTML 页面中使用 React的场景分析
Jan 18 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
《APMServ 5.1.2》使用图解
2006/10/23 PHP
PHP学习笔记之数组篇
2011/06/28 PHP
Codeigniter注册登录代码示例
2014/06/12 PHP
[原创]站长必须要知道的javascript广告代码
2007/05/30 Javascript
封装了一个js图片轮换效果的函数
2011/09/28 Javascript
js判断游览器类型及版本号的代码
2014/05/11 Javascript
jQuery实现列表自动滚动循环滚动展示新闻
2014/08/22 Javascript
jquery实现网页的页面平滑滚动效果代码
2015/11/02 Javascript
实例分析浏览器中“JavaScript解析器”的工作原理
2016/12/12 Javascript
利用10行js代码实现上下滚动公告效果
2017/12/08 Javascript
layer.open 按钮的点击事件关闭方法
2018/08/17 Javascript
vuex + keep-alive实现tab标签页面缓存功能
2019/10/17 Javascript
webpack打包html里面img后src为“[object Module]”问题
2019/12/22 Javascript
Vuex中的Mutations的具体使用方法
2020/06/01 Javascript
Python浅拷贝与深拷贝用法实例
2015/05/09 Python
浅析Python的Django框架中的Memcached
2015/07/23 Python
详解Python3中的Sequence type的使用
2015/08/01 Python
python实现字符串和字典的转换
2018/09/29 Python
详解用python计算阶乘的几种方法
2019/08/14 Python
Python中*args和**kwargs的区别详解
2019/09/17 Python
Python实现查找数据库最接近的数据
2020/06/08 Python
python使用dlib进行人脸检测和关键点的示例
2020/12/05 Python
用CSS3和table标签实现一个圆形轨迹的动画的示例代码
2019/01/17 HTML / CSS
PAUL HEWITT手表美国站:德国北部时尚生活配饰品牌,船锚元素
2017/11/18 全球购物
德国自行车商店:Tretwerk
2019/06/21 全球购物
说一下mysql, oracle等常见数据库的分页实现方案
2012/09/29 面试题
工地门卫岗位职责
2013/12/30 职场文书
房屋改造计划书
2014/01/10 职场文书
生日邀请函范文
2014/01/13 职场文书
三月学雷锋月活动总结
2014/04/28 职场文书
公共场所标语
2014/06/30 职场文书
房屋租赁合同协议书范本
2014/10/19 职场文书
迟到检讨书
2015/01/26 职场文书
医生个人年终总结
2015/02/28 职场文书
商标侵权律师函
2015/05/27 职场文书
keepalived + nginx 实现高可用方案
2022/12/24 Servers