Firefox에서 개발 된 Javascript가 IE에서 실패하는 일반적인 이유는 무엇입니까? [닫은]
최신 Firefox 및 Safari에서 잘 실행되는 자바 스크립트 향상 페이지를 개발했습니다. Internet Explorer에서 확인하지 못했지만 이제 IE 6 및 7에서 페이지가 작동하지 않는다는 것을 알았습니다 (지금까지). 스크립트는 어떻게 든 실행되지 않으며, 일부 자바 스크립트가 실행되지만 페이지에 자바 스크립트가없는 것처럼 표시됩니다. YUI 2에서 dom 조작으로 자체 라이브러리를 사용하고 있습니다. YUI-Loader와 XML-Http-Request를 사용하고 한 페이지에서 "psupload"를 사용합니다. 이는 JQuery에 따라 다릅니다.
Office XP에서 Microsoft Script Editor를 설치하고 있으며 이제 디버깅합니다. 또한 지금 특정 테스트를 작성합니다.
IE의 일반적인 실패 점은 무엇입니까? 눈을 뜨고있는 방향
이 페이지를 발견했는데 약간의 차이점이 있습니다. 방문 : Quirksmode
당신의 경험에서 내가 먼저 찾아야 할 몇 가지 전형적인 것들을 말할 수 있습니까?
또한 나중에 특정 작업에 대해 더 많은 질문을 할 것이지만 지금은 Firefox에서 잘 실행되는 스크립트에서 IE가 실패하는 이유에 관심이 있습니다.
편집 : 모든 위대한 답변에 감사드립니다!
그 동안 Internet Explorer에서도 작동하도록 전체 코드를 조정했습니다. jQuery를 통합하고 그 위에 자체 클래스를 만들었습니다. 이것은 jQuery에서 모든 것을 처음부터 빌드하지 않은 기본적인 실수였습니다. 지금 나 한테있어.
또한 JSLint가 많은 도움이되었습니다.
그리고 다른 답변에서 나온 많은 단일 문제가 도움이되었습니다.
오류 / 생략 등이 있으면 언제든지이 목록을 업데이트하십시오.
참고 : IE9는 다음과 같은 많은 문제를 해결하므로이 문제의 상당 부분은 IE8 이하 및 쿼크 모드의 IE9에만 적용됩니다. 예를 들어, IE9는 SVG를 지원 <canvas>, <audio>그리고 <video>기본적으로, 그러나 당신이해야한다 표준 준수 모드를 활성화 그들이 사용할 수에 대한.
일반:
부분적으로로드 된 문서의 문제 :
window.onloadIE가 부분적으로로드 된 문서에서 많은 작업을 지원하지 않기 때문에 JavaScript를 유사한 이벤트 에 추가하는 것이 좋습니다 .다른 속성 : CSS에서는
elm.style.styleFloatIE와elm.style.cssFloatFirefox에 있습니다. 에<label>태그for속성에 액세스 할 수elm.htmlForIE에 대elm.forFirefox에서. 참고forIE에 예약되어 있습니다 그래서elm['for']아마 예외를 발생에서 IE를 막을 수있는 더 좋은 생각이다.
기본 JavaScript 언어 :
문자열의 문자 액세스 :
'string'[0]원래 JavaScript 사양이 아니므로 IE에서 지원되지 않습니다. 사용'string'.charAt(0)또는'string'.split('')[0]배열의 항목을 액세스하는 속도가 매우 빠르고 사용하는 것보다 것을주의charAtIE에서 문자열 (때 몇 가지 초기 오버 헤드가 비록split처음이라고합니다.)객체가 끝나기 전에 쉼표 : 예를 들어
{'foo': 'bar',}IE에서는 허용되지 않습니다.
요소 별 문제 :
documentIFrame 얻기 :- Firefox 및 IE8 + :
IFrame.contentDocument(IE는 버전 8 부터 지원하기 시작했습니다 .) - IE :
IFrame.contentWindow.document - ( 두 브라우저에서 모두를
IFrame.contentWindow나타냅니다window.)
- Firefox 및 IE8 + :
캔버스 : IE9 이전의 IE 버전은이
<canvas>요소를 지원하지 않습니다 . IE는 유사한 기술인 VML 을 지원 하지만 explorercanvas 는<canvas>많은 작업에 대한 요소에 대한 인플레 이스 래퍼를 제공 할 수 있습니다 . 표준 준수 모드의 IE8은 VML을 사용할 때 쿼크 모드에있을 때보 다 몇 배 더 느리고 결함이 더 많습니다.SVG : IE9는 기본적으로 SVG를 지원합니다. IE6-8은 SVG를 지원할 수 있지만 JavaScript 조작을 지원하는 일부 플러그인 만있는 외부 플러그인 만 지원합니다.
<audio>및<video>: IE9에서만 지원됩니다.동적으로 라디오 버튼 만들기 : IE <8에는 라디오 버튼을 확인할 수없는 버그가
document.createElement있습니다. 모든 브라우저에서 작동하는 Javascript로 라디오 버튼을 동적으로 작성하는 방법 도 참조하십시오 . 이 문제를 해결하는 방법.<a href>태그에 포함 된 JavaScript 및onbeforeunloadIE의 충돌 : 태그 의href일부에 JavaScript가 포함 된 경우a(예 : 처리기가 사전에 제거 되지 않은 경우<a href="javascript: doStuff()">IE는 항상 메시지를 표시합니다 . 탭을 닫을 때 확인 요청) 도 참조 하십시오 .onbeforeunloadonbeforeunload<script>태그 이벤트의 차이는 :onsuccess와onerrorIE에서 지원되지 않습니다와 IE 전용으로 대체됩니다onreadystatechange에 관계없이 다운로드가 성공 또는 실패 여부에 발생합니다. 자세한 내용은 JavaScript Madness 를 참조하십시오.
요소 크기 / 위치 / 스크롤 및 마우스 위치 :
요소 크기 / 위치 가져 오기 : 요소의 너비 / 높이는 때로는
elm.style.pixelHeight/WidthIE가 아닌 IEelm.offsetHeight/Width에 있지만 IE에서 특히 쿼크 모드에서는 신뢰할 수 없으며 때로는 하나가 다른 것보다 더 나은 결과를 제공합니다.elm.offsetTop그리고elm.offsetLeft종종 잘못 팝업 요소 등이 많은 경우에 떨어져 몇 픽셀 인 이유입니다, 잘못되는 요소의 위치를 찾는 선도보고됩니다.또한, 요소 (또는 요소의 부모)가있는 경우 참고
display로none한 다음 크기 / 위치 특성을 액세스하는 대신 복귀시 IE가 예외를 발생시킬 것이다0파이어 폭스처럼.화면 크기를 가져옵니다 (화면 의 가시 영역 가져 오기).
- Firefox :
window.innerWidth/innerHeight - IE 표준 모드 :
document.documentElement.clientWidth/clientHeight - IE 쿼크 모드 :
document.body.clientWidth/clientHeight
- Firefox :
문서 스크롤 위치 / 마우스 위치 : 이것은 실제로 w3c에 의해 정의되지 않았으므로 Firefox에서도 표준이 아닙니다. 찾기하려면
scrollLeft/scrollTop의를document:- 쿼크 모드의 Firefox 및 IE :
document.body.scrollLeft/scrollTop - 표준 모드의 IE :
document.documentElement.scrollLeft/scrollTop 참고 : 일부 다른 브라우저 에서도
pageXOffset/pageYOffset를 사용 합니다.function getDocScrollPos() { var x = document.body.scrollLeft || document.documentElement.scrollLeft || window.pageXOffset || 0, y = document.body.scrollTop || document.documentElement.scrollTop || window.pageYOffset || 0; return [x, y]; };
위해서는 마우스 커서의 위치를 얻기 위해,
evt.clientX그리고evt.clientY에서mousemove이벤트 문서에 위치를 줄 것이다 스크롤 위치를 추가하지 않고 이전의 기능을 통합 할 필요가 있도록 :var mousepos = [0, 0]; document.onmousemove = function(evt) { evt = evt || window.event; if (typeof evt.pageX != 'undefined') { // Firefox support mousepos = [evt.pageX, evt.pageY]; } else { // IE support var scrollpos = getDocScrollPos(); mousepos = [evt.clientX+scrollpos[0], evt.clientY+scrollpos[1]]; }; };- 쿼크 모드의 Firefox 및 IE :
선택 / 범위 :
<textarea>및<input>선택 :selectionStart와selectionEndIE에서 구현하고, 또한 참조 그 자리에 독점 "범위"시스템 거기되지 않습니다 처음부터 문자, 텍스트 영역에 캐럿 위치 .문서에서 현재 선택된 텍스트 가져 오기 :
- Firefox :
window.getSelection().toString() - IE :
document.selection.createRange().text
- Firefox :
ID로 요소 가져 오기 :
document.getElementById또한 참조 할 수name형태 속성이 동일한가 다른 요소가되지 않도록 최선 (문서의 첫번째 따라 정의되는)name과id. 이것은idw3c 표준이 아니었던 시절로 거슬러 올라갑니다 .document.all( 독점적 인 IE 고유의 속성 )는보다 훨씬 빠르지document.getElementById만 항상name이전에 우선 순위를 정하기 때문에 다른 문제가 있습니다id. 나는 개인적 으로이 코드를 사용하고 추가 확인으로 돌아갑니다.function getById(id) { var e; if (document.all) { e = document.all[id]; if (e && e.tagName && e.id === id) { return e; }; }; e = document.getElementById(id); if (e && e.id === id) { return e; } else if (!e) { return null; } else { throw 'Element found by "name" instead of "id": ' + id; }; };
읽기 전용 innerHTML 관련 문제 :
IE는 않습니다 지원하지 의 innerHTML을 설정
col,colGroup,frameSet,html,head,style,table,tBody,tFoot,tHead,title, 및tr요소. 다음은 테이블 관련 요소에 대해 작동하는 함수입니다.function setHTML(elm, html) { // Try innerHTML first try { elm.innerHTML = html; } catch (exc) { function getElm(html) { // Create a new element and return the first child var e = document.createElement('div'); e.innerHTML = html; return e.firstChild; }; function replace(elms) { // Remove the old elements from 'elm' while (elm.children.length) { elm.removeChild(elm.firstChild); } // Add the new elements from 'elms' to 'elm' for (var x=0; x<elms.children.length; x++) { elm.appendChild(elms.children[x]); }; }; // IE 6-8 don't support setting innerHTML for // TABLE, TBODY, TFOOT, THEAD, and TR directly var tn = elm.tagName.toLowerCase(); if (tn === 'table') { replace(getElm('<table>' + html + '</table>')); } else if (['tbody', 'tfoot', 'thead'].indexOf(tn) != -1) { replace(getElm('<table><tbody>' + html + '</tbody></table>').firstChild); } else if (tn === 'tr') { replace(getElm('<table><tbody><tr>' + html + '</tr></tbody></table>').firstChild.firstChild); } else { throw exc; }; }; };또한 IE 는를 사용하여 만들 때 요소에 s를 추가하기 전에
<tbody>에 a<table>를 추가<tr>해야합니다 .<tbody>document.createElementvar table = document.createElement('table'); var tbody = document.createElement('tbody'); var tr = document.createElement('tr'); var td = document.createElement('td'); table.appendChild(tbody); tbody.appendChild(tr); tr.appendChild(td); // and so on
이벤트 차이 :
event변수 얻기 : DOM 이벤트는 IE의 함수에 전달되지 않으며로 액세스 할 수 있습니다window.event. 이벤트를 얻는 일반적인 방법 중 하나는 예elm.onmouseover = function(evt) {evt = evt||window.event}
를 들어 기본값 이 정의되지 않은window.event경우 를 사용 하는 것evt입니다.주요 이벤트 코드 차이점 : 주요 이벤트 코드는 크게 다르지만 Quirksmode 또는 JavaScript Madness 를 보면 IE에만 해당되는 것은 아니며 Safari와 Opera는 다시 다릅니다.
마우스 이벤트 차이점 :
buttonIE 의 속성은 한 번에 여러 마우스 버튼을 허용하는 비트 플래그입니다.- 왼쪽 : 1 (
var isLeft = evt.button & 1) - 오른쪽 : 2 (
var isRight = evt.button & 2) 센터 : 4 (
var isCenter = evt.button & 4)W3C 모델 (Firefox에서 지원)은 IE 모델보다 유연성이 떨어지며, 왼쪽으로
0, 오른쪽으로2및 가운데를으로 한 번에 하나의 버튼 만 허용1합니다. Peter-Paul Koch가 언급했듯이 이것은0일반적으로 '버튼 없음'을 의미하는 것처럼 매우 직관적 입니다.offsetX하고offsetY있는 문제 와는 IE에서 그들을 피하기 위해 아마 가장 좋습니다. 더 신뢰할 수있는 방법은을 얻을 수offsetX와offsetYIE에서하는 것 위치 얻을 상대적 위치 요소와에서 빼기clientX및clientY.또한 IE에서
click이벤트 에서 더블 클릭을 얻으려면 aclick와dblclick이벤트를 모두 함수 에 등록해야 합니다. Firefox는 더블 클릭 할 때click뿐만 아니라 실행dblclick되므로 동일한 동작을 위해서는 IE 특정 탐지가 필요합니다.
- 왼쪽 : 1 (
경우에 차이가 모델을 처리 : 이있는 경우 독점 IE 모델과 아래에서 위로 이벤트의 파이어 폭스 모델 지원 처리 모두를, 예를 들어, 두 요소의 이벤트
<div><span></span></div>다음 이벤트는에 트리거span다음div들이있어보다는 순서를 예를 들어 전통elm.onclick = function(evt) {}이 사용 된 경우 구속력 이 있습니다."캡처"이벤트는 일반적으로 Firefox 등에서 만 지원되며
div,span이벤트는 하향식 순서로 트리거됩니다 . IE는이elm.setCapture()와elm.releaseCapture()(요소에 문서에서 마우스 이벤트를 리디렉션에 대한elm다른 이벤트를 처리하기 전에이 경우)하지만, 성능 및 기타 문제의 숫자가 너무 아마 피해야합니다.Firefox :
부착 :
elm.addEventListener(type, listener, useCapture [true/false])
분리 :elm.removeEventListener(type, listener, useCapture)
(type예 :'mouseover'없이on)IE : 요소에서 주어진 유형의 단일 이벤트 만 IE 에서 추가 할 수 있습니다. 동일한 유형의 이벤트가 두 개 이상 추가되면 예외가 발생합니다. 또한 이벤트 함수에서 바운드 요소
this가window아닌 참조를 나타냅니다 (그러므로 유용하지 않습니다).첨부 :
elm.attachEvent(sEvent, fpNotify)
분리를 :elm.detachEvent(sEvent, fpNotify)
(sEvent인 예'onmouseover')
이벤트 속성 차이 :
다른 청취 기능으로 이벤트 처리를 중지하십시오 .
Firefox :
evt.stopPropagation()
IE :evt.cancelBubble = true키 이벤트가 문자를 삽입하거나 확인란이 선택되지 않도록 중지합니다.
파이어 폭스 :
evt.preventDefault()
IE :evt.returnValue = false
참고 : 그냥 반환false에keydown,keypress,mousedown,mouseup,click및reset도 기본을 방지 할 수 있습니다.이벤트를 트리거 한 요소를 가져옵니다.
Firefox :
evt.target
IE :evt.srcElement마우스 커서가 이동 한 요소를 가져 오는 경우 :
evt.fromElementIEevt.target에서onmouseout이벤트가 발생하면 Firefox에 있고 그렇지 않으면evt.relatedTargetGetting the element the mouse cursor moved to:
evt.toElementin IE isevt.relatedTargetin Firefox if in anonmouseoutevent, otherwiseevt.targetNote:
evt.currentTarget(the element to which the event was bound) has no equivalent in IE.
Check also for commas such as these or similar if any in your code
var o={
'name1':'value1',
'name2':'value2',
}
the last comma (following value2) will be tolerated by Firefox, but not IE
If you stick to using jQuery or YUI as your post is tagged, you should have minimal differences between browsers...that's what the frameworks are for, to take care of these cross-browser differences for you.
For an example, look at the quirksmode DOM traversal page, according to it IE doesn't support most things...while true, the frameworks do, for example IE doesn't support elem.childElementCount, but in jQuery: $(elem).children().size() works to get this value, in every browser. You'll find there's something in the library to handle 99% of the unsupported cases across browsers, at least with script...with CSS you might have to move to plugins for the library, a common example of this is to get rounded corners working in IE...since it has no CSS support for such.
If however you start doing things directly, like document.XXX(thing), then you're not in the library, you're doing javascript directly (it's all javascript, but you get the point :), and this might or might not cause issues, depending on how drunk the IE team was when implementing that particular function.
With IE you're more likely to fail on styling coming out right than raw javascript issues, animations a few pixels off and that sort of thing, much more-so in IE6 of course.
getElementbyID will also match against the name attribute in IE, but not other browsers, and IE will select whichever it finds first.
example:
<script>
var foo = document.getElementById('bar');
</script>
....
<input name="bar" type="text" /> //IE will get this element
<span id="bar"> Hello, World! </span> //FF,Safari,Chrome will get this element
There are loads of things, but one trap I used to fall in was that many browsers accepts JSON without quoted names, while ie6 and ie7 does not.
{ name: "Jakob" } // will often work, but not in ie6/ie7
{ "name": "Jakob" } // Better!
Edit: To clarify, this is only an issue when actual JSON is required, as opposed to an object literal. JSON is a subset of the object literal syntax and is meant as a data exchange format (like XML) which is why it's designed to be pickier.
Differing JavaScript Support
IE doesn't support (most of) the extensions added to JavaScript since 1.5.
New in 1.6
- Array Methods -
indexOf(),lastIndexOf(),every(),filter(),forEach(),map(),some() for each ... in- iterates values instead of property names.
New in 1.7
- Destructuring assignment --
[a,b] = [1,2] - Iterators and Generators
letandyeild
New in 1.8
- Array Methods -
reduce(),reduceRight() - Shortcuts for defining functions.
Some of these things require you to specify a version number of JavaScript to run under (which will break under IE), but some things like [1,2,3].indexOf(2) might not seem like that big a deal, until you try to run it in IE
The major differences between JavaScript in IE and JavaScript in modern browsers (ex, Firefox) can be attributed to the same reasons behind the differences in CSS/(X)HTML cross-browser. Back in the day there was no de facto standard; IE/Netscape/Opera fought a turf war, implementing most of the specs, but also omitting some as well as making proprietary specs to gain advantages over each other. I could go on at length, but lets skip ahead to the release of IE8: JavaScript was avoided/scorned for years, and with the rise of FF and the contempt of webcomm, IE chose to focus mostly on advancing their CSS from IE6 on. And basically left DOM support behind. IE8's DOM support might as well be IE6's, which rolled out in 2001....so IE's DOM support is nearly a decade behind modern browsers. If you are having JavaScript discrepancies particular to a layout engine, you're best bet is to attack it the same way we took on the CSS problems; Targeting that browser. DON'T USE BROWSER SNIFFING, use feature detection to sniff out your browser/it's level of DOM support.
JScript is not IE's own implementation of ECMAScript; JScript was IE's answer to Netscape's JavaScript, both of which came into existence before ECMAScript.
As far as type attributes on the script element, type="text/javascript" is the default standard (at least in HTML5), so you don't ever need a type attribute unless your script isn't JavaScript.
As far as IE not supporting innerHTML...innerHTML was invented by IE and is still today NOT a DOM standard. Other browsers have adopted it because it's useful, which is why you can use it cross-browser. As far as dynamically changing tables, MSDN says "because of the specific structure required by tables, the innerText and innerHTML properties of the table and tr objects are read-only." I don't know how much of that was true initially, but clearly the modern browsers have figured it out while dealing with the complexities of table-layout.
I highly recommend reading PPK on JavaScript Jeremy Keith's DOM Scripting Douglas Crockford's JavaScript: The Good Parts and Christian Hellman's Beginning JavaScript with DOM Scripting and Ajax to get a strong grasp on JavaScript.
As far as Frameworks/Libraries are concerned, if you don't have a strong grasp on JavaScript yet, you should avoid them. 2 years ago I fell into the jQuery trap, and while I was able to pull off magnificent feats, I never learned a damn thing about coding JavaScript properly. In hindsight, jQuery is a wicked awesome DOM Toolkit, but my failure to learn proper closures, prototypical inheritance, etc., not only set my personal knowledge back, my work starting taking huge performance hits because I had no clue wtf I was doing.
JavaScript is the language of the browser; if you are client-side/front-end engineer it is of upmost importance that you command JavaScript. Node.js is bringing JavaScript full tilt, I see immense strides taken daily in its development; Server-side JavaScript will be a standard in the very near future. I'm mentioning this to further emphasize just how important JavaScript is now and will be.
JavaScript is going to make more waves than Rails.
Happy Scripting!
Some native objects are read-only without really seeming to be so (you can write to them but it has no effect). For example, a common advanced javascript is based on extending the Element object by overriding system methods, say, changing Element.prototype.appendChild() to do more than appending a child node - say, initialize it with parent's data. This will fail silently on IE6 - original method will be invoked on new objects instead of the new one.
Some browsers (I don't remember which now) consider newlines between HTML tags to be text nodes, while others don't. So childNodes(n), nextSibling(), firstChild() and the like will behave very differently.
Trailing commas in arrays and object literals used to be a problem, haven't checked recently (meaning IE8):
var a = [ 1, 2, 3, ];
var o = { a:1, b:2, c:3, };
This would cause some extra code when generating such structures server side.
I just found one this morning, a co-worker set the script tag as: <script type="application/javascript"> because his ide autocomplete had that before "text/javascript"
But, it turns out that IE just ignores the entire script if you use "application/javascript", you need to use "text/javascript"
I found an odd quirk just the other day with Internet Explorer. I was using YUI, and replacing the contents of a table body () by setting the innerHTML
Y.one('#elementId').set('innerHTML', '<tr><td>Column 1</td></tr>');
This would work in all browsers EXCEPT IE. I finally discovered that you couldn't replace the innerHTML of a table in IE. I had to create a node using YUI and then append that node.
var myNode = Y.node.create('<tr><td>Column 1</td></tr>');
Y.one('#elementId').append(myNode);
That was a fun one to figure out!
Extra commas and missing commas used to be usual problem on IE while it works smoothly on FF.
IE is very strict about missing ";" so is usually that.
For what it's worth I just came across this nasty issue in < IE9
say you have some html like this:
<table><tr><td>some content...</td></tr></table>
and for some reason (I had a good one) you need to retrieve all HTML in the table before the last closing TR you might try something like this:
var tableHtml = document.getElementById('thetable').innerHTML;
var fragment = tableHtml.substring(0, tableHtml.lastIndexOf('</tr>'));
< IE9 will return nothing (-1) here because the tableHtml variable contains all html tags upper-cased and lastIndexOf is case sensitive. To get around this I had to throw in a toLowerCase() before lastIndexOf.
IE is not a modern browser and only follows ECMAScript loosely.
You mentioned jQuery which I'm less familiar with but for general reference, and specifically with Prototype, one thing to watch out for is reserved words / method names in IE. I know what often gets me is things like:
someElement.appendChild(new Element('label',{ **for**: someInput.id }).update( someLabelText );
(new Element(tagName, propertyHash) is how new elements are created in Protitype). In IE, for: must be 'for':, because for is a reserved word. Which makes complete sense -- but FireFox will tolerate this.
Another example:
someElement.wrap('div').addClassName('someClass')
(the wrap method in Prototype wraps one element in another) -- In IE, on textareas, wrap is a property, and Element.wrap() must be used instead of the methodized version
These are two examples which come to mind from my experience. They're based on prototype but the core issue isn't: Watch out for any methods/labels/identifiers which IE considers reserved words but FireFox or Safari will tolerate.
The fact is that IE doesn't support JavaScript... It supports his own implementation of ECMAScript : JScript... which is kind of different...
Using console.log() for outputting errors to the Firefox error console will cause your scripts to fail in IE. Got to remember to take those out when you test in IE.
'Programming' 카테고리의 다른 글
| openssl verify를 사용하여 인증서 체인 확인 (0) | 2020.08.05 |
|---|---|
| C #에서 Select와 ConvertAll의 차이점 (0) | 2020.08.05 |
| ASP.Net 오류 : " 'foo'형식이"temp1.dll "과"temp2.dll에 모두 있습니다 " (0) | 2020.08.05 |
| 파이썬 그룹 (0) | 2020.08.05 |
| 테스트 목적으로 브라우저에서 CSS를 비활성화하는 방법 (0) | 2020.08.05 |