onreadystatechange和onload,js onreadystatechange
Onload，Onunload和onbeforeunload方法的异同
声明:网上收集
Onload,Onunload和onbeforeunload方法的异同
一 二种方法比较
1
onload的意思是当页面加载完毕的时候执行.
2 相同点:Onunload,onbeforeunload都是在刷新或关闭时调用
3
不同点:Onbeforeunload是正要去服务器读取新的页面时调用,此时还没开始读取,而onunload则已经从服务器上读到了需要加载的新的页面，在即将替换掉当前页面时调用。Onunload是无法阻止页面的更新和关闭的.Onbeforeunload可以做到,onbeforeunload在onunload之前执行，它还可以阻止onunload的执行.
二 事件描述
1 onbeforeunload事件：
说明：目前三大主流浏览器中firefox和IE都支持onbeforeunload事件,opera尚未支持.
描述：事件触发的时候弹出一个有确定和取消的对话框，确定则离开页面，取消则继续待在本页。handler可以设一个返回值作为该对话框的显示文本。
触发于：
?关闭浏览器窗口
?通过地址栏或收藏夹前往其他页面的时候
?点击返回，前进，刷新，主页其中一个的时候
?点击 一个前往其他页面的url连接的时候
?调用以下任意一个事件的时候：
click,document write,document open,document close，window close,window
navigate,window NavigateAndFind,location,replace,location reload,form submit.
?当用window open打开一个页面,并把本页的window的名字传给要打开的页面的时候。
?重新赋予location.href的值的时候。
?通过input
type=”submit”按钮提交一个具有指定action的表单的时候。
可以用在以下元素：
?BODY, FRAMESET,
window
平台支持：
IE4+/Win, Mozilla 1.7a+, Netscape 7.2+, Firefox0.9+
2 onunload事件
描述：当用户关闭一个页面时触发 onunload 事件。
触发于：
?关闭浏览器窗口
?通过地址栏或收藏夹前往其他页面的时候
?点击返回，前进，刷新，主页其中一个的时候
?点击
一个前往其他页面的url连接的时候
?调用以下任意一个事件的时候：
Click,document write,document
open,document close,window close,window navigate,window
NavigateAndFind,location,replace,location reload,form submit.
?当用window
open打开一个页面,并把本页的window的名字传给要打开的页面的时候。
?重新赋予location.href的值的时候。
?通过input type=”submit”按钮提交一个具有指定action的表单的时候。
示例说明:
google加载相册的原理:
一个页面加载最慢的往往是页面中的大图，在用google的Picasa
网络相册时,google会一共生成7种大小的缩略图存放在他的服务器上，然后在大图的浏览页，他会先加载一个缩略图
，然后等大图完全加载后再替换掉原来的缩略图，实现那种模糊到清晰的效果。
代码如下:
body
img
id="pic" src="small.jpg" /
/body
script
type="text/javascript"
var p = new Image();
var loaded = false;
p.onload = p.onreadystatechange = function()
{
if (!loaded
(!this.readyState || this.readyState == "loaded" || this.readyState
== "complete") )
{
document.getElemengtById('pic').src = 'big.jpg';
}
}
p.src="big.jpg";
window.onunload = function()
{
//alert('关闭页面');
}
window.onbeforeunload = function(e)
{
var n = window.event.screenX - window.screenLeft;
var b = n document.documentElement.scrollWidth-20;
if(b
window.event.clientY 0 || window.event.altKey)
{
//这里可以放置你想做的操作代码
// alert("关闭窗口");
}else{
// alert("刷新窗口");
}
或者这样：
event.returnValue="确定离开当前页面吗？";
}
/script
这段代码就是判断触发onbeforeunload事件时，鼠标是否点击了关闭按钮，或者按了ALT+F4来关闭网页，如果是，则认为系统是关闭网页，否则在认为系统是刷新网页.
3 onload事件
onload的意思是当页面加载完毕的时候执行.
当某一事件被触发时需要执行某个函数，在IE下可用attachEvent，在FF下则要用addEventListener.
示例代码:
attachEvent()有两个参数，第一个是事件名称，第二个是需执行的函数；
addEventListener()有三个参数，第一个是事件名称，但与IE事件不同的是，事件不带"on",比如"onsubmit"在这里应为"submit"，第二个是需执行的函数，第三个参数为布尔值；
示例代码:
if (document.all){
window.attachEvent('onload',函数名)//IE中
}else{
window.addEventListener('load',函数名,false);//firefox
}
js onreadystatechange 和 onload区别
IE的 script 元素支持onreadystatechange事件，不支持onload事件。
FF的script 元素不支持onreadystatechange事件，只支持onload事件。
如果要在一个script src="xx.js" 加载完成执行一个操作，FF使用onload事件就行了，IE下则要结合onreadystatechange事件和this.readyState，以下是IE的一个例子：
script type="text/javascript" src="xx.js" onreadstatechange="if(this.readyState=='load') alert('loaded');"/script
this.readyState的值为'loaded'或者'complete'都可以表示这个script已经加载完成．
如何结合IE和FF的区别?参考一下jquery的源码：
var script = document.createElement('script');
script.src="xx.js";
script.onload = script.onreadystatechange = function(){
if( ! this.readyState //这是FF的判断语句，因为ff下没有readyState这人值，IE的readyState肯定有值
|| this.readyState=='loaded' || this.readyState=='complete' // 这是IE的判断语句
){
alert('loaded');
}
};
怎么把请求分别放在 onLoad和onReady中
XMLHttpRequest对象的onload回调函数是在异步请求加载完成后所执行的函数，当JavaScript 监测到请求的数据全部传输完成后就会触发该函数。而open()函数设置异步请求的method、URL和同步方式等参数，执行open()后再执行send()函数才开始向服务器发送请求。另外，onload回调函数实际上是XHR2中新加入的功能，部分浏览器可能不支持这个函数名。要避免不兼容的现象，可以使用传统 XMLHttpRequest，如：//省略其他代码request.onreadystatechange=function() // 状态改变回调函数{ // 判断 request.readyState==4 的效果等同于 onload if(request.readyState==4 request.status==200) { // 加载且响应正常完成后执行的代码. }}request.open("GET",url,true); // 打开对象，也可以说是设置参数request.send(); // 发送请求 还有一些误解需要澄清一下，window.onload回调函数其实是在页面加载完成后（包括图片内容的显示）才会执行，并不是页面加载的等待过程中就执行。request.open()并没有发送请求，只是设置一些参数，在send()时才会发送（注意不要漏写这条语句），发送后就会进入readyState监听状态，当 readyState的值有改变就会执行onreadystatechange回调函数，当异请求的步数据接收完成（即readyState变为4）后就会执行onload回调函数（注意仅在XHR2中有效）。
仅IE9/10同时支持script元素的onload和onreadystatechange事件分析
如下
复制代码
代码如下:
!DOCTYPE
HTML
head
meta
charset="utf-8"
titleIE9/10同时支持script元素的onload和onreadystatechange事件/title
script
src=""
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后已经开始支持script的onload事件了。一直以来我们判断js文件是否已经加载完成就是用以上的两个事件。很久以前就知道IE中使用onreadystatechange事件，事件handler中使用readyState的值判断是否加载完成。其它浏览器使用onload事件。
复制代码
代码如下:
if(isIE){
script.onreadystatechange
=
function(){
if(this.readyState
==
'loaded'
||
this.readyState
==
'complete'){
callback();
}
}
}else{
script.onload
=
function(){
callback();
}
}
这种写法现在也没有问题。但如下写法可能会让的回调在IE9/10中执行两次
复制代码
代码如下:
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次。
相关：
onreadystatechange与onload有啥区别吗
IE的script元素支持onreadystatechange事件，不支持onload事件。FF的script元素不支持onreadystatechange事件，只支持onload事件。如果要在一个this.readyState的值为'loaded'或者'complete'都可以表示这个script已经加载完成．如何结合IE和FF的区别?参考一下jquery的源码：varscript=document.createElement('script');script.src="xx.js";script.onload=script.onreadystatechange=function(){if(!this.readyState//这是FF的判断语句，因为ff下没有readyState这人值，IE的readyState肯定有值||this.readyState=='loaded'||this.readyState=='complete'//这是IE的判断语句){alert('loaded');}};
动态加载javascript文件的问题！
我测试了一下你的代码,onload事件好像对script标签并不起什麼作用,这个是怎麼回事我也不清楚.
js.onreadystatechange , 这个属性代表的是赋予script标签src属性之后之后,js文件的加载状态. 测试了一下,这个属性好像就只有"complete"一个值.
需要注意的是, 在onreadystatechange没有"complete"前,你的js文件并未加载完成,这个时候你如果进行其他操作,用到了正在加载的这个js裏面的方法,就会报错,提示你方法未定义.这个加载过程,是通过异步方式来完成的(你的错误可能就是因为对这个不了解),所以,你如果想在加载完这个js后再去加载其他js或者做其他的关联动作,你应该把对应的代码放到:
js.onreadystatechange = function () {
if (js.readyState == 'complete') {
//关联动作的代码都应该放到这个位置
}
}
你原来代码出错的原因大概就是在这裏吧!
不过这样如果要顺次加载多个js的话,需要一层一层去嵌套,感觉相当麻烦.建议你用XMLHTTP的方式来处理.提供给你一个方法,是兼容IE/firefox的,已经测试过了,不过代码不够简化,你自己适当的处理一下吧 ..
??function?IncludeJS(sId,?url){
????//判断该ID对应的控件是否已经存在，如果已经存在则返回
????var?LOBJ_Script?=?document.getElementById(sId);
????if(LOBJ_Script){
??????if(?LOBJ_Script.text?!=?""?||?LOBJ_Script.src?!=?""?){
????????return?false;
??????}
????}
????//创建XmlHTTP对象
????var?LOBJ_XmlHttp?=?{};
????if?(?window.ActiveXObject?){?//?IE
??????LOBJ_XmlHttp?=?new?ActiveXObject("Microsoft.XMLHTTP")?;
????}else?if?(?window.XMLHttpRequest?){?//?Gecko
??????LOBJ_XmlHttp?=??new?XMLHttpRequest()?;
????}
????//定义XmlHTTP对象readyState属性改变时的事件处理函数
????LOBJ_XmlHttp.OnReadyStateChange?=?function()?{
??????if?(?LOBJ_XmlHttp.readyState?==?4?){
????????var?LSTR_Source?=?LOBJ_XmlHttp.responseText;
????????if?((LSTR_Source?!=?null)){
??????????var?LOBJ_Script?=?document.getElementById(sId);
??????????if(!LOBJ_Script){
????????????LOBJ_Script?=?document.createElement("script"?);
??????????}
??????????LOBJ_Script.language?=?"javascript";
??????????LOBJ_Script.type?=?"text/javascript";
??????????LOBJ_Script.id?=?sId;
??????????LOBJ_Script.defer?=?true;
??????????LOBJ_Script.text?=?LSTR_Source;
??????????//将Script控件添加到画面中
??????????if(!document.getElementById(sId)){
????????????var?LOBJ_Head?=?document.getElementsByTagName('HEAD').item(0);
????????????LOBJ_Head.appendChild(LOBJ_Script);
??????????}
????????}
??????}
????};
????LOBJ_XmlHttp.open('GET',?url,?false);
????LOBJ_XmlHttp.send(null);
????if?(?window.XMLHttpRequest){
??????if(LOBJ_XmlHttp.readyState?==?4){
????????if(LOBJ_XmlHttp.status?==?200){
??????????var?LSTR_Source?=?LOBJ_XmlHttp.responseText;
??????????if?((LSTR_Source?!=?null)){
????????????var?LOBJ_Script?=?document.getElementById(sId);
????????????if(!LOBJ_Script){
??????????????LOBJ_Script?=?document.createElement("script"?);
????????????}
????????????LOBJ_Script.language?=?"javascript";
????????????LOBJ_Script.type?=?"text/javascript";
????????????LOBJ_Script.id?=?sId;
????????????LOBJ_Script.defer?=?true;
????????????LOBJ_Script.text?=?LSTR_Source;
????????????//将Script控件添加到画面中
????????????if(!document.getElementById(sId)){
??????????????var?LOBJ_Head?=?document.getElementsByTagName('HEAD').item(0);
??????????????LOBJ_Head.appendChild(LOBJ_Script);
????????????}
??????????}
????????}
??????}
????}
??}