`

script.onload 事件

阅读更多

如果你执行以下代码会出现什么情况?

<html><head><script type="text/javascript">document.write("<script type=\"text/javascript\" src=\"http://dhtmlkitchen.com/editor/js/drag.js\"><\/script><script type=\"text/javascript\">alert(\"Listener.cleanUp (nested):\" + Listener.cleanUp)<\/script>");</script></head><body/></html>

 在IE浏览器里面,它会告诉你Listener为定义,为什么?因为,在IE里面它会先执行alert(...同时加载drag.js。当它执行

 Listener.cleanUp

的时候drag.js还没有load完,这个时候Listener当然未定义。

 

怎么解决这个问题呢?要是script有个onload事件就好了,事实上在FF里面script的确有个onload事件(实际上FF比较聪明一点,如果Listener为定义,它会等等看看drag.js里面有没有定义,所以在FF里面不会说Listener为定义),但是在IE里面没有直接定义这个事件,所以要变通一下:

<script>
function loadScript(src, callback) {
var script = document.createElement("script");

if(script.addEventListener)
script.addEventListener("load", callback, false);
else if(script.attachEvent)
script.attachEvent("onreadystatechange",
function() { loadScript.callbackIE(callback); });

script.src = src;
document.getElementsByTagName("head")[0].appendChild(script);
}
loadScript.callbackIE = function(callback) {
var target = window.event.srcElement;
if(target.readyState == "loaded")
callback.call(target);
};

// load 30k script.
// Listener.cleanUp is defined at the bottom of drag.js
callback = function() {
var self = this;
alert("Loaded: " + this.src + "\nListener.cleanUp (nested):" + Listener.cleanUp);
};
loadScript("http://dhtmlkitchen.com/editor/js/drag.js", callback);
</script>

 在IE里面应该用:onreadystatechange事件,现在在运行一下新的代码,看看是不是可以了?

 

以上代码在FF,IE6,IE7下测试通过。

 

代码引用自:http://codingforums.com/archive/index.php?t-85692.html

 

注意这个帖子里面最后有位仁兄"KC-Luck"写了一个简化的版本,实际上在IE里面是无效的(可能是因为他用了"complete"事件的缘故)

分享到:
评论
3 楼 冯冀川 2008-08-04  
mootools中的domready好像不能针对某一个DOM元素是否载入完成做判断?

我没有试过,不过看他的代码好像是这样的

楼主的这种onload方法感觉还是靠谱一点儿,可以适合于任何DOM元素的载入判断
2 楼 sjz209 2008-08-02  
感觉可以用一下mootools中的domready,这样就不会出现页面还没有加载完的情况了
1 楼 joyo2008 2008-07-09  
跟HTML的onload一样吗???

相关推荐

    IE8中动态创建script标签onload无效的解决方法

    今天做项目,发现一个奇怪的问题,动态创建的script标签在IE8下无法触发onload事件。 代码如下: 代码如下:var loadJs = function(src, fun){  var script = null;  script = document.createElement(“script...

    js之onload事件的一点使用心得

    在JavaScript编程中,页面加载完成后的操作常常需要用到一个特定的事件处理器——onload事件。本文将深入探讨onload事件在JavaScript中的使用心得,以及如何正确地利用这一事件来确保相关代码在页面加载完毕后执行。...

    Jqyery中同等与js中windows.onload的应用

    在JavaScript中,`window.onload` 是一个非常关键的事件,用于确保在页面所有资源(包括图像、脚本、样式表等)完全加载之后再执行指定的函数或代码块。这通常用于那些依赖于页面元素存在的操作,因为这些操作需要...

    img onload事件绑定各浏览器均可执行

    `onload`事件是JavaScript中用于监听一个元素加载完成的事件,特别是在处理图片时非常常见。本文主要探讨的是在不同浏览器环境下,如何正确地对`img`标签使用`onload`事件进行绑定。 通常,开发者会尝试以下方式对`...

    img的onload的另类用法

    在上面的示例中,我们使用img的onload事件来加载某些JavaScript文件,而不需要使用script标签。这种方法可以让我们更灵活地加载JavaScript文件,并且可以避免一些潜在的安全问题。 img的onload事件不仅仅局限于图片...

    动态给head添加script

    script.onload = function() { console.log('脚本已成功加载并执行'); }; script.onerror = function() { console.error('脚本加载失败'); }; ``` 4. **将`&lt;script&gt;`添加到`&lt;head&gt;`** 最后,我们将创建好的`...

    js onload事件不起作用示例分析

    如果这是一个复制粘贴错误,并且在"script"标签内添加了不正确的属性"language",这会导致浏览器无法正确解析代码,从而导致onload事件处理器失效。 为了解决这个问题,首先应检查页面中是否有重复定义的onload事件...

    js 某个页面监听事件渲染完毕的时间.pdf

    这意味着当用户看到“加载中”的提示消失,页面完全展现时,`onload`事件才会被触发。以下是一个简单的`window.onload`事件监听的例子: ```html &lt;!DOCTYPE html&gt; &lt;script&gt; window.onload = function() { ...

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

    在实际应用中,开发者需要注意的是,如果为script元素同时注册了onload和onreadystatechange事件处理器,那么在IE9/10中,事件处理函数中的callback函数将被调用两次,这可能会导致一些不可预料的副作用。...

    仅img元素创建后不添加到文档中会执行onload事件的解决方法

    在JavaScript编程中,`onload`事件是用于监听某个资源加载完成的事件,例如图片、脚本或框架等。在创建`img`元素时,如果设置了`onload`事件处理函数,通常会在图片加载完成后执行。然而,在某些情况下,即使没有将`...

    Java script基础.docx

    如果必须在`&lt;head&gt;`中插入JS,可以使用`window.onload`事件来确保代码在页面完全加载后执行: ```html &lt;script&gt; window.onload = function() { // 你的JS代码 } &lt;/script&gt; ``` 外部引用JS文件时,`&lt;script&gt;...

    JQuery-- onload,ready方法详细解说

    ready 事件是在文档结构加载完成后触发的,而 onload 事件是在页面所有元素加载完成后触发的,包括图片、Flash 等媒体文件。这意味着 ready 事件会在 onload 事件之前触发。 在实际开发中,我们通常会使用 ready ...

    how-to-load-dynamic-script, 加载动态脚本的正确方法.zip

    可以为`&lt;script&gt;`元素添加`onload`和`onerror`事件监听器: ```javascript script.onload = function() { console.log('脚本已成功加载'); // 在这里执行依赖于新脚本的代码 }; script.onerror = function() {...

    动态加载JavaScript文件的两种方法_.docx

    script.onload = script.onreadystatechange = function() { if (!this.readyState || this.readyState === 'loaded' || this.readyState === 'complete') { // 脚本加载完成后执行的回调函数 help(); // 释放...

    前端解决跨域问题的8种方案.docx

    script.onload = script.onreadystatechange = function() { if (!this.readyState || this.readyState === 'loaded' || this.readyState === 'complete') { func(); script.onload = script.onreadystatechange...

    js onload处理html页面加载之后的事件

    window.onload事件就是当整个页面已经完全加载包括所有的依赖资源如图片、样式表等之后触发的事件。 首先,需要注意的是,在代码中`&lt;scripttype=”text/javascript”&gt;`中的`type`属性应该是`type="text/javascript...

    JS 读取Excel文件(xls) 兼容Chrome/IE/Firefox

    - 文件读取完成后,触发`onload`事件,此时`result`属性包含了文件的二进制字符串。 2. **ActiveXObject**(仅适用于IE): - 针对IE,我们可以使用ActiveXObject来与Excel交互。创建一个新的ActiveXObject实例,...

    js的onload事件及初始化按钮事件示例代码

    JavaScript中的`onload`事件是网页或特定元素加载完成后触发的事件,主要用于执行某些操作,如显示内容、执行脚本等。这个事件在多种HTML标签上都可用,包括`&lt;body&gt;`、`&lt;frame&gt;`、`&lt;frameset&gt;`、`&lt;iframe&gt;`、`&lt;img&gt;`...

Global site tag (gtag.js) - Google Analytics