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 相关文章推荐
JTrackBar水平拖动效果
Jul 15 Javascript
Javascript的常规数组和关联数组对比小结
May 24 Javascript
js采用map取到id集合组并且实现点击一行选中一行
Dec 16 Javascript
Jquery模仿Baidu、Google搜索时自动补充搜索结果提示
Dec 26 Javascript
javaScript基础语法介绍
Feb 28 Javascript
javascript控制图片播放的实现代码
Jul 29 Javascript
JavaScript常用基础知识强化学习
Dec 09 Javascript
MVC+jQuery.Ajax异步实现增删改查和分页
Dec 22 Javascript
jQuery插件FusionCharts实现的2D面积图效果示例【附demo源码下载】
Mar 06 Javascript
Vue2.0组件间数据传递示例
Mar 07 Javascript
详解vue-cli 构建项目 vue-cli请求后台接口 vue-cli使用axios、sass、swiper
May 28 Javascript
基于VSCode调试网页JavaScript代码过程详解
Jul 20 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
php FPDF类库应用实现代码
2009/03/20 PHP
PHP闭包(Closure)使用详解
2013/05/02 PHP
php+mysqli数据库连接的两种方式
2015/01/28 PHP
在Windows XP下安装Apache+MySQL+PHP环境
2015/02/22 PHP
php结合ajax实现手机发红包的案例
2016/10/13 PHP
php中错误处理操作实例分析
2019/08/23 PHP
jQuery EasyUI API 中文文档 - MenuButton菜单按钮使用介绍
2011/10/06 Javascript
jquery实现可拖动DIV自定义保存到数据的实例
2013/11/20 Javascript
详解JavaScript异步编程中jQuery的promise对象的作用
2016/05/03 Javascript
javascript中JSON.parse()与eval()解析json的区别
2016/05/19 Javascript
JavaScript将DOM事件处理程序封装为event.js 出现的低级错误问题
2016/08/03 Javascript
关于JS中二维数组的声明方法
2016/09/24 Javascript
基于JavaScript实现Tab选项卡切换效果
2016/11/24 Javascript
详解React开发中使用require.ensure()按需加载ES6组件
2017/05/12 Javascript
weex slider实现滑动底部导航功能
2017/08/28 Javascript
JS实现匀加速与匀减速运动的方法示例
2017/09/04 Javascript
JavaScript实现AOP详解(面向切面编程,装饰者模式)
2017/12/19 Javascript
vue-router路由懒加载的实现(解决vue项目首次加载慢)
2018/08/28 Javascript
Vue点击切换Class变化,实现Active当前样式操作
2020/07/17 Javascript
python模拟Django框架实例
2016/05/17 Python
python学习基础之循环import及import过程
2018/04/22 Python
python将list转为matrix的方法
2018/12/12 Python
Python3几个常见问题的处理方法
2019/02/26 Python
cProfile Python性能分析工具使用详解
2019/07/22 Python
python防止随意修改类属性的实现方法
2019/08/21 Python
python实现微信小程序用户登录、模板推送
2019/08/28 Python
Python配置文件处理的方法教程
2019/08/29 Python
Selenium 安装和简单使用的实现
2020/12/04 Python
css3进阶之less实现星空动画的示例代码
2019/09/10 HTML / CSS
城市规划应届毕业生自荐信
2014/07/04 职场文书
2015年学校政教处工作总结
2015/05/26 职场文书
第一节英语课开场白
2015/06/01 职场文书
银行客户经理培训心得体会
2016/01/09 职场文书
《中国机长》观后感:敬畏生命,敬畏职责
2019/11/12 职场文书
导游词之无锡东林书院
2019/12/11 职场文书
SQL实战演练之网上商城数据库商品类别数据操作
2021/10/24 MySQL