الطريقة الحديثة
باستخدام طريقة share()
لواجهة برمجة التطبيقات Web Share API
لمشاركة الملفات، يمكنك الاتصال بالرقم
navigator.share()
. يُرجى العلم أنه عليك
التحقّق دائمًا مما إذا كان من الممكن مشاركة الملفات مع
navigator.canShare()
والتأكّد
من أنّ موقعك الإلكتروني يستخدم بروتوكول HTTPS قبل طلب طريقة share()
.
// Assume `blob` is a PNG image file.
const data = {
files: [
new File([blob], 'image.png', {
type: blob.type,
}),
],
title: 'My title',
text: 'My text',
};
if (navigator.canShare(data)) {
await navigator.share(data);
}
الطريقة الكلاسيكية
أفضل ثاني شيء تقدمه للمستخدم إذا كانت واجهة برمجة تطبيقات مشاركة الويب غير متاحة هو العودة إلى السماح للمستخدم بتنزيل الملف، حتى يتمكن من مشاركته يدويًا، على سبيل المثال، عبر البريد الإلكتروني أو عبر تطبيق مراسلة أو تطبيق شبكة اجتماعية عبر الإنترنت.
التحسين التدريجي
تستخدم الطريقة أدناه واجهة برمجة التطبيقات Web Share API عندما يتيح المتصفِّح ذلك ومتى يمكن مشاركة البيانات استنادًا إلى أنواع الملفات المتوافقة. بخلاف ذلك، يعود إلى تنزيل الملف.
const button = document.querySelector('button');
const img = document.querySelector('img');
// Feature detection
const webShareSupported = 'canShare' in navigator;
// Update the button action text.
button.textContent = webShareSupported ? 'Share' : 'Download';
const shareOrDownload = async (blob, fileName, title, text) => {
// Using the Web Share API.
if (webShareSupported) {
const data = {
files: [
new File([blob], fileName, {
type: blob.type,
}),
],
title,
text,
};
if (navigator.canShare(data)) {
try {
await navigator.share(data);
} catch (err) {
if (err.name !== 'AbortError') {
console.error(err.name, err.message);
}
} finally {
return;
}
}
}
// Fallback implementation.
const a = document.createElement('a');
a.download = fileName;
a.style.display = 'none';
a.href = URL.createObjectURL(blob);
a.addEventListener('click', () => {
setTimeout(() => {
URL.revokeObjectURL(a.href);
a.remove();
}, 1000)
});
document.body.append(a);
a.click();
};
button.addEventListener('click', async () => {
const blob = await fetch(img.src).then(res => res.blob());
await shareOrDownload(blob, 'cat.png', 'Cat in the snow', 'Getting cold feet…');
});
قراءات إضافية
- واجهة برمجة تطبيقات "المشاركة على الويب" على MDN
- الدمج مع واجهة مستخدم مشاركة نظام التشغيل مع Web Share API
الإصدار التجريبي
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
rel="icon"
href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🎉</text></svg>"
/>
<title></title>
<link rel="stylesheet" href="style.css" />
<!-- TODO: Devsite - Removed inline handlers -->
<!-- <script src="script.js" type="module"></script> -->
</head>
<body>
<h1>Share a file</h1>
<img
width="200"
height="200"
alt="A cat walking in the snow."
src="cat.png"
/>
<button type=button></button>
</body>
</html>
:root {
color-scheme: dark light;
}
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
margin: 1rem;
font-family: system-ui, sans-serif;
}
img,
video {
height: auto;
max-width: 100%;
display: block;
}
button {
margin: 1rem;
}
const button = document.querySelector('button');
const img = document.querySelector('img');
const webShareSupported = 'canShare' in navigator;
button.textContent = webShareSupported ? 'Share' : 'Download';
const shareOrDownload = async (blob, fileName, title, text) => {
if (webShareSupported) {
const data = {
files: [
new File([blob], fileName, {
type: blob.type,
}),
],
title,
text,
};
if (navigator.canShare(data)) {
try {
await navigator.share(data);
} catch (err) {
if (err.name !== 'AbortError') {
console.error(err.name, err.message);
}
} finally {
return;
}
}
}
// Fallback
const a = document.createElement('a');
a.download = fileName;
a.style.display = 'none';
a.href = URL.createObjectURL(blob);
a.addEventListener('click', () => {
setTimeout(() => {
URL.revokeObjectURL(a.href);
a.remove();
}, 1000)
});
document.body.append(a);
a.click();
};
button.addEventListener('click', async () => {
const blob = await fetch(img.src).then(res => res.blob());
await shareOrDownload(blob, 'cat.png', 'Cat in the snow', 'Getting cold feet…');
});