genel bakış
Panoya kopyalamak için üç birincil tarayıcı API'si vardır:
- Async Clipboard API'sı
[navigator.clipboard.writeText]
- Metin odaklı bölüm Chrome 66'da kullanılabilir (Mart 2018)
- Erişim zaman uyumsuzdur ve JavaScript Vaatleri kullanır , güvenlik kullanıcı istemleri (görüntüleniyorsa) sayfadaki JavaScript'i kesintiye için yazılabilir.
- Metin bir değişkene doğrudan panoya kopyalanabilir.
- Yalnızca HTTPS üzerinden sunulan sayfalarda desteklenir.
- Chrome'da etkin sekmelerdeki 66 sayfa, izin istemi olmadan panoya yazabilir.
document.execCommand('copy')
- Çoğu tarayıcı bunu ~ Nisan 2015'ten itibaren desteklemektedir (aşağıdaki Tarayıcı Desteği'ne bakın).
- Erişim eşzamanlıdır; başka bir deyişle, herhangi bir güvenlik istemiyle görüntüleme ve kullanıcı etkileşimi dahil olmak üzere sayfadaki JavaScript'i tamamlar.
- Metin DOM'den okunur ve panoya yerleştirilir.
- Test sırasında ~ Nisan 2015 panoya yazılırken yalnızca Internet Explorer'ın izin istemlerini görüntülediği belirtildi.
- Kopyalama olayını geçersiz kılma
- Kopyalama olayını geçersiz kılma hakkında Pano API'sı belgelerine bakın .
- Herhangi bir copy olayından panoda görünenleri değiştirmenize olanak tanır, düz metin dışındaki diğer veri formatlarını içerebilir.
- Burada ele alınmadığı için doğrudan soruyu cevaplamıyor.
Genel geliştirme notları
Konsolda kodu test ederken pano ile ilgili komutların çalışmasını beklemeyin. Genel olarak sayfanın etkin (Async Clipboard API) olması gerekir ( document.execCommand('copy')panoya erişmesine izin vermek için) kullanıcı etkileşimi (örn. Kullanıcı tıklaması) gerekir . Daha fazla ayrıntı için aşağıya bakın.
ÖNEMLİ (burada not edilmiştir 2020/02/20)
Bu gönderi başlangıçta çapraz kaynaklı IFRAME'lerde ve diğer IFRAME "korumalı alanında" izinlerin kullanımdan kaldırıldığından , gömülü demoların "Kod snippet'ini çalıştır" düğmeleri ve "codepen.io örneğinin" bazı tarayıcılarda (Chrome ve Microsoft Edge dahil) çalışmasını engellediğini unutmayın. ).
Kendi web sayfanızı oluşturmak için, bu sayfayı HTTPS bağlantısı üzerinden test edin ve geliştirin.
Kodun çalıştığını gösteren bir test / demo sayfası:
https://deanmarktaylor.github.io/clipboard-test/
Async + Yedek
Yeni Async Clipboard API'sinin tarayıcı desteği düzeyi nedeniyle, document.execCommand('copy')iyi bir tarayıcı kapsamı elde etme yöntemine geri dönmek isteyeceksiniz .
İşte basit bir örnek (bu siteye gömülü olmayabilir, yukarıdaki "önemli" notu okuyun):
function fallbackCopyTextToClipboard(text) {
var textArea = document.createElement("textarea");
textArea.value = text;
// Avoid scrolling to bottom
textArea.style.top = "0";
textArea.style.left = "0";
textArea.style.position = "fixed";
document.body.appendChild(textArea);
textArea.focus();
textArea.select();
try {
var successful = document.execCommand('copy');
var msg = successful ? 'successful' : 'unsuccessful';
console.log('Fallback: Copying text command was ' + msg);
} catch (err) {
console.error('Fallback: Oops, unable to copy', err);
}
document.body.removeChild(textArea);
}
function copyTextToClipboard(text) {
if (!navigator.clipboard) {
fallbackCopyTextToClipboard(text);
return;
}
navigator.clipboard.writeText(text).then(function() {
console.log('Async: Copying to clipboard was successful!');
}, function(err) {
console.error('Async: Could not copy text: ', err);
});
}
var copyBobBtn = document.querySelector('.js-copy-bob-btn'),
copyJaneBtn = document.querySelector('.js-copy-jane-btn');
copyBobBtn.addEventListener('click', function(event) {
copyTextToClipboard('Bob');
});
copyJaneBtn.addEventListener('click', function(event) {
copyTextToClipboard('Jane');
});
<div style="display:inline-block; vertical-align:top;">
<button class="js-copy-bob-btn">Set clipboard to BOB</button><br /><br />
<button class="js-copy-jane-btn">Set clipboard to JANE</button>
</div>
<div style="display:inline-block;">
<textarea class="js-test-textarea" cols="35" rows="4">Try pasting into here to see what you have on your clipboard:
</textarea>
</div>
(codepen.io örneği çalışmayabilir, yukarıdaki "önemli" notu okuyun) Bu snippet'in Stack Overflow'un gömülü önizlemesinde iyi çalışmadığını buradan deneyebilirsiniz: https://codepen.io/DeanMarkTaylor/pen/RMRaJX?editors = 1011
Async Clipboard API'sı
Chrome 66'daki izinler API'sı aracılığıyla "izin isteme" ve panoya erişimi test etme yeteneğinin bulunduğunu unutmayın.
var text = "Example text to appear on clipboard";
navigator.clipboard.writeText(text).then(function() {
console.log('Async: Copying to clipboard was successful!');
}, function(err) {
console.error('Async: Could not copy text: ', err);
});
document.execCommand ( 'kopya')
Bu yazının geri kalanı, document.execCommand('copy')API'nın nüanslarına ve ayrıntılarına gider .
Tarayıcı Desteği
JavaScript document.execCommand('copy')desteği büyüdü, tarayıcı güncellemeleri için aşağıdaki bağlantılara bakın:
Basit Örnek
(bu siteye gömülü çalışmayabilir, yukarıdaki "önemli" notu okuyun)
var copyTextareaBtn = document.querySelector('.js-textareacopybtn');
copyTextareaBtn.addEventListener('click', function(event) {
var copyTextarea = document.querySelector('.js-copytextarea');
copyTextarea.focus();
copyTextarea.select();
try {
var successful = document.execCommand('copy');
var msg = successful ? 'successful' : 'unsuccessful';
console.log('Copying text command was ' + msg);
} catch (err) {
console.log('Oops, unable to copy');
}
});
<p>
<button class="js-textareacopybtn" style="vertical-align:top;">Copy Textarea</button>
<textarea class="js-copytextarea">Hello I'm some text</textarea>
</p>
Karmaşık Örnek: Girdi göstermeden panoya kopyala
Yukarıdaki basit örnek, bir textareaveyainput görünen öğe .
Bazı durumlarda, bir input/ textareaelement göstermeden panoya metin kopyalamak isteyebilirsiniz . Bu, bu soruna geçici bir çözüm bulmak için bir örnektir (temel olarak öğe ekle, panoya kopyala, öğeyi kaldır):
Google Chrome 44, Firefox 42.0a1 ve Internet Explorer 11.0.8600.17814 ile test edilmiştir.
(bu siteye gömülü çalışmayabilir, yukarıdaki "önemli" notu okuyun)
function copyTextToClipboard(text) {
var textArea = document.createElement("textarea");
//
// *** This styling is an extra step which is likely not required. ***
//
// Why is it here? To ensure:
// 1. the element is able to have focus and selection.
// 2. if element was to flash render it has minimal visual impact.
// 3. less flakyness with selection and copying which **might** occur if
// the textarea element is not visible.
//
// The likelihood is the element won't even render, not even a
// flash, so some of these are just precautions. However in
// Internet Explorer the element is visible whilst the popup
// box asking the user for permission for the web page to
// copy to the clipboard.
//
// Place in top-left corner of screen regardless of scroll position.
textArea.style.position = 'fixed';
textArea.style.top = 0;
textArea.style.left = 0;
// Ensure it has a small width and height. Setting to 1px / 1em
// doesn't work as this gives a negative w/h on some browsers.
textArea.style.width = '2em';
textArea.style.height = '2em';
// We don't need padding, reducing the size if it does flash render.
textArea.style.padding = 0;
// Clean up any borders.
textArea.style.border = 'none';
textArea.style.outline = 'none';
textArea.style.boxShadow = 'none';
// Avoid flash of white box if rendered for any reason.
textArea.style.background = 'transparent';
textArea.value = text;
document.body.appendChild(textArea);
textArea.focus();
textArea.select();
try {
var successful = document.execCommand('copy');
var msg = successful ? 'successful' : 'unsuccessful';
console.log('Copying text command was ' + msg);
} catch (err) {
console.log('Oops, unable to copy');
}
document.body.removeChild(textArea);
}
var copyBobBtn = document.querySelector('.js-copy-bob-btn'),
copyJaneBtn = document.querySelector('.js-copy-jane-btn');
copyBobBtn.addEventListener('click', function(event) {
copyTextToClipboard('Bob');
});
copyJaneBtn.addEventListener('click', function(event) {
copyTextToClipboard('Jane');
});
<div style="display:inline-block; vertical-align:top;">
<button class="js-copy-bob-btn">Set clipboard to BOB</button><br /><br />
<button class="js-copy-jane-btn">Set clipboard to JANE</button>
</div>
<div style="display:inline-block;">
<textarea class="js-test-textarea" cols="35" rows="4">Try pasting into here to see what you have on your clipboard:
</textarea>
</div>
Ek Notlar
Yalnızca kullanıcı bir işlem yaparsa çalışır
Tüm document.execCommand('copy')aramalar, bir kullanıcı işleminin doğrudan bir sonucu olarak gerçekleştirilmelidir, ör. Click event handler. Bu, kullanıcının panoyu beklemediğinde karışmasını önlemek için bir önlemdir.
Bkz burada Google Developers yazı fazla bilgi için .
Pano API'sı
Clipboard API taslak spesifikasyonunun tamamını burada bulabilirsiniz:
https://w3c.github.io/clipboard-apis/
Destekleniyor mu?
document.queryCommandSupported('copy')true"tarayıcı tarafından destekleniyorsa" komutu döndürülmelidir .- ve
document.queryCommandEnabled('copy')iade trueeğer document.execCommand('copy')şimdi denilen eğer başarılı olur. Komutun kullanıcı tarafından başlatılan bir iş parçacığından çağrıldığından ve diğer gereksinimlerin karşılandığından emin olunması.
Ancak sadece döndü tarayıcı uyumluluk sorunları, ~ Nisan'dan ~ Ekim 2015 Google Chrome örneği olarak truegelen document.queryCommandSupported('copy')komutu bir kullanıcı tarafından başlatılan iplikten çağrıldı eğer.
Aşağıdaki uyumluluk ayrıntısına dikkat edin.
Tarayıcı Uyumluluğu Ayrıntısı
Basit bir arama olsa da document.execCommand('copy'), bir sarılmış try/catchBir kullanıcı tıklaması sonucunda çağrılan bloğuna size en uygunluğu sağlarken, aşağıdakilerin bazı koşulları vardır:
Herhangi bir çağrı document.execCommand, document.queryCommandSupportedya da document.queryCommandEnabledbir sarılmış olmalıdır try/ catchblok.
Farklı tarayıcı uygulamaları ve tarayıcı sürümleri, geri döndürmek yerine çağrıldığında farklı istisnalar oluşturur false.
Farklı tarayıcı uygulamaları hala akışta ve Pano API'sı hala taslak halinde, bu yüzden testinizi yapmayı unutmayın.