Skip to content

Commit 4c9c943

Browse files
authored
Merge pull request #1484 from Ghost-017/patch-6
minor
2 parents ebd69e2 + e8d86d9 commit 4c9c943

File tree

1 file changed

+11
-11
lines changed

1 file changed

+11
-11
lines changed

2-ui/5-loading/03-onload-onerror/article.md

+11-11
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# Resource loading: onload and onerror
22

3-
The browser allows to track the loading of external resources -- scripts, iframes, pictures and so on.
3+
The browser allows us to track the loading of external resources -- scripts, iframes, pictures and so on.
44

55
There are two events for it:
66

@@ -49,11 +49,11 @@ script.onload = function() {
4949

5050
So in `onload` we can use script variables, run functions etc.
5151

52-
...And what if the loading failed? For instance, there's no such script (error 404) or the server or the server is down (unavailable).
52+
...And what if the loading failed? For instance, there's no such script (error 404) or the server is down (unavailable).
5353

5454
### script.onerror
5555

56-
Errors that occur during the loading of the script can be tracked on `error` event.
56+
Errors that occur during the loading of the script can be tracked in an `error` event.
5757

5858
For instance, let's request a script that doesn't exist:
5959

@@ -69,12 +69,12 @@ script.onerror = function() {
6969
*/!*
7070
```
7171

72-
Please note that we can't get HTTP error details here. We don't know was it error 404 or 500 or something else. Just that the loading failed.
72+
Please note that we can't get HTTP error details here. We don't know if it was an error 404 or 500 or something else. Just that the loading failed.
7373

7474
```warn
7575
Events `onload`/`onerror` track only the loading itself.
7676
77-
Errors during script processing and execution are out of the scope of these events. To track script errors, one can use `window.onerror` global handler.
77+
Errors during script processing and execution are out of scope for these events. To track script errors, one can use `window.onerror` global handler.
7878
```
7979

8080
## Other resources
@@ -98,7 +98,7 @@ img.onerror = function() {
9898

9999
There are some notes though:
100100

101-
- Most resources start loading when they are added to the document. But `<img>` is an exception. It starts loading when it gets an src `(*)`.
101+
- Most resources start loading when they are added to the document. But `<img>` is an exception. It starts loading when it gets a src `(*)`.
102102
- For `<iframe>`, the `iframe.onload` event triggers when the iframe loading finished, both for successful load and in case of an error.
103103

104104
That's for historical reasons.
@@ -155,15 +155,15 @@ Script error.
155155
, 0:0
156156
```
157157

158-
Details may vary depending on the browser, but the idea is same: any information about the internals of a script, including error stack traces, is hidden. Exactly because it's from another domain.
158+
Details may vary depending on the browser, but the idea is the same: any information about the internals of a script, including error stack traces, is hidden. Exactly because it's from another domain.
159159

160160
Why do we need error details?
161161

162162
There are many services (and we can build our own) that listen for global errors using `window.onerror`, save errors and provide an interface to access and analyze them. That's great, as we can see real errors, triggered by our users. But if a script comes from another origin, then there's no much information about errors in it, as we've just seen.
163163

164164
Similar cross-origin policy (CORS) is enforced for other types of resources as well.
165165

166-
**To allow cross-origin access, the `<script>` tag needs to have `crossorigin` attribute, plus the remote server must provide special headers.**
166+
**To allow cross-origin access, the `<script>` tag needs to have the `crossorigin` attribute, plus the remote server must provide special headers.**
167167

168168
There are three levels of cross-origin access:
169169

@@ -172,7 +172,7 @@ There are three levels of cross-origin access:
172172
3. **`crossorigin="use-credentials"`** -- access allowed if the server sends back the header `Access-Control-Allow-Origin` with our origin and `Access-Control-Allow-Credentials: true`. Browser sends authorization information and cookies to remote server.
173173

174174
```smart
175-
You can read more about cross-origin access in the chapter <info:fetch-crossorigin>. It describes `fetch` method for network requests, but the policy is exactly the same.
175+
You can read more about cross-origin access in the chapter <info:fetch-crossorigin>. It describes the `fetch` method for network requests, but the policy is exactly the same.
176176
177177
Such thing as "cookies" is out of our current scope, but you can read about them in the chapter <info:cookie>.
178178
```
@@ -181,7 +181,7 @@ In our case, we didn't have any crossorigin attribute. So the cross-origin acces
181181

182182
We can choose between `"anonymous"` (no cookies sent, one server-side header needed) and `"use-credentials"` (sends cookies too, two server-side headers needed).
183183

184-
If we don't care about cookies, then `"anonymous"` is a way to go:
184+
If we don't care about cookies, then `"anonymous"` is the way to go:
185185

186186
```html run height=0
187187
<script>
@@ -192,7 +192,7 @@ window.onerror = function(message, url, line, col, errorObj) {
192192
<script *!*crossorigin="anonymous"*/!* src="https://cors.javascript.info/article/onload-onerror/crossorigin/error.js"></script>
193193
```
194194

195-
Now, assuming that the server provides `Access-Control-Allow-Origin` header, everything's fine. We have the full error report.
195+
Now, assuming that the server provides an `Access-Control-Allow-Origin` header, everything's fine. We have the full error report.
196196

197197
## Summary
198198

0 commit comments

Comments
 (0)