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 表格工具集
Apr 25 Javascript
JQuery自适应IFrame高度(支持嵌套 兼容IE,ff,safafi,chrome)
Mar 28 Javascript
javascript 单例/单体模式(Singleton)
Apr 07 Javascript
Ext JS添加子组件的误区探讨
Jun 28 Javascript
js中的hasOwnProperty和isPrototypeOf方法使用实例
Jun 06 Javascript
js获取元素相对窗口位置的实现代码
Sep 28 Javascript
js实现使用鼠标拖拽切换图片的方法
May 04 Javascript
AngularJS实现全选反选功能
Dec 08 Javascript
bootstrapValidator bootstrap-select验证不可用的解决办法
Jan 11 Javascript
Angular指令之restict匹配模式的详解
Jul 27 Javascript
vue实现tab切换外加样式切换方法
Mar 16 Javascript
js实现简单商品筛选功能
Feb 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
php实现监控varnish缓存服务器的状态
2014/12/30 PHP
PHP文件生成的图片无法使用CDN缓存的解决方法
2015/06/20 PHP
thinkphp5实现微信扫码支付
2019/12/23 PHP
thinkphp5 框架结合plupload实现图片批量上传功能示例
2020/04/04 PHP
jQuery 获取和设置select下拉框的值实现代码
2013/11/08 Javascript
用js+iframe形成页面的一种遮罩效果的具体实现
2013/12/31 Javascript
谈谈impress.js初步理解
2015/09/09 Javascript
js实现内容显示并使用json传输数据
2016/03/16 Javascript
jQuery实用小技巧_输入框文字获取和失去焦点的简单实例
2016/08/25 Javascript
利用vue + koa2 + mockjs模拟数据的方法教程
2017/11/22 Javascript
vue项目总结之文件夹结构配置详解
2017/12/13 Javascript
浅谈angular4.0中路由传递参数、获取参数最nice的写法
2018/03/12 Javascript
实例讲解Vue.js中router传参
2018/04/22 Javascript
ng-events类似ionic中Events的angular全局事件
2018/09/05 Javascript
vue中eslintrc.js配置最详细介绍
2018/12/21 Javascript
vue多个元素的样式选择器问题
2019/11/29 Javascript
学前端,css与javascript重难点浅析
2020/06/11 Javascript
Javascript如何实现扩充基本类型
2020/08/26 Javascript
python网页请求urllib2模块简单封装代码
2014/02/07 Python
进一步了解Python中的XML 工具
2015/04/13 Python
Python3中使用urllib的方法详解(header,代理,超时,认证,异常处理)
2016/09/21 Python
python脚本生成caffe train_list.txt的方法
2018/04/27 Python
python实现身份证实名认证的方法实例
2019/11/08 Python
Python3自带工具2to3.py 转换 Python2.x 代码到Python3的操作
2021/03/03 Python
让IE支持CSS3的不完全兼容方案
2014/09/19 HTML / CSS
伦敦最有品味的百货:Liberty London
2016/11/12 全球购物
"引用"与多态的关系
2013/02/01 面试题
教师自我鉴定
2013/12/13 职场文书
高三生物教学反思
2014/01/25 职场文书
2016大学生求职自荐信范文
2016/01/28 职场文书
小学语文的各类谚语(70首)
2019/08/15 职场文书
美甲店的创业计划书模板
2019/08/23 职场文书
导游词之井冈山
2019/11/20 职场文书
python爬虫--selenium模块
2021/03/31 Python
python爬取企查查企业信息之selenium自动模拟登录企查查
2021/04/08 Python
纯html+css实现奥运五环的示例代码
2021/08/02 HTML / CSS