根據此處的答案，我撰寫了一個簡短的 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 頁面進行測驗：
索引.html
<html>
<head>
<script src="content.js"></script>
</head>
<body>
<button onclick="copyLink()">Copy</button>
</body>
</html>
上面的代碼完美運行 - 當我在 Google Chrome 中打開 index.html 并單擊“復制”按鈕時，控制臺顯示“鏈接寫入剪貼板”，當我粘貼到 Microsoft Word 中時，我得到了預期的格式化鏈接。
我現在想修改函式以復制多種型別，并且作為代碼更改的一部分，我想將變數名更改type為typeHtml. 在函式中一致地更改變數的名稱不應該改變行為或結果，對吧？type在函式中出現 3 次：第一次賦值時出現一次，在 and 中各出現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 并再次點擊按鈕時，控制臺顯示“無法寫入剪貼板”并且沒有任何內容復制到剪貼板。無論我重繪 頁面或點擊按鈕多少次都會發生這種情況，但是當我使用名為type. 我也嘗試過其他變數名稱，例如t，但這些也破壞了代碼，它僅在變數命名時才有效type。
我錯過了什么？任何幫助將非常感激。
uj5u.com熱心網友回復：
在您的原始代碼中，做
var blob = new Blob([`<a href=${url}>${text}</a>`], { type });
構造一個如下所示的物件：
var blob = new Blob([`<a href=${url}>${text}</a>`], { type: "text/html" });
之所以有效，是因為建構式接受type選項物件中的屬性。
但如果你這樣做
var blob = new Blob([`<a href=${url}>${text}</a>`], { typeHtml });
那么你傳遞的物件是
var blob = new Blob([`<a href=${url}>${text}</a>`], { typeHtml: "text/html" });
typeHtml不是 Blob 建構式理解的東西，所以它被忽略了，并且 blob 沒有被正確創建。
如果要重命名變數，則不能對物件初始值設定項使用速記語法。
var blob = new Blob([`<a href=${url}>${text}</a>`], { type: typeHtml });
uj5u.com熱心網友回復：
在 Jaromanda X 評論{ typeHtml }是{ typeHtml: typeHtml }. Blob建構式屬性的名稱是type，所以它應該是{ type: typeHtml }
作業代碼：
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>`], { type: 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")
}
);
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/504471.html