Изменение только имени переменной нарушает код JavaScript, чтобы скопировать ссылку в буфер обмена.
Я написал короткую функцию JavaScript для записи ссылки в буфер обмена, чтобы она по-прежнему отображалась как интерактивная ссылка при вставке в программы, поддерживающие форматированный текст, такие как Microsoft Word, на основе ответа здесь.
контент.js
function copyLink() {
/**
* Write a link to the clipboard
*/
var text = "Google"
var url = "https://www.google.com"
var type = "text/html";
var blob = new Blob([`<a href=${url}>${text}</a>`], { type });
myClipboardItem = new ClipboardItem({ [type]: blob })
var data = [myClipboardItem];
navigator.clipboard.write(data).then(
function () {
console.log("Link written to clipboard")
},
function () {
console.log("Failed to write to clipboard")
}
);
}
Я тестирую следующую HTML-страницу:
index.html
<html>
<head>
<script src="content.js"></script>
</head>
<body>
<button onclick="copyLink()">Copy</button>
</body>
</html>
Приведенный выше код работает отлично: когда я открываю index.html в Google Chrome и нажимаю кнопку «Копировать», в консоли отображается «Ссылка записана в буфер обмена», а когда я вставляю в Microsoft Word, я получаю отформатированную ссылку, как и ожидалось.
Теперь я хотел бы изменить функцию для копирования нескольких типов, и как часть изменения кода я хотел бы изменить имя переменной наtypeHtml. Постоянное изменение имени переменной во всей функции не должно изменять поведение или результат, верно? появляется в функции 3 раза: один раз при первом назначении и по одному разу внутриnew Blobиnew ClipboardItem. Поэтому я меняю свой код на следующий:
content.js (после изменения имени переменной)
function copyLink() {
/**
* Write a link to the clipboard
*/
var text = "Google"
var url = "https://www.google.com"
var typeHtml = "text/html";
var blob = new Blob([`<a href=${url}>${text}</a>`], { typeHtml });
myClipboardItem = new ClipboardItem({ [typeHtml]: blob })
var data = [myClipboardItem];
navigator.clipboard.write(data).then(
function () {
console.log("Link written to clipboard")
},
function () {
console.log("Failed to write to clipboard")
}
);
}
Никаких изменений в код не вносилось, кроме изменения имени переменной. Однако, когда я обновляю index.html и снова нажимаю кнопку, консоль показывает «Не удалось записать в буфер обмена», и в буфер обмена ничего не копируется. Это происходит независимо от того, сколько раз я обновляю страницу или нажимаю кнопку, но код снова работает отлично, когда я возвращаюсь к исходной версии с переменной с именем . Я также пробовал другие имена переменных, такие какt, но они также нарушают код и работают только тогда, когда имя переменнойtype.
Что мне не хватает? Любая помощь приветствуется.