> 웹 프론트엔드 > JS 튜토리얼 > 일반적인 JavaScript 호환성 문제 및 관련 해결 방법(chrome/IE/firefox)_javascript 기술

일반적인 JavaScript 호환성 문제 및 관련 해결 방법(chrome/IE/firefox)_javascript 기술

WBOY
풀어 주다: 2016-05-16 17:05:57
원래의
971명이 탐색했습니다.

우선 제가 테스트한 브라우저 버전은 chrome15.0.874.121 Firefox 8.01 IE9 IETester임을 선언하겠습니다

다음 코드는 명령문에 관한 코드입니다

1: 스크롤바를 얻는 상황

코드를 복사하세요 코드는 다음과 같습니다 :

function getScroll(){
var t, l, w, h;

if (document.documentElement && document.documentElement.scrollTop) {
t = document.documentElement.scrollTop ;//스크롤 막대 상단
l = document.documentElement.scrollLeft;//스크롤 막대 왼쪽 끝
w = document.documentElement.scrollWidth;//너비 스크롤 막대의 너비, 즉 페이지의 너비
h = document.documentElement.scrollHeight;//스크롤 막대의 높이 l = document.body.scrollLeft;
w = document.body.scrollWidth ;
h = document.body.scrollHeight;
}
return {
t: t,
l: l,
               w:
                             ~ >

코드 복사


코드는 다음과 같습니다.


function getPageWidth(){
var pageWidth = window.innerWidth;
if (typeof pageWindth != "number") { if (document.compatMode == "CSS1Compat") {
pageWidth = document.documentElement.clientWidth;
}

코드는 다음과 같습니다.

function(){
var Sys = {};
var ua = navigator.userAgent.toLowerCase();
var s;
(s = ua.match(/ / msie ([d.] )/)) ? Sys.ie = s[1] : (s = ua.match(/firefox/([d.] )/)) ? Sys.firefox = s[1] : ( s = ua.match(/chrome/([d.] )/)) ? Sys.chrome = s[1] : (s = ua.match(/opera.([d.] )/)) ? . Opera = s[1] : (s = ua.match(/version/([d.] ).*safari/)) ? Sys.safari = s[1] : 0;

if ( Sys .ie != null) {
                                                                                                                                                                                                         return ("firefox:" firefox);//firefox 브라우저 및 버전 번호 확인
}
if (Sys.chrome != null) {
return ("chrome:" Sys.chrome) ; // Chrome 브라우저 및 버전 번호 판단
}
if (sys.opera! = Null) {
Return ("Opera:" sys.opra );
}
if (Sys.safari != null) {
return ("safari:" Sys.safari);//Safari 브라우저 및 버전 번호 확인
}
}



4: 이벤트 모니터링


코드 복사 코드는 다음과 같습니다 :함수(요소, 유형, 핸들러){
If (element.addEventListener) {
element.addEventListener(유형, 핸들러, false);
}
else
if (element.attachEvent) {
                                                                                                  }
}



5: 이벤트 제거




코드 복사
코드는 다음과 같습니다.            if (element.detachEvent)                                           ~                 요소["on" 유형] = null;
}
}



6: 이벤트 획득 시 Firefox 이벤트가 계속 전달되면 첫 번째 이벤트에서 문제가 발생합니다.





코드 복사

코드는 다음과 같습니다.

function(event){

event = (event ? event : window.event);
if (event == null) {
var $E = function() {
var c = $E.caller;
while (c.caller)
c = c.caller;
return c.arguments[0]
        };
             __defineGetter__( "이벤트", $E);
                                                                               복귀 이벤트; 🎜>코드 복사


코드는 다음과 같습니다.

function(event ){
                                                                                                                                  preventDefault();
}
else { event.returnValue = false; } }
8: 수행 계속해서 이벤트를 전파하지 마세요





코드 복사


코드는 다음과 같습니다.

함수 (이벤트){ if (event .stopPropagation) {
                                                                       >
9 : 이벤트 대상 획득
코드 복사


코드는 다음과 같습니다.


function( event){
return event.target || > }


10: document.doctype이 불일치를 지원합니다.

E: 문서 유형 설명이 있으면 주석으로 잘못 해석되어 Comment 노드로 처리됩니다. document.doctype의 값은 항상 null입니다.
Firefox: 문서 유형 설명이 있으면 문서의 첫 번째 하위 노드로 사용됩니다. document.doctype은 DocumentType 노드입니다. 동일한 노드는 firstChild 또는 childNodes[0]를 통해서도 액세스할 수 있습니다. Safari, Chrome, Opera: 문서 유형 설명이 존재하는 경우 설명으로 사용되지만 문서의 하위 노드로 사용되지 않으며 childNodes에 표시되지 않습니다. 11: 요소 찾기
때때로 IE가 항상 무엇을 하고 있는지, 항상 새롭고 달라지려고 노력하는지 정말 이해가 되지 않습니다. 시스템이 자체 브라우저를 허용하지 않는다면 IE의 점유율은 더욱 줄어들 것이라고 감히 말씀드립니다.

아이디와 이름이 동일할 경우 해당 아이디도 반환됩니다



코드 복사

코드는 다음과 같습니다.

< head>


IE에서는 결과가 달라집니다.

IE도 마찬가지, ID는 대소문자를 구분하지 않습니다

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










죄송합니다. 결과가 또 바뀌었습니다.

12: 사용자 정의 속성인 경우 item.myattributs는 IE가 아닌 브라우저에서 올바른 결과를 얻을 수 없습니다.

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

function(item,myatt) {
return item.attributes[myatt].value;
}

마찬가지로 속성을 설정하는 방법, 즉 값을 할당하는 방법을 알아야 합니다.
코드 복사 코드는 다음과 같습니다.

function(item,myatt,value){
item.attributes[myatt].value=value;
}

13: 요소의 하위 노드 수
코드 복사 코드는 다음과 같습니다.



  • 두 번째

  • 세 번째



IE 결과는 다음과 같습니다. 3, 다른 브라우저는 7입니다.

노드 사이의 공백 문자는 다른 브라우저의 텍스트 노드이며 결과는 7입니다. 이렇게 되면

코드를 복사하세요 코드는 다음과 같습니다.

< ul id="myul ">
  • 첫 번째
  • 두 번째
  • 세 번째


  • 이것은 그런데 모두의 결과는 이미 3입니다.
    14: 생성 노드 문제
    코드 복사 코드는 다음과 같습니다

    //요소를 동적으로 추가하면 모든 브라우저에서 구현할 수 있습니다.
    var newnode=document.createElement("input");
    newnode.type="button";
    newnode.value=" six ";
    //IE에서도 가능합니다
    var newnode= document.createElement("");

    15: 오른쪽 클릭을 보호할 때 Firefox는 oncontextmenu 이벤트에서 다른 것과 다릅니다.

    16: 스타일과 스크립트를 동적으로 추가할 때 IE는 다른 브라우저와 다릅니다. 구체적으로 확인해보세요.

    17: DOM2와 DOM3의 경우 상황이 더 복잡합니다.

    관련 라벨:
    원천:php.cn
    본 웹사이트의 성명
    본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
    인기 튜토리얼
    더>
    최신 다운로드
    더>
    웹 효과
    웹사이트 소스 코드
    웹사이트 자료
    프론트엔드 템플릿