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通过Ajax提交表单并返回结果
Jul 31 Javascript
js脚本实现数据去重
Nov 27 Javascript
浅谈javascript中onbeforeunload与onunload事件
Dec 10 Javascript
React如何避免重渲染
Apr 10 Javascript
动态加载JavaScript文件的3种方式
May 05 Javascript
详解基于mpvue的小程序markdown适配解决方案
May 08 Javascript
小程序ios音频播放没声音问题的解决
Jul 11 Javascript
分享一个vue项目“脚手架”项目的实现步骤
May 26 Javascript
Vue快速实现通用表单验证的示例代码
Jan 09 Javascript
vue之封装多个组件调用同一接口的案例
Aug 11 Javascript
JS实现鼠标移动拖尾
Dec 27 Javascript
vue如何使用rem适配
Feb 06 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
xml+php动态载入与分页
2006/10/09 PHP
php 字符串压缩方法比较示例
2014/01/23 PHP
PHP图形计数器程序显示网站用户浏览量
2016/07/20 PHP
Laravel 实现密码重置功能
2018/02/23 PHP
Thinkphp5框架ajax接口实现方法分析
2019/08/28 PHP
jQuery使用一个按钮控制图片的伸缩实现思路
2013/04/19 Javascript
将json对象转换为字符串的方法
2014/02/20 Javascript
jQuery控制TR显示隐藏的三种常用方法
2014/08/21 Javascript
浅析jQuery EasyUI中的tree使用指南
2014/12/18 Javascript
jQuery对象与DOM对象之间的相互转换
2015/03/03 Javascript
不能不知道的10个angularjs英文学习网站
2016/03/23 Javascript
Bootstrap学习笔记之css组件(3)
2016/06/07 Javascript
分享jQuery封装好的一些常用操作
2016/07/28 Javascript
jQuery实现的简单百分比进度条效果示例
2016/08/01 Javascript
JavaScript 深层克隆对象详解及实例
2016/11/03 Javascript
详解微信小程序设置底部导航栏目方法
2017/06/29 Javascript
JavaScript中Object基础内部方法图
2018/02/05 Javascript
Vue手把手教你撸一个 beforeEnter 钩子函数
2018/04/24 Javascript
node.js使用fs读取文件出错的解决方案
2019/10/23 Javascript
Python使用QQ邮箱发送Email的方法实例
2017/02/09 Python
python中关于for循环的碎碎念
2017/06/30 Python
Python实现简单遗传算法(SGA)
2018/01/29 Python
python如何求解两数的最大公约数
2018/09/27 Python
python GUI库图形界面开发之PyQt5选项卡控件QTabWidget详细使用方法与实例
2020/03/01 Python
python游戏开发的五个案例分享
2020/03/09 Python
英国最大的电子产品和家电零售企业:Currys PC World
2016/09/24 全球购物
Betsey Johnson官网:妖娆可爱的连衣裙及鞋子、手袋和配件
2016/12/30 全球购物
利物浦足球俱乐部官方网上商店:Liverpool FC Official Store
2018/01/13 全球购物
华为c/c++笔试题
2016/01/25 面试题
简历自荐信
2013/12/02 职场文书
幼儿园安全检查制度
2014/01/30 职场文书
《画家乡》教学反思
2014/04/22 职场文书
异地年检委托书范本
2014/09/24 职场文书
拾金不昧表扬稿
2015/01/16 职场文书
大学生团支书竞选稿
2015/11/21 职场文书
Python Django模型详解
2021/10/05 Python