Đang cập nhật sở hữu nội dung giả phần tử khi HTMLElement.dataset cập nhật

Question

Tôi đang sử dụng các chức năng CSS attr để tự động liên kết các giá trị của một thuộc tính data-* đến nội dung của một yếu tố giả:

body::after { content: attr(data-after) } 

Tôi sau đó thường xuyên cập nhật rằng thuộc tính dữ liệu thông qua các tài sản HTMLElement.dataset:

setInterval(function() { 
    document.body.dataset.after = new Date; 
}, 1000); 

tôi nhận thấy rằng trong Internet Explorer, mặc dù tất cả các tính năng này được hỗ trợ, các phần tử giả không có sở hữu nội dung của nó được cập nhật để r eflect những thay đổi gần đây nhất.

Tôi đã xây dựng một câu đố để chứng minh sự cố. Bạn có thể xem nó online here.

Tôi có thể làm gì để khắc phục giới hạn này?

Answer 1

Có một lỗi/giới hạn đã biết trong Internet Explorer ngay bây giờ khiến nguyên tố giả thành không được cập nhật khi cập nhật bộ dữ liệu. Một đủ công việc xung quanh là thay vì cập nhật các thuộc tính với cũ (và do đó phạm vi rộng hơn được hỗ trợ) setAttribute phương pháp:

setInterval(function() { 
    // Work-around for IE bug: http://stackoverflow.com/q/28031707 
    document.body.setAttribute("data-after", new Date); 
}, 1000); 

Bạn có thể see the results here.

Đã xảy ra lỗi trong nội bộ vấn đề này và các nhóm đối tượng địa lý thích hợp nên đánh giá vấn đề này trong một cuộc hẹn sắp tới. Ngay khi có thể, chúng tôi sẽ phân bổ chu kỳ dev để giải quyết vấn đề.

Answer 2

IE có xu hướng có nhiều vấn đề.

jQuery là thư viện JavaScript phổ biến được tạo bằng cách giải quyết các vấn đề liên quan đến trình duyệt chéo. Bạn có thể sử dụng chức năng của jQuery .attr() để thiết lập các thuộc tính dữ liệu của bạn, như vậy:

setInterval(function() { 
    $('body').attr('data-after', new Date()); 
}, 1000); 

Xem: http://api.jquery.com/attr/

Ngoài ra, bạn có thể nhìn vào sử dụng phương pháp .data([key], [value]) jQuery.

Lưu ý: Hãy thận trọng khi sử dụng ngày với Internet Explorer, theo kinh nghiệm của tôi, nó không thể phân tích cú pháp một số định dạng ngày tháng ISO 8601 phổ biến. Tôi muốn đề xuất một thư viện khác để xử lý ngày và giờ: moment.js