developer.mozilla.org/en-US/docs/…
修改配置项,才能生效
改用第三方库
windowsreport.com/browser-doe…
使用clipboradData
相关文档查阅
on Chrome
on firefox version 54+
developer.mozilla.org/en-US/docs/…
execCommand ,废弃
升级浏览器版本到54+ ,同时添加属性,contenteditable=true still not work
<blockquote contenteditable="true">
<p>Edit this content to add your own quote</p>
</blockquote>
<cite contenteditable="true">-- Write your own name here</cite>
permission
developer.mozilla.org/en-US/docs/…
request permission still not work for not support for website ,seems only extension support
developer.mozilla.org/en-US/docs/…
navigator.permissions.query({name: "clipboard-write"}).then((result) => {
if (result.state === "granted" || result.state === "prompt") {
/* write to the clipboard now */
}
});
function updateClipboard(newClip) {
navigator.clipboard.writeText(newClip).then(() => {
/* clipboard successfully set */
}, () => {
/* clipboard write failed */
});
}
developer.mozilla.org/en-US/docs/…
support PermissionName
developer.mozilla.org/en-US/docs/…
chrome PermissionName
| -------------- | --------------------------- |
| |"geolocation", |
| | "notifications", |
| | "push", |
| | "midi", |
| | "camera", |
| | "microphone", |
| | // "speaker", |
| | // "device-info", |
| | "background-fetch", |
| | "background-sync", |
| | // "bluetooth", |
| | "persistent-storage", |
| | "ambient-light-sensor", |
| | "accelerometer", |
| | "gyroscope", |
| | "magnetometer", |
| | // "clipboard", |
| | "screen-wake-lock", |
| | "nfc", |
| | "display-capture", |
| | |
| | // Non-standard: |
| | "accessibility-events", |
| | "clipboard-read", |
| | "clipboard-write", |
| | "payment-handler", |
| | "idle-detection", |
| | "periodic-background-sync", |
| | "system-wake-lock", |
| | "storage-access", |
| | "window-placement", |
| | "local-fonts",
firefox PermissionName
`"geolocation",`
`"notifications",`
`"push",`
`"persistent-storage"`
`// Unsupported: "midi"`
webkit PermissionName
| --------------------- | -------------------------------------------------------------------------- |
| | // FIXME: update the list to match spec when new features are implemented. |
| | "accelerometer", |
| | "background-fetch", |
| | "bluetooth", |
| | "camera", |
| | "display-capture", |
| | "geolocation", |
| | "gyroscope", |
| | "magnetometer", |
| | "microphone", |
| | "midi", |
| | "nfc", |
| | "notifications", |
| | "screen-wake-lock", |
| | "speaker-selection" |
| | };
final code not work
const destinationImage = document.querySelector('#destination')
destinationImage.addEventListener('click', pasteImage);
async function pasteImage() {
try {
// would be error when compile with ts for name PermissionName issue
if(navigator.permissions){
const permission = await navigator.permissions.query({ name: 'clipboard-read' });
if (permission.state === 'denied') {
throw new Error('Not allowed to read clipboard.');
}
}
// just work when config change although the clipboard support but not call by browser
const clipboardContents = await navigator.clipboard.read();
for (const item of clipboardContents) {
if (!item.types.includes('image/png')) {
throw new Error('Clipboard contains non-image data.');
}
const blob = await item.getType('image/png');
destinationImage.src = URL.createObjectURL(blob);
}
}
catch (error) {
console.error(error.message);
}
}