Câu hỏi Hành vi lạ bên trong IE11


Tôi có hành vi rất lạ với element.innerHTML trong IE11.

Như bạn có thể thấy ở đó: http://pe281.s3.amazonaws.com/index.html, một số riotjs biểu thức không được đánh giá.

enter image description here

Tôi đã theo dõi nó xuống 2 điều:
- dấu euro phía trên nó. Nó được mã hóa là €, nhưng tôi có cùng hành vi với \u20AC hoặc là €. Nó xảy ra với tất cả các ký tự trong phạm vi ký hiệu tiền tệ và một số phạm vi khác. Việc xóa hoặc sử dụng ký tự chuẩn không gây ra sự cố.
- Cách riotjs tạo thẻ và mẫu tùy chỉnh. Về cơ bản nó thực hiện điều này:

var html = "{reward.amount.toLocaleString()}<span>&#8364;</span>{moment(expiracyDate).format('DD/MM/YYYY')}";
var e = document.createElement('div');
e.innerHTML = html;

Trong kết quả e nút, e.childNodes trả về mảng sau:

[0]: {reward.amount.toLocaleString()}
[1]: <span>€</span>
[2]: {
[3]: moment(expiracyDate).format('DD/MM/YYYY')}

Rõ ràng các nút 2 và 3 chỉ nên là một. Có họ chia làm cho bạo loạn không nhận ra một biểu thức để đánh giá, do đó vấn đề.

Nhưng có nhiều hơn: Vấn đề là không nhất quán, và ví dụ không thể được sao chép trên một fiddle: https://jsfiddle.net/5wg3zxk5/4/, trong đó chuỗi html được phân tích cú pháp chính xác.

Vì vậy, tôi đoán câu hỏi của tôi là làm thế nào một số nhân vật cụ thể thay đổi cách element.innerHTML phân tích cú pháp đầu vào của nó? Làm thế nào nó có thể được giải quyết?


28
2017-11-27 16:18


gốc


Tôi không thể tạo lại vấn đề này khi tôi truy cập trang bạn đã liên kết trong câu hỏi của bạn và xem nó trong IE11? Điều này đã được giải quyết chưa? - Nick Zuber
Không giải quyết, nhưng tôi đã sử dụng cách giải quyết (dơ bẩn): không có dấu euro trong HTML nhưng là nội dung của một css :after phần tử giả. Các liên kết là env dàn của chúng tôi, và sửa chữa đã được triển khai. Mặc dù vậy vẫn chưa được giải quyết. - Antoine
Có cách nào chúng tôi có thể tái tạo lỗi này để chúng tôi có thể tìm ra điều gì đang xảy ra không? Kể từ khi bạn vá nó, tôi không chắc chắn làm thế nào để kiểm tra những gì đang xảy ra. - Nick Zuber
Bạn có thể tái tạo vấn đề trên jsfiddle không? Nó có vẻ ổn ở đó (?) - romuleald
Không, không thể tái tạo vấn đề một cách nhất quán. - Antoine


Các câu trả lời:


.childNodes là một mảng được tạo ra (... cũng NodeList) được lấp đầy với ELEMENT_NODE nhưng cũng có thể được lấp đầy bằng: ATTRIBUTE_NODE, TEXT_NODE, CDATA_SECTION_NODE, ENTITY_REFERENCE_NODE, ENTITY_NODE, PROCESSING_INSTRUCTION_NODE, COMMENT_NODE, DOCUMENT_NODE, DOCUMENT_TYPE_NODE, DOCUMENT_FRAGMENT_NODE, NOTATION_NODE, ...

Bạn có thể muốn chỉ các nút từ loại: ELEMENT_NODE  (div và như vậy ..) và cũng có thể TEXT_NODE.

Sử dụng vòng lặp đơn giản để chỉ giữ lại các nút đó .nodeType === Element.ELEMENT_NODE (hoặc chỉ cần so sánh nó với enum của nó là 1).

Bạn cũng có thể sử dụng cách thay thế đơn giản hơn nhiều .children.


1
2017-12-02 01:05



Đó là sửa chữa các triệu chứng, không phải bất kỳ bằng chứng nào về nguyên nhân gốc rễ. Ngoài ra, childNodes không được sử dụng trong mã, nó chỉ để hiển thị vấn đề. - Antoine


Thay thế <br> với <br /> (chúng là các thẻ tự đóng). IE đang cố gắng đóng các thẻ cho bạn. Đó là lý do tại sao bạn đã tăng gấp đôi br thẻ


0
2017-12-02 10:02



Điều này không liên quan gì đến <br>. Xem bản chỉnh sửa của tôi với ví dụ được cập nhật mà không cần br, nhưng vẫn là vấn đề. - Antoine


Tôi nghĩ rằng nó phải là một cái gì đó như thế này:

var html = {reward.amount.toLocaleString()}  + "&euro;<br>" +{moment(expiracyDate).format('DD/MM/YYYY')} + " <br>";
var e = document.createElement('div');
e.innerHTML = html;

Nội dung tôi đã xóa khỏi các trích dẫn dường như là các biến hoặc các nội dung khác chứ không phải là một chuỗi, vì vậy nó không được có trong dấu ngoặc kép.


-2
2017-12-01 22:19



Công cụ đó là một phần của riotjs động cơ templating, do đó, có, nó phải được trong dấu ngoặc kép. - Antoine