JavaScript 및 CSS_javascript 기술의 다중 브라우저 호환 동적 로딩

MVP인 Omar AL Zabir은 항상 이상하고 실용적인 작은 것들을 생각해내는 것을 좋아하며, 이는 매우 참고할만한 가치가 있습니다. 최근에 그는 JavaScript, CSS 및 HTML을 동적으로 로드하기 위한 verify라는 작은 도구를 만들었으며 이는 IE, Firefox, Opera 및 Safari에서 지원됩니다. 이제 어떻게 JavaScript와 CSS를 동적으로 로드할 수 있는지 살펴보겠습니다.

sure의 내부 구현을 소개하기 전에 먼저 해당 기능을 살펴보겠습니다.

ensure({
html: "popup.html",
javascript: " popup .js",
css: "popup.css"
}, function() {
Popup.show("hello world");
}
);
여기 코드 조각에서 먼저 popup.html, popup.js 및 popup.css 세 파일이 로드되었는지 확인하고 로드된 경우 동적으로 로드하는지 확인합니다. 다시 그들. 세 파일이 모두 로드되었는지 확인한 후 후속 익명 함수, 즉 Popup.show("hello world");를 실행하는지 확인하세요.

다음으로 어떻게 JavaScript와 CSS를 동적으로 로드하는지 살펴보겠습니다.

JavaScript 로드
sure에서는 JavaScript 로드가 Safari와 Non-Safari의 두 가지 상황에서 실행됩니다.

IE, Firefox 및 Opera에서 JavaScript 로드
이 세 가지 브라우저에서 JavaScript를 로드하려면 스크립트 요소를 생성하고 src에 로드할 URL을 지정한 다음 마지막으로 스크립트 요소를 추가하기만 하면 됩니다. 머리 요소에 그게 다입니다. 이 작업은 HttpLibrary.createScriptTag()에서 수행됩니다. 그러나 JavaScript를 로드해야 할 뿐만 아니라 로드가 완료된 시기도 알아야 합니다. 이는 스크립트 요소의 onload 이벤트 또는 onreadystatechange 이벤트를 통해 달성할 수 있습니다.

Safari에서 JavaScript 로드
Safari 2는 onload 또는 onreadystatechange를 지원하지 않기 때문에 XHR을 통해 URL을 수동으로 읽은 다음 이 코드를 수동으로 평가할 수 있으며 이로 인해 제한이 발생합니다. 이 도메인을 로드할 수 있습니다. eval 작업은 HttpLibrary.globalEval()을 통해 수행됩니다. JavaScript 코드가 전역 컨텍스트에서 평가될 수 있도록 하려면 스크립트 요소를 생성하고 그 안에 평가할 JavaScript를 배치한 다음 마지막으로 스크립트 요소를 헤드 요소에 추가하는 방법을 계속 사용하는지 확인하세요.

주의 깊은 사람들은 직접 window.eval이나 eval.call 대신 HttpLibrary.globalEval()이 왜 이렇게 설계되었는지 물어봐야 합니다. 이는 window.eval이나 eval.call 모두 IE6에서 스크립트 태그를 사용하여 JavaScript 코드를 로드하는 것과 동일한 효과를 얻을 수 없기 때문입니다. 이 두 메서드의 eval은 IE6의 전역 컨텍스트에서 여전히 실행되지 않습니다. 검색하면 몇 가지 관련 토론을 찾을 수 있습니다. 예를 들어 jQuery는 한때 이 작업을 수행하기 위해 window.execScript()를 사용했습니다. 그러나 결국 모든 사람들은 스크립트 요소를 추가하는 것이 최고의 크로스 브라우저 솔루션이라는 것을 알게 되었고 이제 jQuery와 보증은 이런 방식으로 구현됩니다.

CSS 로딩
JavaScript 로딩에 비해 CSS 로딩은 훨씬 간단하고 방법도 비슷합니다. 링크 요소를 헤드 요소에 직접 추가하기만 하면 됩니다. 이것이 바로 loadCSS()가 하는 일입니다.

