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 相关文章推荐
如何实现动态删除javascript函数
May 27 Javascript
javascript不可用的问题探究
Oct 01 Javascript
多种方法实现JS动态添加事件
Nov 01 Javascript
学习JavaScript设计模式之享元模式
Jan 18 Javascript
js生成随机数(指定范围)的实例代码
Jul 10 Javascript
Node.js安装配置图文教程
May 10 Javascript
详解angularJs中关于ng-class的三种使用方式说明
Jun 02 Javascript
JS中使用new Option()实现时间联动效果
Dec 10 Javascript
vue router 组件的高级应用实例代码
Apr 08 Javascript
基于Vue2-Calendar改进的日历组件(含中文使用说明)
Apr 14 Javascript
highcharts.js数据绑定方式代码实例
Nov 13 Javascript
手机浏览器唤起微信分享(JS)
Oct 11 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验证码显示不出来的解决方法
2014/03/29 PHP
PHP多个文件上传到服务器实例
2014/10/29 PHP
PHP简单实现欧拉函数Euler功能示例
2017/11/06 PHP
iframe异步加载实现点击左边菜单加载右边内容实例讲解
2013/03/04 Javascript
jquery修改属性值实例代码(设置属性值)
2014/01/06 Javascript
jquery实现的网页自动播放声音
2014/04/30 Javascript
我的Node.js学习之路(三)--node.js作用、回调、同步和异步代码 以及事件循环
2014/07/06 Javascript
angularjs客户端实现压缩图片文件并上传实例
2015/07/06 Javascript
js格式化输入框内金额、银行卡号
2016/02/01 Javascript
快速移动鼠标触发问题及解决方法(ECharts外部调用保存为图片操作及工作流接线mouseenter和mouseleave)
2016/08/29 Javascript
js验证手机号、密码、短信验证码代码工具类
2020/06/24 Javascript
微信小程序左滑删除效果的实现代码
2017/02/20 Javascript
jQuery EasyUI Panel面板组件使用详解
2017/02/28 Javascript
vue子组件使用自定义事件向父组件传递数据
2017/05/27 Javascript
Angular如何引入第三方库的方法详解
2017/07/13 Javascript
React教程之Props验证的具体用法(Props Validation)
2017/09/04 Javascript
js prototype深入理解及应用实例分析
2019/11/25 Javascript
js回到页面指定位置的三种方式
2020/12/17 Javascript
从零学python系列之数据处理编程实例(一)
2014/05/22 Python
决策树的python实现方法
2014/11/18 Python
将Emacs打造成强大的Python代码编辑工具
2015/11/20 Python
Python面向对象特殊成员
2017/04/24 Python
python实现周期方波信号频谱图
2018/07/21 Python
Python类中的魔法方法之 __slots__原理解析
2019/08/26 Python
pytorch动态网络以及权重共享实例
2020/01/06 Python
Python 安装 virturalenv 虚拟环境的教程详解
2020/02/21 Python
Python编程快速上手——PDF文件操作案例分析
2020/02/28 Python
QML实现钟表效果
2020/06/02 Python
python程序需要编译吗
2020/06/19 Python
结合 CSS3 transition transform 实现简单的跑马灯效果的示例
2018/02/07 HTML / CSS
巧用CSS3的calc()宽度计算做响应模式布局的方法
2018/03/22 HTML / CSS
来自Ocado的宠物商店:Fetch
2018/07/10 全球购物
网站设计师的岗位职责
2013/11/21 职场文书
餐厅采购员岗位职责
2014/03/06 职场文书
2015年乡镇扶贫工作总结
2015/04/08 职场文书
goland 设置project gopath的操作
2021/05/06 Golang