cookie 可能会阻塞剪贴板 API

Posted 2023-03-10

【中文标题】cookie 可能会阻塞剪贴板 API

【英文标题】：cookie possibly blocking clipboard API

【发布时间】：2022-01-11 18:47:21

【问题描述】：

我在下面有这段代码，基本上是在单击 a 标记时将输入字段的文本复制到剪贴板，然后打开一个用户粘贴文本的新选项卡。

在设置 cookie 之前，这一切都可以正常工作。我已经在设置 ​​cookie 之前测试了 10 个不同的 a 标签。

设置 cookie 后，新选项卡仍将打开，我从中复制文本的输入字段仍会更新，但如果我粘贴到记事本或打开的窗口中，它将是最后复制的内容，而不是最新的。如果我删除 cookie 并重新加载，一切都会恢复到它应有的功能。

所以我不确定为什么设置的 cookie 会阻止剪贴板更新。

 //Set Cookie Function
 function setCookie(cname, cvalue, exdays) 
    const d = new Date();
    d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
    let expires = "expires="+d.toUTCString();
    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";


//Get Cookie Function
function getCookie(name) 
    var dc = document.cookie;
    var prefix = name + "=";
    var begin = dc.indexOf("; " + prefix);
    if (begin == -1) 
        begin = dc.indexOf(prefix);
        if (begin != 0) return null;
    
    else
    
        begin += 2;
        var end = document.cookie.indexOf(";", begin);
        if (end == -1) 
        end = dc.length;
        
    
    // because unescape has been deprecated, replaced with decodeURI
    //return unescape(dc.substring(begin + prefix.length, end));
    return decodeURI(dc.substring(begin + prefix.length, end));
 

$(document).on('click', '.pop-top ul li a', function() 
    var copiedRole = $(this);
    $('#copyText').val(copiedRole.text());
    navigator.clipboard.writeText($('#copyText').val());
    
    var acknowledgeExists = getCookie("acknowledge");

    if(acknowledgeExists == null) 
        $('#copyMessage, .frosted').addClass('show');
     else 
        window.open('[redacted]', '_blank');
    
);

//Create Cookies
$("#acknowledge").on('click', function() 
    $('#copyMessage, .frosted').removeClass('show');
    window.open('[redacted]', '_blank');

    if($('#never').is(':checked')) 
        setCookie("acknowledge", "yes", 1);
    
);

【问题讨论】：

所以问题是 window.open 立即触发，因为 cookie 阻止了带有按钮的通知框打开新标签。

【参考方案1】：

所以事实证明不是 cookie，而是 window.open 立即触发。剪贴板 API 的 MDN 文档注意该选项卡必须处于活动状态。因此，即使我的代码在 cookie 检查之前具有写入剪贴板功能，它仍然会以足够快的速度触发以防止它发生。

虽然在 setTimeout 中将 window.open 包装在 cookie 中 if/else 1 秒不是一个理想的解决方案，但效果很好。