Video học lập trình mỗi ngày

Đôi khi chúng ta cũng phải cần sử dụng một resource của third-party như images, iframes... Như thế này:

let script = document.createElement('script');
script.src = "my.js";

document.head.append(script);

Nhưng điều quan trọng làm sao chúng ta biết được nó sẽ được thực thì thành công hay có lỗi. Tôi lấy ví dụ, chúng ta không hợp tác nữa hay không trả tiền cho services đó thì nó ngắt, chúng ta phải làm thế nào trong thế chủ động trong khi nhậu or ngủ...

Đó đó hai events đó là onload và onerror sẽ giúp chúng ta thực hiện ý tưởng này.

onload in javascript

Sau khi một resource được thực thi thì ta sẽ sử dụng event onload để sử dụng các biến or function của file trên, ví dụ:

let script = document.createElement('script');

// can load any script, from any domain
script.src = "https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.3.0/lodash.js"
document.head.append(script);

script.onload = function() {
  // the script creates a variable "_"
  alert( _.VERSION ); // shows library version
};

Câu lệnh trên cho chúng ta thấy, khi file lodash.js được thực thi xong thì chúng ta có thể truy cập xem version của chúng là bao nhiêu thông qua event onload.

Vậy nếu nó bị lỗi or giả sử là 404 thì sao. Hãy xem tiếp ví dụ dưới đây

onerror in javascript

Trong quá trình diễn ra khi thực thi file, thì chúng ta cũng có thể sử dung onerror để thực hiện việc kiểm tra lỗi trong quá trinh tải resource. Ví dụ:

let script = document.createElement('script');
script.src = "https://example.com/404.js"; // no such script
document.head.append(script);

script.onerror = function() {
  alert("Error loading " + this.src); // Error loading https://example.com/404.js
};

Kết luận

Thật ra hai events onload và onerror không mới nhưng ít có cơ hội cho chúng ta thực hiện. Nhưng một khi đã làm việc trong một công ty có tính kỷ luật cao thì chúng ta cũng nên làm quen với những việc đó. Ngoài ra, bạn nên tham khảo thêm một số trường hợp khí sử dụng hai sự kiện trên.

Ref: javascript.info