91 lines
2.2 KiB
HTML
91 lines
2.2 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<meta name="robots" content="noindex, nofollow">
|
||
|
|
<style>
|
||
|
|
body {
|
||
|
|
padding: 0;
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
svg:not(:root) {
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
|
||
|
|
.playable-code {
|
||
|
|
background-color: #f4f7f8;
|
||
|
|
border: none;
|
||
|
|
border-left: 6px solid #558abb;
|
||
|
|
border-width: medium medium medium 6px;
|
||
|
|
color: #4d4e53;
|
||
|
|
height: 100px;
|
||
|
|
width: 90%;
|
||
|
|
padding: 10px 10px 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.playable-canvas {
|
||
|
|
border: 1px solid #4d4e53;
|
||
|
|
border-radius: 2px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.playable-buttons {
|
||
|
|
text-align: right;
|
||
|
|
width: 90%;
|
||
|
|
padding: 5px 10px 5px 26px;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<title>Navigator: share() method - sharing_files - code sample</title>
|
||
|
|
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<label for="files">Select images to share:</label>
|
||
|
|
<input id="files" type="file" accept="image/*" multiple />
|
||
|
|
</div>
|
||
|
|
<button id="share" type="button">Share your images!</button>
|
||
|
|
<output id="output"></output>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<script>
|
||
|
|
const input = document.getElementById("files");
|
||
|
|
const output = document.getElementById("output");
|
||
|
|
|
||
|
|
document.getElementById("share").addEventListener("click", async () => {
|
||
|
|
const files = input.files;
|
||
|
|
|
||
|
|
if (files.length === 0) {
|
||
|
|
output.textContent = "No files selected.";
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
// feature detecting navigator.canShare() also implies
|
||
|
|
// the same for the navigator.share()
|
||
|
|
if (!navigator.canShare) {
|
||
|
|
output.textContent = `Your browser doesn't support the Web Share API.`;
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
if (navigator.canShare({ files })) {
|
||
|
|
try {
|
||
|
|
await navigator.share({
|
||
|
|
files,
|
||
|
|
title: "Images",
|
||
|
|
text: "Beautiful images",
|
||
|
|
});
|
||
|
|
output.textContent = "Shared!";
|
||
|
|
} catch (error) {
|
||
|
|
output.textContent = `Error: ${error.message}`;
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
output.textContent = `Your system doesn't support sharing these files.`;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|