Blazor 服务器，在 Safari 中复制到剪贴板失败

Question

我添加了一些简单的功能来将链接复制到剪贴板，它在 Edge 和 Chrome 中工作正常，但在 Safari 中失败，并出现以下错误：

当前上下文中的用户代理或平台不允许该请求，可能是因为用户拒绝了权限。

我相信这是因为 Safari 希望您通过单击事件来完成此操作，而 Blazor 正在通过其互操作层路由请求。

有人能用这个吗？

示例代码：

剃须刀：

<button title="Copy link to clipboard" @onclick="@(e=> CopyToClipboard("someText"))">Copy</button>

C#：

        private async Task CopyToClipboard(string textToCopy)
        {
            await JSRuntime.InvokeVoidAsync("navigator.clipboard.writeText", textToCopy);
        }

我在一个单独的 javascript 文件中的函数中进行了 javascript 调用，但得到了相同的结果。

Answer 1

我能够解决这个问题。我没有调用 javascript 函数通过 Blazor 互操作复制到剪贴板，而是使用本机按钮 onclick 并解决了这个问题。

<button  onclick="navigator.clipboard.writeText('some text to copy')">Copy Link</button>

Answer 2

我设法将它与标准 C# 函数一起使用，以便用户可以看到对其操作的一些 UI 反馈：

@inject IJSRuntime JSRuntime

<a href="#" class="@(isCopying ? "Copying":"")" @onclick="Clicked" @onclick:preventDefault>
    copy to clipboard
</a>

@code {
    [Parameter] public string? Value { get; set; }
    bool isCopying;

    async Task Clicked()
    {
        isCopying = true;
        await JSRuntime.InvokeVoidAsync("navigator.clipboard.writeText", Value);
        await Task.Delay(500);
        isCopying = false;
    }
}