javascript对象小探之十——onload和onreadystatechange句柄

最新推荐文章于 2023-01-07 00:56:21 发布
最新推荐文章于 2023-01-07 00:56:21 发布
阅读量1.3k 收藏
点赞数
分类专栏： JavaScript

仅IE9/10同时支持script元素的onload和onreadystatechange事件


如下

?
1
2
3
4
5
6
7
8
9
10
<!DOCTYPE HTML>
< html >
     < head >
         < meta  charset = "utf-8" >
         < title >IE9/10同时支持script元素的onload和onreadystatechange事件</ title >
         < script  src = "http://code.jquery.com/jquery.min.js"  onload = "alert(1)"  onreadystatechange = "alert(2)" ></ script >
     </ head >
     < body >
     </ body >
</ html >

结果：

IE6/7/8 : 弹出2

IE9/10 : 弹出2，1

Firefox/Safari/Chrome/Opera : 弹出1


测试结果可以看出：IE9早期支持onreadystatechange和readyState，opera也支持readyState。IE9+开始支持script的onload事件了。其他均支持onload。

一直以来我们判断js文件是否已经加载完成就是用以上的两个事件。很久以前就知道IE中使用onreadystatechange事件，事件handler中使用readyState的值判断是否加载完成。其它浏览器使用onload事件。

?
1
2
3
4
5
6
7
8
9
10
11
if(isIE){
     script.onreadystatechange = function(){
         if(this.readyState == 'loaded' || this.readyState == 'complete'){
             callback();
         }
     }
}else{
     script.onload = function(){
         callback();
     }
}

这种写法现在也没有问题。但如下写法可能会让的回调在IE9/10中执行两次

?
1
2
3
4
5
script.onload = script.onreadystatechange = function (){
     if (! this .readyState || this .readyState == "loaded"  || this .readyState == "complete" ){
         callback();
     }
}

这种写法的取巧之处在于onload和onreadystatechage都用同一个函数，Firefox/Safari/Chrome/Opera中不支持onreadystatechage事件，也没有readyState属性，所以 !this.readyState 是针对这些浏览器。readyState是针对IE浏览器，载入完毕的情况是loaded，缓存的情况下可能会出现readyState为complete。所以两个不能少。但由于IE9/10也已经支持onload事件了，会造成callback执行2次。


转载于http://www.cnblogs.com/snandy/archive/2011/04/26/2029537.html#viewSource


