如果你执行以下代码会出现什么情况?
<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"事件的缘故)
分享到:
相关推荐
今天做项目,发现一个奇怪的问题,动态创建的script标签在IE8下无法触发onload事件。 代码如下: 代码如下:var loadJs = function(src, fun){ var script = null; script = document.createElement(“script...
在JavaScript编程中,页面加载完成后的操作常常需要用到一个特定的事件处理器——onload事件。本文将深入探讨onload事件在JavaScript中的使用心得,以及如何正确地利用这一事件来确保相关代码在页面加载完毕后执行。...
在JavaScript中,`window.onload` 是一个非常关键的事件,用于确保在页面所有资源(包括图像、脚本、样式表等)完全加载之后再执行指定的函数或代码块。这通常用于那些依赖于页面元素存在的操作,因为这些操作需要...
`onload`事件是JavaScript中用于监听一个元素加载完成的事件,特别是在处理图片时非常常见。本文主要探讨的是在不同浏览器环境下,如何正确地对`img`标签使用`onload`事件进行绑定。 通常,开发者会尝试以下方式对`...
在上面的示例中,我们使用img的onload事件来加载某些JavaScript文件,而不需要使用script标签。这种方法可以让我们更灵活地加载JavaScript文件,并且可以避免一些潜在的安全问题。 img的onload事件不仅仅局限于图片...
script.onload = function() { console.log('脚本已成功加载并执行'); }; script.onerror = function() { console.error('脚本加载失败'); }; ``` 4. **将`<script>`添加到`<head>`** 最后,我们将创建好的`...
如果这是一个复制粘贴错误,并且在"script"标签内添加了不正确的属性"language",这会导致浏览器无法正确解析代码,从而导致onload事件处理器失效。 为了解决这个问题,首先应检查页面中是否有重复定义的onload事件...
这意味着当用户看到“加载中”的提示消失,页面完全展现时,`onload`事件才会被触发。以下是一个简单的`window.onload`事件监听的例子: ```html <!DOCTYPE html> <script> window.onload = function() { ...
在实际应用中,开发者需要注意的是,如果为script元素同时注册了onload和onreadystatechange事件处理器,那么在IE9/10中,事件处理函数中的callback函数将被调用两次,这可能会导致一些不可预料的副作用。...
在JavaScript编程中,`onload`事件是用于监听某个资源加载完成的事件,例如图片、脚本或框架等。在创建`img`元素时,如果设置了`onload`事件处理函数,通常会在图片加载完成后执行。然而,在某些情况下,即使没有将`...
如果必须在`<head>`中插入JS,可以使用`window.onload`事件来确保代码在页面完全加载后执行: ```html <script> window.onload = function() { // 你的JS代码 } </script> ``` 外部引用JS文件时,`<script>...
ready 事件是在文档结构加载完成后触发的,而 onload 事件是在页面所有元素加载完成后触发的,包括图片、Flash 等媒体文件。这意味着 ready 事件会在 onload 事件之前触发。 在实际开发中,我们通常会使用 ready ...
可以为`<script>`元素添加`onload`和`onerror`事件监听器: ```javascript script.onload = function() { console.log('脚本已成功加载'); // 在这里执行依赖于新脚本的代码 }; script.onerror = function() {...
script.onload = script.onreadystatechange = function() { if (!this.readyState || this.readyState === 'loaded' || this.readyState === 'complete') { // 脚本加载完成后执行的回调函数 help(); // 释放...
script.onload = script.onreadystatechange = function() { if (!this.readyState || this.readyState === 'loaded' || this.readyState === 'complete') { func(); script.onload = script.onreadystatechange...
window.onload事件就是当整个页面已经完全加载包括所有的依赖资源如图片、样式表等之后触发的事件。 首先,需要注意的是,在代码中`<scripttype=”text/javascript”>`中的`type`属性应该是`type="text/javascript...
- 文件读取完成后,触发`onload`事件,此时`result`属性包含了文件的二进制字符串。 2. **ActiveXObject**(仅适用于IE): - 针对IE,我们可以使用ActiveXObject来与Excel交互。创建一个新的ActiveXObject实例,...
JavaScript中的`onload`事件是网页或特定元素加载完成后触发的事件,主要用于执行某些操作,如显示内容、执行脚本等。这个事件在多种HTML标签上都可用,包括`<body>`、`<frame>`、`<frameset>`、`<iframe>`、`<img>`...