使用 FireFox 中的 Vaadin 按鈕復制到剪貼板

Question

這是 Vaadin 按鈕的代碼：

String textToCopy = "COPY ME!!!";
Button copyBtn = new Button("");
copyBtn.setButtonLayout(false, new IconSelf(VaadinIcon.COPY_O), "Copy"));
copyBtn.addClickListener(event -> {
          getUI().get().getPage().executeJs("navigator.clipboard.writeText(`" + textToCopy + "`);");
    Notification.show(getTranslation(PAGESTRING + "attributestoclipboard"))
});

要復制我的自定義文本，我使用了navigator.clipboard.writeText(...) 。
適用於Chrome和Edge ，但不適用於Firefox 。
當我在executeJS(...) function 中使用 Firefox 時，它也阻止了document.execCommand("copy") 。

我想我需要在按鈕上添加一個onClick function 。 我怎么能用 Vaadin 做到這一點？

Answer 1

copyBtn.getElement().executeJs("this.addEventListener('click', e => navigator.clipboard.writeText($0))", textToCopy);

請注意，強烈建議不要使用字符串連接來動態構建傳遞給executeJs的字符串，因為存在跨站點腳本漏洞的風險。 這就是為什么我的建議也使用$0來引用單獨傳遞的字符串。 這類似於對 SQL 使用准備好的語句。