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 相关文章推荐
滚动经典最新话题[prototype框架]下编写
Oct 03 Javascript
学习jquery之一
Apr 27 Javascript
YUI Compressor压缩JavaScript原理及微优化
Jan 07 Javascript
JavaScript严格模式禁用With语句的原因
Oct 20 Javascript
JavaScript基础知识学习笔记
Dec 02 Javascript
悬浮广告方法日常收集整理
Mar 18 Javascript
Node.js操作mysql数据库增删改查
Mar 30 Javascript
实现单层json按照key字母顺序排序的示例
Dec 06 Javascript
Egg.js 中 AJax 上传文件获取参数的方法
Oct 10 Javascript
Javascript实现秒表倒计时功能
Nov 17 Javascript
微信小程序城市选择及搜索功能的方法
Mar 22 Javascript
浅谈JavaScript浅拷贝和深拷贝
Nov 07 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
ThinkPHP CURD方法之field方法详解
2014/06/18 PHP
php中FTP函数ftp_connect、ftp_login与ftp_chmod用法
2014/11/18 PHP
smarty内置函数section的用法
2015/01/22 PHP
Yii2实现同时搜索多个字段的方法
2016/08/10 PHP
Redis构建分布式锁
2017/03/28 PHP
来自国外的14个图片放大编辑的jQuery插件整理
2010/10/20 Javascript
nodejs实用示例 缩址还原
2010/12/28 NodeJs
JavaScript ( (__ = !$ + $)[+$] + ({} + $)[_/_] +({} + $)[_/_] )
2011/02/25 Javascript
屏蔽相应键盘按钮操作
2014/03/10 Javascript
使用JavaScript开发IE浏览器本地插件实例
2015/02/18 Javascript
JavaScript基于ajax编辑信息用法实例
2015/07/15 Javascript
javascript实现数组中的内容随机输出
2015/08/11 Javascript
Jquery使用小技巧汇总
2015/12/29 Javascript
JavaScript仿微信打飞机游戏
2020/07/05 Javascript
Three.js基础学习之场景对象
2017/09/27 Javascript
js判断传入时间和当前时间大小实例(超简单)
2018/01/11 Javascript
vue 动态修改a标签的样式的方法
2018/01/18 Javascript
微信小程序chooseImage的用法(从本地相册选择图片或使用相机拍照)
2018/08/22 Javascript
vue2.0 element-ui中el-select选择器无法显示选中的内容(解决方法)
2018/08/24 Javascript
详解ES6中的Map与Set集合
2019/03/22 Javascript
解决layui数据表格Date日期格式的回显Object的问题
2019/09/19 Javascript
python中常用检测字符串相关函数汇总
2015/04/15 Python
python实现扫描ip地址的小程序
2019/04/16 Python
PyQt5 实现字体大小自适应分辨率的方法
2019/06/18 Python
一行Python代码制作动态二维码的实现
2019/09/09 Python
python实现UDP协议下的文件传输
2020/03/20 Python
Pandas将列表(List)转换为数据框(Dataframe)
2020/04/24 Python
CSS3 3D位移translate效果实例介绍
2016/05/03 HTML / CSS
css 如何让背景图片拉伸填充避免重复显示
2013/07/11 HTML / CSS
eBay爱尔兰站:eBay.ie
2019/08/09 全球购物
学生的自我鉴定范文
2013/10/24 职场文书
硕士研究生求职自荐信范文
2014/03/11 职场文书
建筑专业毕业生求职信
2014/09/30 职场文书
2015迎新晚会开场白
2015/07/17 职场文书
三八节祝酒词
2015/08/11 职场文书
canvas 中如何实现物体的框选
2022/08/05 Javascript