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实现点击栏目背景色改变
Dec 10 Javascript
深入理解JavaScript系列(37):设计模式之享元模式详解
Mar 04 Javascript
JavaScript实现添加及删除事件的方法小结
Aug 04 Javascript
javascript 动态修改css样式方法汇总(四种方法)
Aug 27 Javascript
浏览器环境下JavaScript脚本加载与执行探析之defer与async特性
Jan 14 Javascript
ionic选择多张图片上传的示例代码
Oct 10 Javascript
详解各版本React路由的跳转的方法
May 10 Javascript
微信小程序通过一个json实现分享朋友圈图片
Sep 03 Javascript
解决使用layui的时候form表单中的select等不能渲染的问题
Sep 18 Javascript
Vue组件通信入门之Provide和Inject机制
Dec 29 Javascript
基于Angular 8和Bootstrap 4实现动态主题切换的示例代码
Feb 11 Javascript
vue element el-transfer增加拖拽功能
Jan 15 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类中Static方法效率测试代码
2010/10/17 PHP
谨慎使用PHP的引用原因分析
2012/09/06 PHP
javascript 去字符串空格终极版(支持utf8)
2009/11/14 Javascript
映彩衣的js随笔(js图片切换效果)
2011/07/31 Javascript
js 定时器setTimeout无法调用局部变量的解决办法
2013/11/28 Javascript
Jquery easyUI 更新行示例
2014/03/06 Javascript
js代码实现的加入收藏效果并兼容主流浏览器
2014/06/23 Javascript
jQuery中的jQuery()方法用法分析
2014/12/27 Javascript
ECMAScript中函数function类型
2015/06/03 Javascript
由浅入深讲解Javascript继承机制与simple-inheritance源码分析
2015/12/13 Javascript
深入解析JavaScript中的立即执行函数
2016/05/21 Javascript
javascript鼠标滑过显示二级菜单特效
2020/11/18 Javascript
jQuery删除节点用法示例(remove方法)
2016/09/08 Javascript
JS判断form内所有表单是否为空的简单实例
2016/09/09 Javascript
JS中事件冒泡和事件捕获介绍
2016/12/13 Javascript
微信小程序日历组件calendar详解及实例
2017/06/08 Javascript
基于javascript 显式转换与隐式转换(详解)
2017/12/15 Javascript
angular4+百分比进度显示插件用法示例
2019/05/05 Javascript
15分钟学会vue项目改造成SSR(小白教程)
2019/12/17 Javascript
vue+vant实现商品列表批量倒计时功能
2020/01/13 Javascript
Node.js API详解之 querystring用法实例分析
2020/04/29 Javascript
深入理解Python 代码优化详解
2014/10/27 Python
Python+Socket实现基于UDP协议的局域网广播功能示例
2017/08/31 Python
pip matplotlib报错equired packages can not be built解决
2018/01/06 Python
python使用pymongo操作mongo的完整步骤
2019/04/13 Python
Python Matplotlib 基于networkx画关系网络图
2019/07/10 Python
利用python实现PSO算法优化二元函数
2019/11/13 Python
Python3中的f-Strings增强版字符串格式化方法
2020/03/04 Python
python 利用Pyinstaller打包Web项目
2020/10/23 Python
python 中 .py文件 转 .pyd文件的操作
2021/03/04 Python
美国最大的电子宠物训练产品制造商:PetSafe
2018/10/12 全球购物
Booking.com缤客中国:全球酒店在线预订网站
2020/05/03 全球购物
澳大利亚女装精品店:Alannah Hill
2020/07/29 全球购物
幼儿园教师自荐书
2015/03/06 职场文书
2016年公司“3.12”植树节活动总结
2016/03/16 职场文书
JavaScript实现音乐播放器
2022/08/14 Javascript