실제로 CSS가 실행되기 전에 로드되는지 확인하지 않습니다. 이는 아마도 페이지가 로드된 후 브라우저가 CSS를 페이지에 자동으로 적용할 수 있기 때문일 것입니다. 따라서 Omar AL Zabir은 CSS의 로드 순서는 중요하지 않다고 생각합니다. 그러나 CSS 로드 속도가 너무 느리면 실제로 표시 효과에 영향을 미칠 것입니다. .

IE6에서 CSS 로딩
이번에 특별한 주의가 필요한 것은 Safari가 아닌 IE6입니다. IE6이 헤드 요소에 링크 요소를 추가할 때는 윈도우의 컨텍스트에서 이루어져야 하므로 링크를 추가하는 함수는 호출을 통해 컨텍스트를 전환합니다.

요약
사실 JavaScript와 CSS를 동적으로 로드하는 것은 어렵지 않습니다. 대부분의 경우 해당 하위 요소를 head 요소에 추가하기만 하면 됩니다. 브라우저에는 특별한 주의가 필요합니다.

/*
스크립트: Enache.js

Ensure 라이브러리
    
를 로드할 수 있는 편리한 기능 "ensure"를 제공하는 작은 자바스크립트 라이브러리    Javascript, HTML, CSS -요구한 다음 코드를 실행하십시오. 관련
    Javascript 및 HTML 스니펫을 사용하는 코드
를 실행하기 전에 브라우저 DOM에 이미 있는지 확인하세요.

    이 스크립트의 마지막 버전을 다운로드하려면 다음 링크를 사용하세요:
버전:
    1.0 - 최초 릴리스

호환성:
    FireFox - 버전 2 및 3
    Internet Explorer - 버전 6 및 7
    Opera - 9(아마도) 8도)
    Safari - 버전 2 및 3
    Konqueror - 버전 3 이상

종속성:
    
    
    

크레딧:
     - 전역 Javascript 실행 -
저자:
    Omar AL Zabir - http://www.php.cn/

라이센스:
    >저작권(C) 2008 Omar AL Zabir - http:/ /www.php.cn/
    >    
    >이 소프트웨어 및 관련
    >문서 파일("소프트웨어")의 사본을 얻는 모든 사람에게
    >
    >
    >
    >사용, 복사, 수정, 병합,
    >소프트웨어 사본 게시, 배포, 재라이센스 부여 및/또는 판매할 수 있는 권리를 포함하되 이에 국한되지 않습니다.
    > ;소프트웨어를 제공받은 사람에게
    >다음 조건에 따라 그렇게 할 수 있도록 허용합니다.
    >
    >위의 저작권 고지와 본 허가 고지는 소프트웨어의 모든 사본 또는 상당 부분에
    >포함되어야 합니다.
    >
    >소프트웨어는 명시적이든 묵시적이든 어떠한 종류의 보증도 없이 "있는 그대로" 제공됩니다.
    >상품성 보증을 포함하되 이에 국한되지 않습니다.
    >특정 목적에의 적합성 및 비침해.
    >저작자나 저작권 보유자는 어떠한 경우에도
    >계약, 불법 행위 또는 기타 행위로 인한 손해나 기타 책임에 대해 책임을 지지 않습니다.
    > 소프트웨어
    >또는 소프트웨어의 사용 또는 기타 거래와 관련하여.
*/

