Khắc phục lỗi "Operation aborted" của IE

VnTim™ ^-^ Hôm trước sau khi làm xong giao diện cho Hỗn tạp, 1 người bạn bảo tôi là vào 1 bài viết của Hỗn tạp bằng IE 6 hoặc 7 đều không được, có lỗi "Operation aborted". Tôi cũng không để ý lắm, cứ nghĩ là máy đó bị gì thôi, chứ tôi thử vào bằng các trình duyệt khác đều ổn.

Hôm nay vô tình đọc được 1 comment tại blog của Disqus (nền tảng comment mà Hỗn tạp đang dùng), nói rằng đây là 1 bug của IE 6 và 7 do sử dụng hàm Javascript appendChild, tôi mới bắt đầu tìm hiểu kỹ càng hơn.

Thông tin ở các nơi mà tôi tìm trên mạng đều chủ yếu phản ánh lỗi và sửa lỗi kiểu mì ăn liền chứ không có phân tích rõ ràng. Chỉ có chính trang Support của Microsoft mới mô tả đầy đủ và chi tiết.

Nguyên nhân lỗi

Lỗi này xảy ra khi IE 6, 7 không thể hiển thị được đúng 1 phần tử nào đó trong trang web. Chi tiết hơn, lỗi xảy ra khi có 1 phần tử A chứa 1 script, script này cố gắng làm thay đổi nội dung của phần tử cha của A. Thông thường, sự thay đổi nội dung phần tử cha của A được thực hiện thông qua các hàm Javascript appendChild và innerHTML.

Nói vậy hơi khó hiểu 1 chút, chúng ta xem ví dụ sau:

<html>
<body>
    <div>
        <script type="text/Javascript">
            document.body.innerHTML+="sample text";
        </script>
    </div>
</body>
</html>

Như ta thấy, đoạn script trên nằm trong phần tử div (phần tử A) và nó cố gắng làm thay đổi nội dung của phần tử body (phần tử cha của A), nên gây ra lỗi.

Đối với blogger chúng ta, thì dạng như thế này rất hay gặp khi bạn muốn bổ sung 1 script vào trang web:

<html>
<body>
    <div>
        ...
        <script type="text/javascript">
        var script = document.createElement('script');
        script.src = '...';
        script.type = 'text/javascript';
        document.body.appendChild(script);
        </script>
    </div>
</body>
</html>

Ở đây script được sinh ra động và được chèn vào body nhờ vào hàm appendChild. Bạn dễ dàng nhận thấy rằng nó cũng có cùng nguyên tắc với VD trước, và do đó, cũng sẽ có lỗi trên IE 6 và 7.

Cách khắc phục lỗi

Cách đơn giản nhất để khỏi gặp lỗi này là nâng cấp IE lên bản 8. Tuy nhiên, đó là vấn đề của người dùng, chúng ta không thể bắt họ thay đổi khi mà ta chưa sửa được lỗi.

Để sửa lỗi này, chúng ta phải tránh không gặp trường hợp 1 script cố gắng thay đổi nội dung của phần tử cha của A (A chứa script). Việc này phải làm bằng tay (tự code lại, hoặc sửa code) theo hướng chuyển script đó ra khỏi phần tử A.

Tốt nhất nên đưa script ra ngoài cùng (tức là chỉ nằm trong thẻ body). Khi đó nếu script có thay đổi nội dung trang web (tức là phần body), thì cũng không "phạm luật" (nên nhớ là body lúc này đóng vai trò là phần tử A, như vậy script chỉ thay đổi A chứ không thay đổi phần tử cha của A)

Trong trường hợp không đưa được script ra ngoài cùng, thì có thể tự tạo thêm 1 thẻ div khác (hoặc bất kì thẻ nào cũng được) ở đúng vị trí cần thay đổi, và để script thay đổi thẻ đó như VD sau:

<html>
  <body>
      <div id="targetContainer"></div>
      <div>
          <script type="text/Javascript">
               document.getElementById('targetContainer').innerHTML+="sample text";
          </script>
      </div>
  </body>
</html>

Như ta thấy, thay vì sửa đổi nội dung của phần tử body (cha của div chứa script), script chỉ sửa đổi phần tử div "anh em", như vậy không "phạm luật" và chạy tốt.

VnTim™ Theo hontap blog

Khắc phục lỗi "Operation aborted" của IE

Nguyên nhân lỗi

Cách khắc phục lỗi

Đăng nhận xét