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 DIV弹出效果实现代码
Jul 03 Javascript
通过Mootools 1.2来操纵HTML DOM元素
Sep 15 Javascript
Javascript 键盘keyCode键码值表
Dec 24 Javascript
JQuery 操作select标签实现代码
May 14 Javascript
js过滤特殊字符输入适合输入、粘贴、拖拽多种情况
Mar 22 Javascript
理解jquery事件冒泡
Jan 03 Javascript
Vuex简单入门
Apr 19 Javascript
JavaScript实现移动端轮播效果
Jun 06 Javascript
jQuery解析json格式数据示例
Sep 01 jQuery
JS删除数组指定值常用方法详解
Jun 04 Javascript
Node 使用express-http-proxy 做api网关的实现
Oct 15 Javascript
详解如何在vue+element-ui的项目中封装dialog组件
Dec 11 Vue.js
基于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程序员编程注意事项
2008/04/10 PHP
Windows下XDebug 手工配置与使用说明
2010/07/11 PHP
php小偷相关截取函数备忘
2010/11/28 PHP
php调用c接口无错版介绍
2014/03/11 PHP
简介PHP的Yii框架中缓存的一些高级用法
2016/03/29 PHP
记Laravel调用Gin接口调用formData上传文件的实现方法
2019/12/12 PHP
使用Javascript和DOM Interfaces来处理HTML
2006/10/09 Javascript
node.js入门教程迷你书、node.js入门web应用开发完全示例
2014/04/06 Javascript
readonly和disabled属性的区别
2015/07/26 Javascript
jquery实现的Banner广告收缩效果代码
2015/09/02 Javascript
Webwork 实现文件上传下载代码详解
2016/02/02 Javascript
再次谈论Javascript中的this
2016/06/23 Javascript
Bootstrap模态框(Modal)实现过渡效果
2017/03/17 Javascript
JS实现520 表白简单代码
2018/05/21 Javascript
小程序文字跑马灯效果
2018/12/28 Javascript
微信小程序webview与h5通过postMessage实现实时通讯的实现
2019/08/20 Javascript
JS实现网页端猜数字小游戏
2020/03/06 Javascript
[06:23]2014DOTA2西雅图国际邀请赛 小组赛7月12日TOPPLAY
2014/07/12 DOTA
[51:26]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#3Secret VS OG第二局
2016/03/03 DOTA
[04:40]2016国际邀请赛中国区预选赛全程TOP10镜头集锦
2016/07/01 DOTA
[53:20]2018DOTA2亚洲邀请赛 4.1 小组赛 A组加赛 VG vs OG
2018/04/03 DOTA
python使用urllib模块和pyquery实现阿里巴巴排名查询
2014/01/16 Python
使用Python操作Elasticsearch数据索引的教程
2015/04/08 Python
ubuntu安装sublime3并配置python3环境的方法
2018/03/15 Python
Python 中 function(#) (X)格式 和 (#)在Python3.*中的注意事项
2018/11/30 Python
python实现信号时域统计特征提取代码
2020/02/26 Python
Python object类中的特殊方法代码讲解
2020/03/06 Python
Python通过文本和图片生成词云图
2020/05/21 Python
华为慧通面试题
2012/09/11 面试题
java程序员面试交流
2012/11/29 面试题
建筑专业自荐信
2013/10/18 职场文书
班委竞选演讲稿
2014/04/28 职场文书
快餐公司创业计划书
2014/04/29 职场文书
英语教育专业自荐信
2014/05/29 职场文书
邓小平文选读书笔记
2015/06/29 职场文书
了解Redis常见应用场景
2021/06/23 Redis