在页面中动态载入外部javascript

有时候需要在网页中某个div载入之后,动态引入一段javascript,IE下的解决方案:

newjs.onreadystatechange = function () {
        if (newjs.readyState == 'loaded') {
            // ready!
        }
    }

    newjs.onload = function () {
        // ready!
    }

主要利用了onload以及onreadystatechange事件。把这个加以利用,也能动态载入外部css。下面是同时适合Ie/firefox的写法。

var css;
function include_css(css_file) {
    var html_doc = document.getElementsByTagName('head')[0];
    css = document.createElement('link');
    css.setAttribute('rel', 'stylesheet');
    css.setAttribute('type', 'text/css');
    css.setAttribute('href', css_file);
    html_doc.appendChild(css);

    // alert state change
    css.onreadystatechange = function () {
        if (css.readyState == 'complete') {
            alert('CSS onreadystatechange fired');
        }
    }
    css.onload = function () {
        alert('CSS onload fired');
    }
    return false;
}

var js;
function include_js(file) {
    var html_doc = document.getElementsByTagName('head')[0];
    js = document.createElement('script');
    js.setAttribute('type', 'text/javascript');
    js.setAttribute('src', file);
    html_doc.appendChild(js);

    js.onreadystatechange = function () {
        if (js.readyState == 'complete') {
            alert('JS onreadystate fired');
        }
    }

    js.onload = function () {
        alert('JS onload fired');
    }
    return false;
}

这里是Demo,有动态载入css以及js的例子。

原文地址

http://www.phpied.com/javascript-include-ready-onload/

作者: 发表于June 12, 2007 at 11:03 pm

版权信息: 可以任意转载, 转载时请务必以超链接形式标明文章原始出处作者信息及此声明

Tags: ,

2 条评论 »

  1. ppp 于 2007-07-24 @ 10:24:47 留言

    加载js时的onload事件不会被触发~

  2. volcano 于 2007-07-24 @ 18:35:12 留言

    IE fires onreadystatechange. FF fires onload.

    ie下会触发onreadystatechange事件,firefox下会触发onload事件,可视具体情况选择。

RSS 为此帖反馈评论 · 反向跟踪 网站

留条评论