在项目中经常要动态添加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 加载慢怎么解决的更多相关文章

  1. iframe中使用模态框提交表单后,iframe加载父页面的解决方法

    在iframe中使用模态框提交表单后,会出现iframe加载整个父页面的问题,如下图: 解决方法: 在form表单中添加target属性 _parent 这个属性会使目标文档载入父窗口或者包含来超链接 ...

  2. 记录Js动态加载页面.append、html、appendChild、repend添加元素节点不生效以及解决办法

    今天再优化blog页面的时候添加了个关注按钮和图片,但是页面上这个按钮和图片时有时无,本来是搞后端的,被这个前端的小问题搞得抓耳挠腮的! 网上各种查询解决方案,把我解决问题的艰辛历程分享出来,希望大家 ...

  3. 转:web前端面试题合集 (Javascript相关)（js异步加载详解）

    1. HTTP协议的状态消息都有哪些? 1**:请求收到,继续处理2**:操作成功收到,分析.接受3**:完成此请求必须进一步处理4**:请求包含一个错误语法或不能完成5**:服务器执行一个完全有效请 ...

  4. 也说JS脚本加载控制

    问题背景 前端采用的 iframe + html 做后台管理系统.现在js.jquery插件非常多,每次页面都是引用就类似这样: <script src="../Scripts/jqu ...

  5. js 动态加载事件的几种方法总结

    本篇文章主要是对js 动态加载事件的几种方法进行了详细的总结介绍,需要的朋友可以过来参考下,希望对大家有所帮助   有些时候需要动态加载javascript事件的一些方法往往我们需要在 JS 中动态添 ...

  6. 判断iframe加载完成

    一.js判断 var parFrame = document.getElementById("oIframe"); if(parFrame.attachEvent){ parFra ...

  7. 前端设计中关于外部js文件加载的速度优化

    在一般情况下,许多人都是将<script>写在了<head>标签中,而许多浏览器都是使用单一的线程来加载js文件的,从上往下,从左往右. 若是加载过程出错,那么网页就会阻塞,就 ...

  8. nodejs js模块加载

    本文地址:http://www.cnblogs.com/jasonxuli/p/4381747.html nodejs的非核心模块(core module)加载主要使用的就是module.js. 项目 ...

  9. ie6,7下js动态加载图片不显示错误

    ie6,7下js动态加载图片不显示错误 先描述一下出现这种匪夷所思bug的背景: 我在页面加载的时候加载一堆小缩略图,<a href="javascript:void(0);" ...

随机推荐

  1. Leetcode56. Merge Intervals合并区间

    给出一个区间的集合,请合并所有重叠的区间. 示例 1: 输入: [[1,3],[2,6],[8,10],[15,18]] 输出: [[1,6],[8,10],[15,18]] 解释: 区间 [1,3] ...

  2. python枚举详解

    1. 枚举的定义 首先,定义枚举要导入enum模块. 枚举定义用class关键字,继承Enum类. 用于定义枚举的class和定义类的class是有区别[下一篇博文继续分享]. 示例代码: from ...

  3. web前端学习（二）html学习笔记部分（7）--web存储2

    1.2.20  web存储 1.2.20.1  Web存储-客户端存储数据新方法 1.两种方式 1)localStorage - 没有时间限制的数据存储 2)针对一个sessionStorage - ...

  4. 前端与编译原理——用JS写一个JS解释器

    说起编译原理,印象往往只停留在本科时那些枯燥的课程和晦涩的概念.作为前端开发者,编译原理似乎离我们很远,对它的理解很可能仅仅局限于"抽象语法树(AST)".但这仅仅是个开头而已.编 ...

  5. 如何设置单个 Git 仓库的代理从而提高更新速度

    如何设置单个 Git 仓库的代理从而提高更新速度 因为特殊原因,需要单独对 Git 仓库设置远程代理,从而提高更新速度. 主要原因是因为有一些远程 Git 仓库比较慢. 最初的想法是系统全局代理,但是 ...

  6. Hibernate 数据库方言配置；no dialect mapping for jdbc type:-9；生僻字

    最近因为生僻字在界面上显示为?: 主要原因是该字段在数据库中就是varchar类型,显示的就是?:如䶮(yan):现把varchar类型改为nvarchar类型:数据中能够正常显示: 但是Spring ...

  7. 探索云数据库最佳实践 阿里云开发者大会数据库专场邀你一起Code up！

    盛夏.魔都.科技 三者在一起有什么惊喜? 7月24日,阿里云峰会·上海——开发者大会将在上海世博中心盛大启程,与未来世界的开发者们分享数据库.云原生.开源大数据等领域的技术干货,共同探讨前沿科技趋势, ...

  8. Timer和DispatcherTimer简单使用

    1. 设定计时器相关属性,使用委托方法处理事件触发 DispatcherTimer dispatcherTimer= new DispatcherTimer(); dispatcherTimer.Ti ...

  9. 常用的Markdown编辑器, markdown导出HTML/PDF/JSON/word

              markdown导出word.             常用的Markdown 编辑器 OSX Atom,setting-->package install,搜package ...

  10. Servlet工作流程

    1.加载Servlet类 类加载器负责加载servlet类. 当Web容器接收到servlet的第一个请求时,将加载servlet类. 2.创建Servlet实例 Web容器在加载servlet类之后 ...