IE 8: Object không hỗ trợ tài sản hoặc phương pháp 'getElementsByClassName'

Question

Tôi đang sử dụng thanh trượt diapo mà dường như làm việc trong tất cả các trình duyệt khác, ngoại trừ cho internet explorer 8.

Sau khi chạy IE8 trong chế độ gỡ lỗi tôi nhận được các lỗi sau đây:

SCRIPT438: Object doesn't support property or method 'getElementsByClassName' prototype.js, line 5988 character 5

return function(className, parentElement) { 
    return $(parentElement || document.body).getElementsByClassName(className); 
    }; 

SCRIPT438: Object doesn't support property or method 'fireEvent' prototype.js, line 5736 character 7

if (document.createEvent) 
     element.dispatchEvent(event); 
    else 
     element.fireEvent(event.eventType, event); 

    return Event.extend(event); 

tôi đang chạy thanh trượt này trong nền tảng Magento và có vẻ như nguyên mẫu scr ipt trong một có vấn đề. Phiên bản nguyên mẫu sử dụng của nó là 1.7 để các quy tắc có thể khắc phục được bản cập nhật tập lệnh.

Lưu ý: Mặc dù, tôi không gặp một vấn đề hiển thị trong ie9, tôi nhận được lỗi sau:

SCRIPT438: Object doesn't support property or method 'dispatchEvent' prototype.js, line 5734 character 7

if (document.createEvent) 
     element.dispatchEvent(event); 
    else 
     element.fireEvent(event.eventType, event); 

    return Event.extend(event); 

Đây là những kịch bản được yêu cầu cho thanh trượt diapo để làm việc, được tải bằng thẻ tập lệnh trong tiêu đề. Tôi không chắc chắn nhưng có lẽ một số trong những kịch bản được mâu thuẫn với các kịch bản hiện có:

<script type='text/javascript' src='http://www.pixedelic.com/plugins/diapo/scripts/jquery.min.js'></script> 
<script type='text/javascript' src='http://www.pixedelic.com/plugins/diapo/jquery.mobile-1.0rc2.customized.min.js'></script> 
<script type='text/javascript' src='http://www.pixedelic.com/plugins/diapo/jquery.easing.1.3.js'></script> 
<script type='text/javascript' src='http://www.pixedelic.com/plugins/diapo/jquery.hoverIntent.minified.js'></script> 
<script type='text/javascript' src='http://www.pixedelic.com/plugins/diapo/scripts/diapo.js'></script> 

Answer 1

IE8 không not hỗ trợ getElementsByClassName. Tuy nhiên, nó does hỗ trợ querySelectorAll. Vì vậy, tôi đề nghị viết một polyfill bằng cách sử dụng querySelectorAll.

document.getElementsByClassName('foo') 

biến thành

document.querySelectorAll('.foo'); // Prefixed dot. 

Lưu ý rằng Prototype.js deprecates the use of getElementsByClassName in favour of $$ và Element#select.

Khắc phục nhanh cho IE8:

<!--[if IE 8]><script> 
document.getElementsByClassName = 
Element.prototype.getElementsByClassName = function(class_names) { 
    // Turn input in a string, prefix space for later space-dot substitution 
    class_names = (' ' + class_names) 
     // Escape special characters 
     .replace(/[~!@$%^&*()_+\-=,./';:"?><[\]{}|`#]/g, '\\$&') 
     // Normalize whitespace, right-trim 
     .replace(/\s*(\s|$)/g, '$1') 
     // Replace spaces with dots for querySelectorAll 
     .replace(/\s/g, '.'); 
    return this.querySelectorAll(class_names); 
}; 
</script><![endif]--> 

Ghi chú:

• Nó hỗ trợ nhiều tên lớp.
• Nó không hỗ trợ trống ('') tên lớp. Đó là tầm thường để thêm hỗ trợ cho những, nếu bạn muốn.

Demo: http://jsfiddle.net/HL4FL/21/