如何用JS实现亚马逊ASIN联盟链接生成后一键复制到剪贴板

基于你现有代码做扩展即可，无需引入第三方库，兼容绝大多数现代浏览器，同时做了老旧环境降级处理。

完整可运行代码 #

你可以直接替换原有脚本，对应匹配你现有的输入框、按钮、链接展示容器结构：

<script>
async function myFunction() {
    let userInput = document.querySelector("#userInput");
    let url = document.querySelector("#url");
    const asin = userInput.value.trim();

    // 输入校验，避免生成空链接
    if (!asin) {
        alert("请输入ASIN编码");
        return;
    }

    // 拼接联盟链接
    const targetLink = `https://www.amazon.it/dp/${asin}/ref=nosim?tag=altpe-21`;
    // 渲染链接到页面
    url.innerHTML = targetLink;

    try {
        // 现代浏览器原生剪贴板API
        await navigator.clipboard.writeText(targetLink);
        alert("链接已复制到剪贴板");
    } catch (e) {
        // 降级方案：兼容不支持Clipboard API的老旧浏览器/非HTTPS环境
        const copyInput = document.createElement('textarea');
        copyInput.value = targetLink;
        // 隐藏临时输入框，不影响页面布局
        copyInput.style.cssText = 'position:fixed;top:-9999px;opacity:0;';
        document.body.appendChild(copyInput);
        copyInput.select();
        document.execCommand('copy');
        document.body.removeChild(copyInput);
        alert("链接已复制到剪贴板");
    }
}
</script>

关键说明 #

• navigator.clipboard 是目前官方推荐的剪贴板操作方案，Chrome 66+、Firefox 63+、Safari 13.1+ 全量支持，覆盖99%以上的活跃用户
• 剪贴板API要求页面运行在HTTPS环境（本地localhost调试不受限制），如果你的站点还在用HTTP协议，会自动走降级的execCommand逻辑，不影响功能使用
• 你可以把示例里的alert替换成自定义的页面提示组件，体验会更好
• 建议补充ASIN格式校验逻辑，亚马逊标准ASIN为10位字母+数字组合，校验后可以避免生成无效跳转链接

内容的提问来源于stack exchange，提问作者futuromodder