You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
The browser allows us to track the loading of external resources -- scripts, iframes, pictures and so on.
3
+
আমরা এক্সটার্নাল রিসোর্স লোডিং স্টেটও ট্র্যাক করতে পারি, যেমন scripts, iframes, pictures ইত্যাদি।
4
4
5
-
There are two events for it:
5
+
এজন্য দুটি ইভেন্ট আছে:
6
6
7
-
-`onload` -- successful load,
8
-
-`onerror` -- an error occurred.
7
+
-`onload` -- লোড সাকসেস হলে,
8
+
-`onerror` -- যদি কোন এরর সংগঠিত হয়।
9
9
10
-
## Loading a script
10
+
## script লোডিং
11
11
12
-
Let's say we need to load a third-party script and call a function that resides there.
12
+
মনে করুন আমরা একটি থার্ড-পার্টি লাইব্রেরী লোড করব এবং ঐ লাইব্রেরীর কোন একটি ফাংশন কল করব।
13
13
14
-
We can load it dynamically, like this:
14
+
আমরা এটি ডায়নামিক্যালি লোড করব, এভাবে:
15
15
16
16
```js
17
17
let script =document.createElement('script');
@@ -20,42 +20,42 @@ script.src = "my.js";
20
20
document.head.append(script);
21
21
```
22
22
23
-
...But how to run the function that is declared inside that script? We need to wait until the script loads, and only then we can call it.
23
+
...এখন আমরা কিভাবে ফাংশনটি ডিক্লেয়ার করব? এক্ষেত্রে, আমাদের অবশ্যই লাইব্রেরীটি লোড হওয়া পর্যন্ত অপেক্ষা করতে হবে, অন্যথায় আমরা এটিকে কল করতে চাইলে এরর হবে।
24
24
25
25
```smart
26
-
For our own scripts we could use [JavaScript modules](info:modules) here, but they are not widely adopted by third-party libraries.
26
+
আমাদের নিজস্ব script এর জন্য [JavaScript modules](info:modules) ব্যবহার করতে পারি, তবে এখানে আমরা একটি স্বতন্ত্র থার্ড-পার্টি লাইব্রেরী লোড করতে চাচ্ছি।
27
27
```
28
28
29
29
### script.onload
30
30
31
-
The main helper is the `load`event. It triggers after the script was loaded and executed.
31
+
এক্ষেত্রে আমরা `load`ইভেন্ট এর সহায়তা নিতে পারি। কেননা script টি লোড হয়ে এক্সিকিউট হলে `load` ইভেন্টটি ট্রিগার হয়।
So in`onload`we can use script variables, run functions etc.
50
+
সুতরাং আমরা`onload`হ্যান্ডেলারে script টির বিভিন্ন ভ্যারিয়েবল, ফাংশন ব্যবহার করতে পারব।
51
51
52
-
...And what if the loading failed? For instance, there's no such script (error 404) or the server is down (unavailable).
52
+
...যদি আমাদের কোন কারণে লোডিং না হয় তাহলে কি হবে? মনে করুন, আমরা কোন একটি ভুল রিসোর্স লোড করতে চাচ্ছি (error 404) অথবা রিমোট সার্ভারটি ডাউন হয়েছে (unavailable)।
53
53
54
54
### script.onerror
55
55
56
-
Errors that occur during the loading of the script can be tracked in an`error`event.
56
+
এক্ষেত্রে script কোন কারণে লোড না হলে`error`ইভেন্টটি ট্রিগার হয়।
57
57
58
-
For instance, let's request a script that doesn't exist:
58
+
যেমন, এখানে আমরা একটি script লোড করতে চাচ্ছি যেটি একটি 404 পেজ:
59
59
60
60
```js run
61
61
let script =document.createElement('script');
@@ -69,19 +69,19 @@ script.onerror = function() {
69
69
*/!*
70
70
```
71
71
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.
72
+
দয়া করে মনে রাখুন এখানে আমরা HTTP error এর বিস্তারিত জানতে পারব না। যেকোন কারণে এরর সংগঠিত হতে যেমন 404 বা 500 অথবা অন্য যেকোন কারণে। তবে এটি শুধু `error` ইভেন্টটি ট্রিগার করে।
73
73
74
74
```warn
75
-
Events `onload`/`onerror` track only the loading itself.
75
+
`onload`/`onerror` ইভেন্ট শুধুমাত্র লোডিং স্টেটকে ট্র্যাক করতে পারে।
76
76
77
-
Errors that may occur during script processing and execution are out of scope for these events. That is: if a script loaded successfully, then `onload` triggers, even if it has programming errors in it. To track script errors, one can use `window.onerror` global handler.
77
+
তবে script এর মধ্যে কোন এরর থাকা সত্বেও script লোড হতে পারে। script এর মধ্যে কোন এরর থাকা সত্বেও `load` ইভেন্ট টি ট্রিগার হবে। যদি আমরা script এর error ট্র্যাক করতে চায় তাহলে `window.onerror` গ্লোবাল হ্যান্ডেলারের সহায়তা নিতে পারি।
78
78
```
79
79
80
-
## Other resources
80
+
## অন্যান্য রিসোর্স
81
81
82
-
The `load` and `error` events also work for other resources, basically for any resource that has an external `src`.
82
+
অন্যান্য যেসব এলিমেন্ট এক্সটার্নাল রিসোর্স লোড করতে পারে তাদের জন্যও `load` এবং `error` কাজ করবে।
83
83
84
-
For example:
84
+
যেমন:
85
85
86
86
```js run
87
87
let img =document.createElement('img');
@@ -96,30 +96,26 @@ img.onerror = function() {
96
96
};
97
97
```
98
98
99
-
There are some notes though:
99
+
তবে কিছু ব্যতিক্রম বৈশিষ্ট্য আছে:
100
100
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 `(*)`.
102
-
-For `<iframe>`, the `iframe.onload` event triggers when the iframe loading finished, both for successful load and in case of an error.
101
+
-বেশিরভাগ রিসোর্স লোড হওয়া শুরু করে যখন তাদের document এ সংযুক্ত করা হয় তবে `<img>`ব্যতিক্রম। এটি লোড শুরু করবে যখনি src দেখবে `(*)`।
102
+
-`<iframe>` এর জন্য, error বা load উভয়ের জন্য লোডিং সম্পন্ন হলে `iframe.onload` ট্রিগার হবে।
103
103
104
-
That's for historical reasons.
104
+
## Crossorigin পলিসি
105
105
106
-
## Crossorigin policy
106
+
ওয়েবের একটি নিয়ম আছে: এক সাইটের script অন্য সাইটের কন্টেন্ট কে অ্যাক্সেস করতে পারে না। যেমন `https://facebook.com` এর script ইউজারের মেইলবক্সের `https://gmail.com` কন্টেন্ট অ্যাক্সেস করতে পারবে না।
107
107
108
-
There's a rule: scripts from one site can't access contents of the other site. So, e.g. a script at `https://facebook.com` can't read the user's mailbox at `https://gmail.com`.
108
+
আর সুনির্দিষ্টভাবে বলতে গেলে একটি অরিজিন (domain/port/protocol triplet) অন্য অরিজিনের কন্টেন্ট অ্যাক্সেস করতে পারবে না। যদিও বা তারা যদি ঐ সাইটের সাবডোমেন হয়।
109
109
110
-
Or, to be more precise, one origin (domain/port/protocol triplet) can't access the content from another one. So even if we have a subdomain, or just another port, these are different origins with no access to each other.
110
+
যদি আমরা অন্য একটি ডোমেনের script ব্যবহার করি, এবং যদি ঐ স্ক্রিপ্টে কোন এরর সংগঠিত হয়, তাহলে এরর এর বিস্তারিত জানতে পারব না।
111
111
112
-
This rule also affects resources from other domains.
113
-
114
-
If we're using a script from another domain, and there's an error in it, we can't get error details.
115
-
116
-
For example, let's take a script `error.js` that consists of a single (bad) function call:
112
+
যেমন, আমাদের একটি স্ক্রিপ্ট আছে `error.js` যা একটি অসংজ্ঞায়িত ফাংশনকে কল করে:
117
113
```js
118
114
// 📁 error.js
119
115
noSuchFunction();
120
116
```
121
117
122
-
Now load it from the same site where it's located:
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.
154
+
মেসেজটি ব্রাউজারভেদে ভিন্ন হতে পারে, তবে এরর মেসেজের বিস্তারিত দেখব না, কেননা ভিন্ন ডোমেনের কন্টেন্ট আমরা অ্যাক্সেস করতে পারব না।
159
155
160
-
Why do we need error details?
156
+
কেন আমাদের বিস্তারিত এরর মেসেজ প্রয়োজন হতে পারে?
161
157
162
-
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 not much information about errors in it, as we've just seen.
158
+
অনেক সার্ভিস আছে (এমনকি আমরা নিজেরাও বানাতে পারি) যারা `window.onerror` এর মাধ্যমে এরর ট্র্যাক করে এবং তা অ্যানালাইসিসের জন্য সংরক্ষন করে। এটি ইউজারদের দ্বারা লাইভে সংগঠিত হওয়া এরর সমূহ ট্র্যাক করতে সহায়তা করে। তবে যদি ভিন্ন অরিজিন হতে এরর সংগঠিত হয় তাহলে তা আমরা ট্র্যাক করতে পারব না।
163
159
164
-
Similar cross-origin policy (CORS) is enforced for other types of resources as well.
160
+
অন্যান্য রিসোর্সের জন্য cross-origin policy (CORS) প্রয়োগ করা হয়।
165
161
166
-
**To allow cross-origin access, the `<script>`tag needs to have the `crossorigin` attribute, plus the remote server must provide special headers.**
162
+
**cross-origin অ্যাক্সেসের জন্য, `<script>`ট্যাগে `crossorigin` নামের বিশেষ অ্যাট্রিবিউটযুক্ত করতে হবে, এবং রিমোর্ট সার্ভার হতে একটি বিশেষ হেডার প্রভাইড করবে**
2.**`crossorigin="anonymous"`** -- access allowed if the server responds with the header `Access-Control-Allow-Origin`with `*`or our origin. Browser does not send authorization information and cookies to remote server.
166
+
1.**`crossorigin`অ্যাট্রিবিউটব্যতীত** -- অ্যাক্সেস বাধাপ্রাপ্ত হবে।
167
+
2.**`crossorigin="anonymous"`** -- যদি রিমোট সার্ভার `Access-Control-Allow-Origin`এর মান `*`রেস্পন্ড করে তাহলে অ্যাক্সেস হবে। এক্ষেত্রে ব্রাউজার সার্ভারে কোন ধরণের অথরাইজেশন ইনফরমেশন বা cookies সেন্ড করবে না।
172
168
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.
173
169
174
170
```smart
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.
171
+
cross-origin অ্যাক্সেস নিয়ে আরো বিস্তারিত <info:fetch-crossorigin>। এখানে নেটওয়ার্ক রিক্যুয়েস্টে `fetch` মেথড কিভাবে কাজ করে তা বর্ণনা করা হয়েছে, এক্ষেত্রে এটিও অনুরুপ কাজ করে।
176
172
177
-
Such thing as "cookies" is out of our current scope, but you can read about them in the chapter <info:cookie>.
173
+
যদিও আমরা এখনো "cookies" সম্পর্কে জানিনা, তবে আপনি চাইলে এই অধ্যায়ে বিস্তারিত জানতে পারবেন <info:cookie>।
178
174
```
179
175
180
-
In our case, we didn't have any crossorigin attribute. So the cross-origin access was prohibited. Let's add it.
176
+
উপরের উদাহরণে আমরা কোন `crossorigin` অ্যাট্রিবিউট সংযুক্ত করিনি। তাই cross-origin অ্যাক্সেস বাধাপ্রাপ্ত হবে। চলুন এটি যোগ করি।
181
177
182
-
We can choose between`"anonymous"`(no cookies sent, one server-side header needed) and `"use-credentials"`(sends cookies too, two server-side headers needed).
178
+
`crossorigin` এর ভ্যালু হিসেবে`"anonymous"`বা `"use-credentials"` সেট করতে পারি। এক্ষেত্রে `"anonymous"` এর জন্য কোন cookies সেন্ড হবে না এবং শুধুমাত্র সার্ভার-সাইড হেডার প্রয়োজন হবে অন্যদিকে `"use-credentials"`এর জন্য cookies সেন্ড হবে ও অরিজিন এবং সার্ভার উভয়েই হেডার প্রয়োজন হবে।
183
179
184
-
If we don't care about cookies, then `"anonymous"` is the way to go:
180
+
যদি আমাদের cookies মূখ্য না হয়, তাহলে `"anonymous"` সেট করলেই হবে:
181
+
182
+
এখন, ধরে নিন রিমোট সার্ভার আমাদের সার্ভার `Access-Control-Allow-Origin` হেডারটি প্রদান করে। এখন আমরা রিমোট সার্ভারের এরর এর বিস্তারিত জানতে পারব।
0 commit comments