(function(){

window.ensure = function( 데이터, 콜백, 범위 )
{
if( typeof jQuery == "정의되지 않음" && typeof Sys == "undefine" && typeof Prototype == "undefine" )
return warning("jQuery, Microsoft ASP.NET AJAX 또는 Prototype 라이브러리를 찾을 수 없습니다. 작동하려면 라이브러리가 있어야 합니다."); >
// false인 경우 관련 구성 요소를 로드해야 한다는 테스트 기준이 있습니다. 그러나 true인 경우
// 구성 요소를 로드할 필요가 없습니다.
if( typeof data.test != "undefine" )
{
var test = function() { return data.test };

if( typeof data.test == "string" )
{
test = function( )
{
// 해당 Javascript 변수가 없고 ID가 있는 DOM 요소가 없으면
// 테스트가 실패합니다.
return !(eval( " typeof " data.test ) == "정의되지 않음"
&& document.getElementById(data.test) == null);
}
}
else if( typeof data.test == "function " )
{
test = data.test;
}

// 이제 테스트가 준비되었습니다. 테스트를 실행하고 어떤 항목에서든 null, 정의되지 않음 또는 false를 반환하는지 확인할 시간입니다.
//시나리오. 그렇다면 지정된 javascript/html/css를 로드합니다.
if( test() === false || typeof test() == "undefine" || test() == null )
새 verifyExecutor (데이터, 콜백, 범위);
// 테스트 성공! 그냥 콜백
else
callback()을 실행하세요.
}
else
{
// 지정된 테스트가 없습니다. 따라서 필요한 javascript/html/css를 로드하고 콜백을 실행합니다
새로운 verifyExecutor(데이터, 콜백, 범위);
}
}

// verifyExecutor는 보장 작업을 수행하는 메인 클래스입니다.
window.ensureExecutor = 함수(데이터, 콜백, 범위)
{
this.data = this.clone(data);
this.callback = (typeof 범위 == "정의되지 않음" || null == 범위 ? 콜백 : this.delegate(콜백, 범위));
this.loadStack = [];

if( data.js && data.js.constructor != Array ) this.data.js = [data.js];
if( data.html && data.html.constructor != Array ) this.data.html = [data.html];
if( data.css && data.css.constructor != 배열 ) this.data.css = [data.css];

if( typeof data.js == "undefine" ) this.data.js = [];
if( data.html 유형 == "정의되지 않음" ) this.data.html = [];
if( data.css 유형 == "정의되지 않음" ) this.data.css = [];

this.init();
this.load();
}

window.ensureExecutor.prototype = {
init : function()
{
// 프레임워크 특정 라이브러리를 사용하여 Javascript 가져오기
if( typeof jQuery != " 정의되지 않음" )
{
this.getJS = HttpLibrary.loadJavascript_jQuery;
this.httpGet = HttpLibrary.httpGet_jQuery;
}
else if( 프로토타입 유형 != "정의되지 않음" )
{
this.getJS = HttpLibrary.loadJavascript_Prototype;
this.httpGet = HttpLibrary.httpGet_Prototype;
}
else if( typeof Sys != "undefine" )
{
this.getJS = HttpLibrary.loadJavascript_MSAJAX;
this.httpGet = HttpLibrary.httpGet_MSAJAX;
}
else
{
throw "jQuery, Prototype 또는 MS AJAX 프레임워크를 찾을 수 없습니다.";
}
},
getJS : function(data)
{
// Javascript를 가져와 실행하는 추상 함수
},
httpGet : function(url, callback )
{
// HTTP GET 호출을 위한 추상 함수
},
load : function()
{
this.loadJavascripts( this.delegate( function() {
this.loadCSS( this.delegate( function() {
this.loadHtml( this.delegate( function() {
this.callback()
} ) )
} ) )
} ) );
},
loadJavascripts : function(complete)
{
var scriptsToLoad = this.data.js.length;
if( 0 === scriptsToLoad ) return 완료();

this.forEach(this.data.js, function(href)
{
if( HttpLibrary.isUrlLoaded(href) || this.isTagLoaded('script', 'src', href) ) )
{
scriptsToLoad --;
}
else
{
this.getJS({
url: href,
success: this.delegate(function (콘텐츠)
{
scriptsToLoad --;
HttpLibrary.registerUrl(href)
}),
error: this.delegate(function(msg)
{
scriptsToLoad --; if(typeof this.data.error == "function") this.data.error(href, msg)
})
}
});

// 모든 외부 스크립트가 다운로드될 때까지 기다립니다.
this.until({
test: function() { return scriptsToLoad === 0; },
delay: 50,
콜백: this.delegate(function()
{
complete();
})
});
},
loadCSS : function(complete)
{
if( 0 === this.data.css.length ) return Complete();

var head = HttpLibrary.getHead();
this.forEach(this.data.css, function(href)
{
if( HttpLibrary.isUrlLoaded(href) || this.isTagLoaded('link', 'href', href) )
{
// 아무것도 하지 않음
}
else
{
var self = this
try
{
(function(href, head)
{
var link = document.createElement('link');
link.setAttribute("href", href)
link.setAttribute("rel", "Stylesheet"); link.setAttribute("type", "text/css");
head.appendChild(link);

HttpLibrary.registerUrl(href)
}).apply(window, [href) , head]);
}
catch(e)
{
if(typeof self.data.error == "function") self.data.error(href, e.message);
}
}
});

완료();
},
loadHtml : 함수(완료)
{
var htmlToDownload = this.data.html.length;
if( 0 === htmlToDownload ) return 완료();

this.forEach(this.data.html, function(href)
{
if( HttpLibrary.isUrlLoaded(href) )
{
htmlToDownload --;
}
else
{
this.httpGet({
url: href,
success: this.delegate(function(content)
{
htmlToDownload --;
HttpLibrary.registerUrl(href);

var parent = (this.data.parent || document.body.appendChild(document.createElement("p")))
if( typeof parent = = "string" ) parent = document.getElementById(parent);
parent.innerHTML = content;
}),
error: this.delegate(function(msg)
{
htmlToDownload --;
if(typeof this.data.error == "function") this.data.error(href, msg)
})
}); );

// 모든 외부 스크립트가 다운로드될 때까지 기다립니다.
this.until({
테스트: function() { return htmlToDownload === 0; },
지연: 50,
콜백: this.delegate(function()
{
complete();
})
});
},
clone : function(obj)
{
var cloned = {};
for( var p in obj )
{
var x = obj[p];

if( typeof x == "object" )
{
if( x.constructor == Array )
{
var a = [];
for( var i = 0; i 복제됨[p] = a;
}
else
{
cloned[p] = this.clone(x);
}
}
else
cloned[p] = x;
}

복제된 것을 반환합니다.
},
forEach : 함수(arr, 콜백)
{
var self = this;
for( var i = 0; i callback.apply(self, [arr[i]]);
},
delegate : function( func, obj )
{
var context = obj || 이것;
return function() { func.apply(컨텍스트, 인수); }
},
until : function(o /* o = { 테스트: function(){...}, 지연:100, 콜백: function(){...} } */)
{
if( o.test() === true ) o.callback();
else window.setTimeout( this.delegate( function() { this.until(o); } ), o.delay || 50);
},
isTagLoaded : function(tagName, attName, value)
{
// 임시 태그를 생성하여 브라우저가 결국 필요한 인코딩을 수행한 후 속성에 어떤 값을 부여하는지 확인하세요.
//
var tag = document.createElement(tagName);
태그[attName] = 값;
var tagFound = false;
var 태그 = document.getElementsByTagName(tagName);
this.forEach(tags, function(t)
{
if( tag[attName] === t[attName] ) { tagFound = true; return false }
});
반품 태그 발견;
}
}

var userAgent = navigator.userAgent.toLowerCase();

// HttpLibrary는 HTTP GET, DOM에 스크립트 삽입, 로드된 URL 추적 등의 일반적인 작업을 수행하는 크로스 브라우저, 크로스 프레임워크 라이브러리입니다.
// 구현을 제공합니다.
// 구현 jQuery, MSAJAX 또는 Prototype을 포함한 다양한 프레임워크용
var HttpLibrary = {
browser : {
     version: (userAgent.match( /. (?:rv|it|ra|ie)[/: ]( [d.] )/ ) || [])[1],
     사파리: /webkit/.test( userAgent ),
     오페라: /opera/.test( userAgent ),
     msie: / msie/.test( userAgent ) && !/opera/.test( userAgent ),
     mozilla: /mozilla/.test( userAgent ) && !/(호환|webkit)/.test( userAgent )
},
loadedUrls : {},

isUrlLoaded : function(url)
{
return HttpLibrary.loadedUrls[url] === true;
},
unregisterUrl : function(url)
{
HttpLibrary.loadedUrls[url] = false;
},
registerUrl : function(url)
{
HttpLibrary.loadedUrls[url] = true;
},

createScriptTag : function(url, 성공, 오류)
{
var scriptTag = document.createElement("script");
scriptTag.setAttribute("type", "text/javascript");
scriptTag.setAttribute("src", url);
scriptTag.onload = scriptTag.onreadystatechange = function()
{
if ( (!this.readyState ||
                  this.readyState == "로드됨" || this.readyState == "완료" ") ) {
                성공();
           }
        };
scriptTag.onerror = function()
{
error(data.url " 로드하지 못했습니다.");
};
     var head = HttpLibrary.getHead();
head.appendChild(scriptTag);
},
getHead : function()
{
return document.getElementsByTagName("head")[0] || document.documentElement
},
globalEval : function(data)
{
var script = document.createElement("script"); script.type = "text/javaScript";
if (httplibrary.browser.msie) script.text = data; script.appendChild (document.createtextNode (data) );

var head = HttpLibrary.getHead();
        head.appendChild( script );
        //head.removeChild( script );
},
loadJavascript_jQuery : function(data)
{
if( HttpLibrary.browser.safari )
{
return jQuery.ajax({
            유형: "GET" ,
             url: data.url,
             데이터: null,
             성공: function(content)
             {
             HttpLibrary.globalEval(content);
             데이터 .success();
             },
             오류: function(xml, status, e)
{
if( xml && xml.responseText )
data.error(xml.responseText);
else
data.error(url 'n' e.message);
},
             dataType: "html"
         });
}
else
{
HttpLibrary.createScriptTag(data.url, data.success, data.error);
}
},
loadJavascript_MSAJAX : 함수(데이터)
{
if( HttpLibrary.browser.safari )
{
var params =
{
url: data.url,
성공: 함수(콘텐츠)
{
HttpLibrary.globalEval(content);
data.success(콘텐츠);
},
오류 : data.error
};
HttpLibrary.httpGet_MSAJAX(params);
}
else
{
HttpLibrary.createScriptTag(data.url, data.success, data.error);
}
},
loadJavascript_Prototype : 함수(데이터)
{
if( HttpLibrary.browser.safari )
{
var params =
{
url: data.url,
성공: 함수(콘텐츠)
{
HttpLibrary.globalEval(content);
data.success(콘텐츠);
},
오류 : data.error
};
HttpLibrary.httpGet_Prototype(params);
}
else
{
HttpLibrary.createScriptTag(data.url, data.success, data.error);
}
},
httpGet_jQuery : function(data)
{
return jQuery.ajax({
            type: "GET",
           url: data.url,
            데이터: null,
            성공: data.success,
            오류: function(xml, 상태, e)
{
if( xml && xml.responseText )
data.error( xml.responseText);
else
data.error("로드 중 오류가 발생했습니다: " url 'n' e.message),
           dataType: data.type ||
        });
},
httpGet_MSAJAX : 함수(데이터)
{
var _wRequest = new Sys.Net.WebRequest();
_wRequest.set_url(data.url);
_wRequest.set_httpVerb("GET");
_wRequest.add_completed(함수(결과)
{
var errorMsg = "로드하지 못했습니다:" data.url;
if (result.get_timedOut()) {
errorMsg = "Timed" out";
}
if (result.get_aborted()) {
errorMsg = "Aborted";
}

if (result.get_responseAvailable()) data.success( result.get_responseData() );
else data.error( errorMsg )
});

var executor = new Sys.Net.XMLHttpExecutor();
_wRequest.set_executor(실행자);
executor.executeRequest();
},
httpGet_Prototype : function(data)
{
new Ajax.Request(data.url, {
method: 'get',
evalJS: false, // Make 확실한 프로토타입은 자동으로
onSuccess: function(transport, json)
{
data.success(transport.responseText || "");
},
onFailure : data. 오류
});
}
};

})();