Những sai lầm phổ biến cần tránh khi mã hóa javascript cho Internet Explorer là gì?

Question

Tôi sắp bắt đầu mã hóa một trang web mới, có nhiều trang javascript, nhưng trước khi tôi bắt đầu, tôi muốn giảm thiểu thời gian gỡ lỗi của mình trong Internet Explorer bằng cách biết trước những điều kỳ quặc là gì. Tôi không có ý định lo lắng quá nhiều về IE6.

Những sai lầm/khác biệt phổ biến cần tránh trong mã javascript hoạt động tốt trong các trình duyệt khác, nhưng phá vỡ trong Internet Explorer là gì?

Answer 1

Internet Explorer.

Ok nghiêm túc hơn, câu trả lời dấu phẩy sau trong câu trả lời khác là tốt. Sử dụng một khuôn khổ có thể giúp đỡ, nhưng nó không phải là một nắm bắt tất cả. Bạn sẽ phải đối phó với các vấn đề trình duyệt chéo. Vì vậy, hãy chắc chắn rằng bạn kiểm tra trong tất cả các phiên bản mà bạn quan tâm.

Answer 2

Sử dụng khung như jQuery hoặc Prototype và bạn sẽ không cần phải lo lắng về điều đó.

CHỈNH SỬA:

Tôi nên làm rõ. Bạn sẽ có ít hơn rất nhiều để lo lắng về. Chẳng hạn như:

• ActiveXObject vs XMLHttpRequest
• attachEvent vs addEventListener

Danh sách item-

Answer 3

Hãy nhận biết về cách Internet Explorer xử lý phân tích cây dom và chuyển hướng, một đặc biệt, đó cũng tồn tại khi phân tích cú pháp httpObjects nói chung:

• xmlNode.textContent không trả lại bất cứ điều gì trong internet explorer
• xmlNode.firstChild.nodeValue hoặc cái gì đó trả về giá trị nút phải được sử dụng

-

Answer 4

Dưới đây là một tinh tế một: nếu trang web của bạn có nhiều khung (hoặc iframe), và bạn đã có mã Javascript giao tiếp giữa các khung hình đôi khi, IE (6 và 7, không chắc chắn về 8 và 9) là rất cầu kỳ về "dòng dõi" của các đối tượng Javascript, thậm chí những cái không có bất kỳ tham chiếu DOM nào. Điều đó có nghĩa là nếu bạn giao tiếp đối tượng Javascript của hầu hết mọi loại (chuỗi và số thường là OK, nhưng ngay cả trường hợp Ngày đã gây ra cho tôi các vấn đề trong quá khứ) từ khung này sang khung kia, nếu tại một số thời điểm sau, nguồn khung được cập nhật với một trang mới, trang đích sẽ nhận được một ngoại lệ nếu nó cố gắng gây rối với đối tượng truyền thông đó. Firefox là khá êm dịu về điều đó loại điều, nhưng khi IE rác thu thập các trang cũ, nó sau đó không giống như tài liệu tham khảo cho các đối tượng Javascript mà trang tạo ra.

Answer 5

Xem xét các khác biệt nhỏ như cách biên giới iframe được xử lý (How to Remove an IFrame border in Javascript).

Tôi đoán internet-explorer tag sẽ cung cấp cho bạn nhiều ví dụ hay.

Answer 6

Nếu bạn chỉ định trình xử lý sự kiện trực tiếp qua javascript, event sẽ không phải được cung cấp tự động.

myElement.onclick = function(e) { 
    alert(typeof e); // undefined 
} 

cách khắc phục là kéo window.event.

myElement.onclick = function(e) { 
    e = e || window.event; 
    alert(typeof e); // this is ok now 
} 

nếu bạn là người xử lý sự kiện trực tiếp trên phần tử, bạn có thể cung cấp tham chiếu event theo cách thủ công.

<input type="text" onclick="myMethod(event);"></input> 

đây là trình duyệt chéo và tốt, nếu bạn phải đi theo tuyến đường đó.

sử dụng attachEvent để đặt trình xử lý sự kiện cung cấp đối tượng event làm tham số cho phương pháp một cách tự động.

Answer 7

Sai lầm phổ biến nhất khi viết một trang web có hỗ trợ IE là quên kiểm tra trong mọi phiên bản.

Bạn cần đảm bảo tất cả mã của mình hoạt động trong IE6 (nếu bạn định hỗ trợ nó), IE7, IE8 và IE8-trong-IE7-mode. Và cũng là IE9 (hiện đang trong giai đoạn thử nghiệm).

