在頁面中動態載入外部javascript和CSS

來源:互聯網
上載者:User

有時候需要在網頁中某個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;

FROM : http://www.chinaz.com/Design/Rules/09301G5R007.html

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.