javascript_javascript 기술 아래 4가지 크로스 브라우저 필수 기능

다음 네 가지 기능이 그 일부입니다.

먼저 브라우저 감지 스크립트를 추가해야 합니다.

코드 복사 코드는 다음과 같습니다:

/************************************
* 브라우저 감지
***** * *****************************/
var user = navigator.userAgent;
var browser =
browser.opera = user. indexOf("Opera ") > -1 && typeof window.opera == "object";
browser.khtml = (user.indexOf("KHTML") > -1 || user.indexOf("AppleWebKit" ) > - 1 || user.indexOf("Konqueror") > -1) && !browser.opera;browser.ie = user.indexOf("MSIE") > >browser.gecko = user.indexOf("Gecko") > -1 && !browser.khtml;
if ( browser.ie ) {
var ie_reg = /MSIE (d .d );/; 🎜>ie_reg.test(user);
var v = parseFloat(RegExp["$1"])
browser.ie55 = v <= 5.5
v <= 6 ;
}

1) 이벤트 바인딩을 추가하세요.bind()
이건 다들 아셔야 합니다. IE의 이벤트 바인딩 기능은 attachmentEvent이고, Firefox와 Safari는 addEventListener입니다. Opera는 둘 다 지원합니다. 캡슐화는 아래에서 수행됩니다.

코드 복사 코드는 다음과 같습니다.

/************************************

* 이벤트 바인딩 추가
* @param obj: The 이벤트가 바인딩될 요소
* @param 유형: 이벤트 이름. "on"을 추가하지 마세요. 예: "onclick" 대신 "click".
* @param fn: 이벤트 처리 기능
******************** ***** *****************/
function 바인딩( obj, type, fn ) {
if ( obj.attachEvent ) {
obj['e' type fn] = fn
obj[type fn] = function(){obj; ['e ' type fn]( window.event );}
obj.attachEvent( 'on' type, obj[type fn] )
} else
obj.addEventListener( type, fn, false );
}
예를 들어 페이지 클릭 이벤트를 추가합니다.

bind(document, "click", function() {
alert("Hello, World!!");
}) ;


2) 삭제 이벤트 바인딩 unbind()

와 바인딩()은 동일한 함수 매개변수를 갖지만 반대되는 함수를 갖습니다.

코드 복사 코드는 다음과 같습니다.

/**************************************

* 이벤트 바인딩 삭제
* @param obj : 이벤트를 삭제하는 요소
* @param 유형: 이벤트 이름. "on"을 추가하지 마세요. 예: "onclick" 대신 "click"
* @param fn: 이벤트 처리 기능
******************** ** ****************/
function unbind( obj, type, fn ) {
if ( obj.detachEvent ) {
obj.detachEvent( 'on' type, obj[type fn] )
obj[type fn] = null;
} else
obj.removeEventListener( type, fn, false )
}

3) 요소의 계산된 스타일 가져오기
계산된 스타일도 요소의 최종 스타일인 최종 스타일이라고 합니다. IE는 요소의 currentStyle 속성을 사용하는 반면 다른 브라우저는 표준 document.defaultView.getCompulatedStyle() 메서드를 사용합니다.

코드 복사 코드는 다음과 같습니다.

/**************************************

* 요소의 계산된 스타일을 반환합니다.
* @param 요소 : 요소
* @param key : 스타일 이름(카멜)
**************************** ******** ****/
function getStyle(element, key) {
// 잘못된 매개변수
if ( typeof element != "object" || typeof key != "string" || key == "" )
return false;

// 불투명도
if( key == "opacity" ) {
if(browser.ie) {
var f = element.filters
if(f && f.length > 0 && f.alpha) {
return (f.alpha.opacity / 100)
}
return 1.0;
}
return document.defaultView.getComputeStyle ( 요소, null)["불투명도"]
}

// float
if ( key == "float" ) {
key = (browser.ie ? "styleFloat" : "cssFloat");
}
if ( typeof element.currentStyle != "undefine" ){
return element.currentStyle[key]
} else {
return document.defaultView . getCompulatedStyle(element, null)[key];
}
}


IE의 투명도 메커니즘은 다른 브라우저의 투명도와 다릅니다. 또한 float는 JavaScript의 예약어이므로 IE에서는 styleFloat를 사용하고 다른 브라우저에서는 cssFloat를 사용합니다. 여기서는 float로 통합됩니다.

예: 투명성 확보

코드 복사 코드는 다음과 같습니다.

var a = document.getElementById("test");
var opacity = getStyle(a, "opacity")

4) DOM 로드 이벤트 바인딩 domready()
domready는 window.onload와 다릅니다. window.onload는 이미지, 비디오 및 기타 항목을 포함하여 페이지의 모든 요소가 로드되었음을 의미합니다. 일반적으로 우리는 그렇게 오래 기다릴 필요가 없으며 단지 DOM을 사용할 수 있어야 합니다.

코드 복사 코드는 다음과 같습니다.

/**************************************
* domready
* @param fn: to 실행함수
*****************************************/
function domready(fn) {
//잘못된 매개변수
if(typeof fn != "function")
return false
if(typeof document.addEventListener == "function") { // IE가 아닌 브라우저
document.addEventListener("DOMContentLoaded", fn, false)
return;
}
var _this =args.callee; // DOM이 로드된 경우 직접 실행
return fn();

if(!_this.list) // 실행할 함수 배열 생성
_this.list = [ ];

_this.list.push(fn);

if (_this.done) return; // 루프 감지가 진행 중인 경우 return
(function() { / / 루프 감지
_this .done = true;
try {
document.documentElement.doScroll("left")
} catch(error) {
setTimeout(arguments.callee, 0 );
return;
}
// DOM이 로드되고 실행할 모든 함수를 실행합니다.
_this.ready = true
for (var i=0, l=_this.list .length; i_this.list[i]();
}
})()

코드 복사 코드는 다음과 같습니다.

domready(function(){

Alert("DOM이 로드되었습니다!")
});