Hobootu
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Ajax初步了解和简单应用
白小羽
05-15 218
1.简介         基于 Web 的应用到基于数据的应用。它的广泛应用促进了前端技术的进步         ajax不是一种新的技术，而是几种原有技术的结合体，由以下技术组合而成： 1、使用CSS和XHTML来表示。 页面渲染 2、使用DOM模型来交互和动态显示。 3、使用XMLHttpRequest来和服务器进行异步通信。 4、使用javascript来绑定和
AJAX – onreadystatechange 事件
12-14
AJAX – onreadystatechange 事件 onreadystatechange 事件 当请求被发送到服务器时，我们需要执行一些基于响应的任务。 每当 readyState 改变时，就会触发 onreadystatechange 事件。 readyState 属性存有 XMLHttpRequest 的状态信息。 下面是 XMLHttpRequest 对象的三个重要的属性： 属性 描述 onreadystatechange 存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。 readyState 存有 XMLHttpRequest 的状态
加载顺序 ready onload onreadystatechange
weixin_34248705的博客
11-18 128
js文件是异步加载， js是在什么时候被加载执行的 动态引入的外部 JS 文件在各浏览器中的加载顺序不一致 1/ready，表示文档结构已经加载完成（不包含图片等非文字媒体文件）；比如一张图片只要<img>标签完成，不用等这个图片加载完成，就可以设置图片的宽高的属性或样式等； 2/onload，指示页面包含图片等文件在内的所有元...
对onreadystatechange属性的理解
杨光的技术收集站
08-25 809
在编写Ajax方法的时候，我们经常会写上类似于这样的代码： script type="text/javascript"> var xmlHttp; //创建一个XmlHttpRequeset对象 function createXMLHttpRequest(){     if(window.ActiveXObject){          xmlHttp = new ActiveXO
Ajax 两种请求方式的区别onload和onreadystatechange
狂奔的黑驴
06-05 8236
一. onreadystatechange 1. XMLHttpRequest对象有一个属性readyState，将其(xhr.readyState)打印后发现。进入onreadystatechange请求方式中时，可以打印其状态为2，状态为3，状态为4。 <button id="btn">请求纯文本</button> <script> let btn = document.getElementById('btn'); .
仅IE9/10同时支持script元素的onload和onreadystatechange事件分析
10-28
测试结果可以看出，IE9后已经开始支持script的onload事件了。一直以来我们判断js文件是否已经加载完成就是用以上的两个事件。
各浏览器对link标签onload/onreadystatechange事件支持的差异分析
09-05
在网页开发中，link标签常用于引入CSS样式表，而onload和onreadystatechange事件则用于检测样式表是否已经加载完成。然而，不同的浏览器对这两个事件的支持情况存在差异，这可能会导致在不同浏览器上的表现不一致。...
微信小程序之onLaunch与onload异步问题详解
10-17
在微信小程序开发中，`onLaunch` 和 `onLoad` 是两个重要的生命周期方法，它们各自有不同的用途和执行时机。本文将深入探讨它们之间的异步问题以及如何通过Promise来解决这个问题。 `onLaunch` 是小程序初始化完成...
javascript对象的相关操作小结
10-22
JavaScript中的对象是编程的核心概念，它们允许我们组织和存储数据，并通过方法进行操作。下面是对JavaScript对象相关操作的总结。 1. **BOM (Browser Object Model)** 浏览器对象模型是JavaScript与浏览器交互的...
JavaScript Math对象和调试程序的方法分析
11-30
在调试过程中，使用console.log()比alert()更方便，因为它允许在控制台中查看整个数据结构，如数组和对象。在给出的示例中，使用console.log(arr)可以看到数组arr的所有元素，这对于查看复杂数据结构非常有用。 ...
onreadystatechange事件的用法
会当凌绝顶 一览众山小
12-09 1577
<br />document.onreadystatechange = subSomething;//当页面加载状态改变的时候执行这个方法. <br />function subSomething() <br />{ <br /> if(document.readyState == "complete"){ //当页面加载状态为完全结束时进入 <br /> //你要做的操作。 <br /> } <br />}<br /> <br /> <br /> <br /> <br /> <br /><script t
js中 onreadystatechange 和 onload的区别
weixin_30498921的博客
05-13 300
IE的script 元素只支持onreadystatechange事件，不支持onload事件。 FF的script 元素不支持onreadystatechange事件，只支持onload事件。 如果要在一个<script src="xx.js"> 加载完成执行一个操作，FF使用onload事件就行了，IE下则要结合onreadystatechange事件和this.rea...
script 元素onreadystatechange事件onload事件
C#
08-03 4134
<br />有时候我们需要在引用JS完成之后立即执行某些函数或者代码,我们可以通过onreadystatechange或者onload事件来完成<br /><br />FireFox的script 元素不支持onreadystatechange事件，只支持onload事件<br />IE的 script 元素支持onreadystatechange事件，不支持onload事件。<br />如果要在一个<script src="xx.js"> 加载完成执行一个操作，ff使用onload事件就行了，IE下则要结
DOMContentLoaded VS onload VS onreadystatechange
牧童
04-30 296
1. DOMContentLoaded 在页面html、script、style加载完毕即可触发，无需等待所有资源（image/iframe）加载完毕。（IE9+） 2. onload是最早支持的事件，要求所有资源加载完毕触发。 3. onreadystatechange 开始在IE引入，后来其它浏览器也有一定的实现。涉及以下 document , applet, embed, fra...
onreadystatechange
m0_73982027的博客
09-29 5039
6
对ajax源码的onreadystatechange的理解
qq_53679247的博客
10-25 1301
可见 我们的onreadystatechange会一直循环（或者也可能是被阻塞）执行直到readystate为4，或出现其他异常，同时我们也得知无论onreadystatechange有没有执行，readystate的值还是会改变的！xmlhttp对象在内部帮我们执行了询问服务器，记录readystate的过程了。答：其实当前的this就指向当前的标签，所以this.value就是拿到了当前标签的value了（就是用户输入的值）好了那我们知道了当按键松开之后就会执行showHint(str)函数的。
XMLHttpRequest 对象(AJAX通信)
最新发布
好好睡觉
01-07 2968
XMLhttprequest对象、AJAX通信基础知识
JavaScript教程：从基础到精通——窗口对象解析
在编程模型上，Java是面向对象的，需要为每个功能设计类和对象，而JavaScript虽然也是基于对象的，但它更倾向于脚本语言，可以直接使用和操作内置对象，无需定义类。此外，JavaScript代码是解释执行的，无需预编译，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值