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多物体 任意值 链式 缓冲运动
Aug 10 Javascript
jquery 元素控制(追加元素/追加内容)介绍及应用
Apr 21 Javascript
jquery触发a标签跳转事件示例代码
Jul 21 Javascript
解析URI与URL之间的区别与联系
Nov 22 Javascript
js实现最短的XML格式化工具实例
Mar 12 Javascript
jQuery自定义图片缩放拖拽插件imageQ实现方法(附demo源码下载)
May 27 Javascript
Angular.js中$apply()和$digest()的深入理解
Oct 13 Javascript
Web开发中客户端的跳转与服务器端的跳转的区别
Mar 05 Javascript
node.js通过axios实现网络请求的方法
Mar 05 Javascript
浅析Vue中method与computed的区别
Mar 06 Javascript
JS获取指定月份的天数两种实现方法
Jun 22 Javascript
详解element-ui中el-select的默认选择项问题
Aug 02 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
调频问题解答
2021/03/01 无线电
简化php模板页面中分页代码的解析
2009/02/06 PHP
浅析php原型模式
2014/11/25 PHP
Laravel配置全局公共函数的方法步骤
2019/05/09 PHP
js表格分页实现代码
2009/09/18 Javascript
javascript &amp;&amp;和||运算法的另类使用技巧
2009/11/28 Javascript
网页加载时页面显示进度条加载完成之后显示网页内容
2012/12/23 Javascript
JS清除IE浏览器缓存的方法
2013/07/26 Javascript
js调用iframe实现打印页面内容的方法
2014/03/04 Javascript
JS使用eval()动态创建变量的方法
2016/06/03 Javascript
JavaScript中日期函数的相关操作知识
2016/08/03 Javascript
JS中正则表达式要注意lastIndex属性
2017/08/08 Javascript
echarts同一页面中四个图表切换的js数据交互方法示例
2018/07/03 Javascript
layui 给数据表格加序号的方法
2018/08/20 Javascript
angular 服务随记小结
2019/05/06 Javascript
[01:20]DOTA2 2017国际邀请赛冠军之路无止竞
2017/06/19 DOTA
python基于multiprocessing的多进程创建方法
2015/06/04 Python
TensorFlow设置日志级别的几种方式小结
2020/02/04 Python
python 指定源路径来解决import问题的操作
2021/03/04 Python
深入浅出CSS3 background-clip,background-origin和border-image教程
2011/01/27 HTML / CSS
canvas像素画板的实现代码
2018/11/21 HTML / CSS
捷克钓鱼用品网上商店:Parys.cz
2018/06/15 全球购物
英国可持续奢侈品包包品牌:Elvis & Kresse
2018/08/05 全球购物
Chain Reaction Cycles俄罗斯:世界上最大的在线自行车商店
2019/08/27 全球购物
2019年Java 最常见的 面试题
2016/10/19 面试题
电脑教师的教学自我评价
2013/11/26 职场文书
给酒店员工的表扬信
2014/01/11 职场文书
小学感恩教育活动总结
2014/07/07 职场文书
党支部创先争优承诺书
2014/08/30 职场文书
农村党员对照检查材料
2014/09/24 职场文书
责任书格式
2015/01/29 职场文书
小学推普周活动总结
2015/05/07 职场文书
公司借款担保书
2015/09/22 职场文书
2016年度先进班组事迹材料
2016/03/01 职场文书
Golang使用Panic与Recover进行错误捕获
2022/03/22 Golang
java项目构建Gradle的使用教程
2022/03/24 Java/Android