为什么复制淘口令到淘宝会跳出商品页面？_淘宝和抖音是点击复制口令,去app打开会有弹出点击购买,京东是直接打开京东小程序-CSDN博客

本文链接：https://blog.csdn.net/weixin_49426115/article/details/146048978

你有没有好奇过，为什么当你复制某个淘口令，再打开淘宝时，商品页面会“蹦”出来？

复制下面的淘口令：

【淘宝】假一赔四 https://e.tb.cn/h.TEkdRAd9nq0HM4a?tk=gaKUeObVqsb MF278 「宇树 Unitree Go2 语音 AI大模型机器狗Go2 电子狗具身智能伴随仿生陪伴机器人四足机器狗现货」
点击链接直接打开或者淘宝搜索直接打开

打开淘宝，就会弹出下面的页面

今天，我们就来揭开淘口令的秘密，看看它是如何做到这一点的！

其实，淘口令的背后并没有什么黑科技，就是在前端利用了**“剪贴板监听”**这两技术。听起来有点专业，但其实并不复杂。

剪贴板监听，顾名思义，就是应用可以监控你剪贴板里的内容。比如，当你复制了某段文字或链接后，这段内容就会被暂时存放在剪贴板上，方便你之后粘贴。而**“剪贴板监听”**就是指某些应用（如淘宝）可以在你打开它的时候，悄悄读取剪贴板的内容。

当你打开淘宝 App 时，应用会自动读取剪贴板内容。
如果检测到剪贴板里有符合淘口令格式的文字（比如带有特定标识符的链接和代码），淘宝就会进一步处理。
这种监听功能通常会在你打开应用时触发，而不会在后台持续监控（否则系统可能会认为这是“偷窥”行为）。

你可以打开你手机设置里的应用权限，把淘宝的“读取剪切板”权限关掉，这个时候你复制淘口令，再打开淘宝就不会弹出商品页面了。同样的，如果你把淘宝的“写入剪切板”权限关掉，此时你点击“分享”按钮，淘口令也不会复制到你的剪切板。

在Web前端，我们可以调用navigator.clipboard API来监听剪切板。

navigator.clipboard API用于在浏览器中安全地读取和写入剪贴板。它可以通过用户触发的事件（如点击按钮）来执行剪贴板操作。

读取剪贴板内容：

navigator.clipboard.readText().then(text => {
        console.log("剪贴板内容:", text);
})

写入剪切板：

navigator.clipboard.writeText("Hello from Clipboard API!").then(() => {
    console.log("文本已成功写入剪贴板!");
})

接下来使用window.addEventListener监听页面加载完成事件来读取剪贴板内容：

window.addEventListener("load", () => {
    navigator.clipboard.readText().then(text => {
        console.log("剪贴板内容:", text);
    }).catch(err => {
        console.error("读取剪贴板失败:", err);
    });
});

淘宝检测到剪贴板中的淘口令，解析得到其中的链接，就可以直接跳转到对应的商品页面啦。

为了更好地理解这个过程，我写了一个简单的示例程序，模拟从网页上复制淘口令，到返回页面时自动识别并弹出信息的过程。这个例子使用了 HTML、JavaScript 和剪贴板 API，快来看看吧！

<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>淘口令识别模拟</title>
<style>
    body { font-family: Arial, sans-serif; text-align: center; margin-top: 50px; }
    button { padding: 10px 20px; margin-top: 20px; cursor: pointer; }
    #message { margin-top: 30px; font-size: 18px; color: #333; }
</style>
</head>
<body>

<h2>淘口令识别模拟器</h2>
<p>点击下面的按钮复制淘口令：</p>
<button onclick="copyTaoCode()">复制淘口令</button>
<div id="message"></div>

<script>
    // 预设的淘口令
    const taoCode = "【淘宝】假一赔四 https://e.tb.cn/h.TEkdRAd9nq0HM4a?tk=gaKUeObVqsb MF278 「宇树 Unitree Go2 语音 AI大模型 机器狗Go2 电子狗 具身智能 伴随 仿生陪伴机器人 四足机器狗 现货」点击链接直接打开 或者 淘宝搜索直接打开";

    // 复制淘口令到剪贴板
    function copyTaoCode() {
        navigator.clipboard.writeText(taoCode).then(() => {
            alert("已复制淘口令！请返回页面查看效果。");
        });
    }

    // 页面重新加载时，检测剪贴板内容
    window.addEventListener("load", () => {
        navigator.clipboard.readText().then(text => {
            if (text.includes("tk=")) { // 简单判断是否是淘口令
                document.getElementById("message").innerHTML = `
                    <strong>检测到淘口令！</strong><br>
                    商品信息：<br>
                    <em>宇树 Unitree Go2 语音 AI大模型 机器狗Go2</em><br>
                    <a href="https://e.tb.cn/h.TEkdRAd9nq0HM4a?tk=gaKUeObVqsb" target="_blank">点击这里查看商品</a>
                `;
            }
        });
    });
</script>

</body>
</html>