Có một vài phím tắt để kiểm tra nhiều phiên bản của IE, nhưng lưu ý rằng chúng không phải lúc nào cũng cung cấp kết quả tương tự như những gì người dùng thực sẽ thấy; cách duy nhất để chắc chắn là thực sự thử nghiệm nó trong các phiên bản thực của IE, bất kể nó đau đến mức nào. chuỗi

Answer 8

CONCATENATE với +

var str=""; 
for (var i = 0; i < max; ++i) { 
    str += somefunction(i); 
} 

On MSIE nó có thể mất vài phút. Tôi đã từng làm một thử nghiệm nơi Opera một Firefox nơi hoàn thành sau một vài giây, nhưng MSIE đã không hoàn thành sau 20 phút!

Tuy nhiên, nếu sử dụng một mảng, MSIE là nhanh:

var str = []; 
for (var i = 0; i < max; ++i) { 
    str.push(somefunction(i)); 
} 
str = str.join(""); 

Xin lỗi, nhưng không thể tìm thấy bài tôi thực hiện về nó ngay bây giờ.

Answer 9

IE không hỗ trợ các sự kiện tùy chỉnh, chỉ các sự kiện DOM (có ngay cả trong 9 beta).

Answer 10

Công cụ JS của IE, trước IE9, là chậm. Thực sự, rất chậm. Hàng trăm đến hàng nghìn lần chậm hơn so với việc triển khai Mozilla và Webkit.

Điều này hiển thị ở độ phân giải tối thiểu của bộ hẹn giờ hoạt ảnh, thời gian để hoàn thành các loại và (như @some chỉ ra) nối chuỗi không có thật và bất kỳ nơi nào khác mà hiệu suất của trang web của bạn bị giới hạn bởi tốc độ của chính động cơ JS.

Answer 11

IE (8 trở xuống, không chắc chắn về 9) không thể xử lý việc tiếp cận các nhân vật trong chuỗi như mảng, như trong:

var str = 'abc'; 
var c = str[2]; 
alert(c) 

Trong hầu hết các trình duyệt này sẽ cảnh báo 'c', nhưng IE Cảnh báo 'undefined' . Vì lý do đa trình duyệt, bạn nên sử dụng hàm charAt:

var str = 'abc'; 
var c = str.charAt(2); 
alert(c) 

Điều này cũng cảnh báo 'c' trong IE.

Sự khác biệt nhỏ là dấu phẩy ở các đối tượng và mảng. Đây là hợp lệ trong hầu hết các trình duyệt, nhưng đặt ra lỗi trong IE:

ar = [1,2,3,] 

và cũng

ob = {name:'janet', surname:'walker',}

mà có thể được khá khó chịu nếu bạn không biết về nó. Cả hai vấn đề này có lẽ là một cái gì đó tôi chạy thường xuyên bởi vì tôi đang sử dụng để trăn, nhưng nó vẫn còn giá trị tìm ra cho.

Answer 12

Nếu bạn đang cố gắng đo lường thời gian mất thời gian, bạn nên biết rằng độ phân giải thời gian chỉ khoảng 15ms trong IE, trong đó 1ms trong FF, Chrome và Opera.

Bạn có thể kiểm tra điều này cho mình với mã này:

var end,start = new Date().getTime(); //Gets number of milliseconds since epoch 
while((end = new Date().getTime()) === start); //Wait for the time to change 
alert(end-start); // Shows 1 in FF, Chrome and Opera, but 15 or 16 in MSIE 

Nó đã được như thế này cho các lứa tuổi và vẫn áp dụng cho MSIE8 nhưng không phải là phổ biến kiến ​​thức. lincolnk được liên kết với a blog post by John Resig từ ngày 12 tháng 11 năm 2008 trong một nhận xét ở trên. Tôi không thể giúp tôi cười một chút khi tôi đọc nó, bởi vì tôi đã biết nó trong nhiều năm, trở lại khi Netscape là trình duyệt phổ biến.

Khi tôi nghĩ về nó, tôi có một trí nhớ rất mờ rằng Netscape từ đầu cũng có độ phân giải thấp, có thể bằng cách đọc thời gian hệ thống được cập nhật 18,2 lần mỗi giây, nhưng sau đó thay đổi nó. độ phân giải. Tuy nhiên, vì điều này đáng lẽ đã xảy ra khoảng 15 năm trước, tôi không chắc nó có chính xác không và tôi sẽ không cố chứng minh điều đó.

Đối với khả năng đọc Tôi đang sử dụng getTime ở trên thay vì một nhà điều hành unary

Answer 13

IE 7/8 không hiểu console.log/dir trừ giao diện điều khiển cửa sổ mở ra. Điều này có thể dễ dàng phá vỡ JS của bạn nếu bạn để lại bất kỳ trong môi trường prod. Luôn có

if(window.console) 
    console.log('Hello World')