-
Notifications
You must be signed in to change notification settings - Fork 0
/
temp.html
96 lines (86 loc) · 3.72 KB
/
temp.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>کار با promise و افزودن عناصر صفحه بصورت پویا</title>
<link href="img/ui/favicon.ico" type="image/x-icon" rel="icon">
<style>
* {
font-family: Verdana, Geneva, Tahoma, sans-serif;
margin: 2rem;
}
</style>
</head>
<body>
<p>این متن جزو صفحه است بقیه اجزاء و عناصر بصورت پویا و غیرمتقارن بوسیله جاوا اسکریپت با استفاده از promise افزوده
شده است. ضمناً خطاها مدیریت شده اند.</p>
<script>
function fetchAndDecode(url, type) {
return fetch(url).then(response => {
if (!response.ok) {
throw new Error(`خطای وضعیت قرارداد انتقال فوق متن: ${response.status}`);
} else {
if (type === 'blob') {
return response.blob();
} else if (type === 'text') {
return response.text();
}
}
})
.catch(e => {
console.log(`مشکلی در عملیات بدست آوردن منبع "${url}" به وجود آمد: ` + e.message);
})
.finally(() => {
console.log(`fetch attempt for "${url}" finished.`);
});
};
let coffee = fetchAndDecode('img/coffee.jpg', 'blob');
let tea = fetchAndDecode('img/tea.jpg', 'blob');
let description = fetchAndDecode('description.txt', 'text');
Promise.all([coffee, tea, description]).then(values => {
console.log(values);
// Store each value returned from the promises in separate variables; create object URLs from the blobs
let objectURL1 = URL.createObjectURL(values[0]);
let objectURL2 = URL.createObjectURL(values[1]);
let descText = values[2];
// Display the images in <img> elements
let image1 = document.createElement('img');
let image2 = document.createElement('img');
image1.src = objectURL1;
image2.src = objectURL2;
document.body.appendChild(image1);
document.body.appendChild(image2);
// Display the text in a paragraph
let para = document.createElement('p');
para.textContent = descText;
document.body.appendChild(para);
});
</script>
<!-- افزودن یک تصویر و یک متن
<script>
let promise = fetch("img/coffee.jpg")
.then((response) => {
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
} else {
return response.blob();
}
})
.then((myBlob) => {
let objectURL = URL.createObjectURL(myBlob);
let image = document.createElement("img");
image.src = objectURL;
document.body.appendChild(image);
let txt = "افزوده شده با جاوا اسکریپت"
let paragraph = document.createElement("p");
paragraph.textContent = txt;
document.body.appendChild(paragraph);
})
.catch(e => {
console.log('There has been a problem with your fetch operation: ' + e.message);
});
</script> -->
</body>
</html>