让文章中网盘链接只能手机端打开,电脑端点击弹出提示

高钱日记 2024-10-22 155 10/22

最近网盘拉新又有了新的规则,只有手机端转存和拉新才有收益,而我的其它网站大部分都是手机转存,只能用提醒用户用手机来访问网站来增加收益了。

如果你的网站用的是下载按钮,可以用css来实现控制只在手机端或者小屏幕显示下载按钮;如果直接用的是网盘链接,可以用下面的方法来快速实现。

做法很简单,就是用JavaScript来对某个网盘链接进行匹配判断,当用户在电脑上点击网盘链接时会弹出提示,要求用户去用手机打开网站文章访问网盘链接,手机端点击网盘链接则可以直接转存。

代码如下。

代码一

    <style>
        /* 模态框样式 */
        #myModal {
            display: none; 
            position: fixed; 
            z-index: 1; 
            left: 0; 
            top: 0; 
            width: 100%; 
            height: 100%; 
            overflow: auto; 
            background-color: rgb(0,0,0); 
            background-color: rgba(0,0,0,0.4); 
            padding-top: 60px; 
        }
        .modal-content {
            background-color: #fefefe;
            margin: 5% auto; 
            padding: 20px;
            border: 1px solid #888;
            width: 80%; 
        }
        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }
        .close:hover,
        .close:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }
    </style>
    <p>
        <a href="https://pan.baidu.com">访问 pan.quark.cn</a><br>
        <a href="https://example.com">访问其他网站</a><br>
        <a href="https://another-domain.com">访问 another-domain.com</a>
    </p>

    <!-- 模态框 -->
    <div id="myModal">
        <div class="modal-content">
            <span class="close">&times;</span>
            <p>需要手机端访问点击才能进入</p>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const targetDomains = ['pan.baidu.com', 'another-domain.com']; // 需要匹配的多个域名
            
            function isMobile() {
                return /Mobi|Android/i.test(navigator.userAgent);
            }

            const links = document.querySelectorAll('a');

            links.forEach(link => {
                // 检查链接是否包含任意一个目标域名
                if (targetDomains.some(domain => link.href.includes(domain))) {
                    link.addEventListener('click', function(event) {
                        if (!isMobile()) {
                            event.preventDefault(); // 阻止默认行为
                            document.getElementById('myModal').style.display = "block"; // 显示模态框
                        }
                    });
                }
            });

            // 关闭模态框
            const span = document.getElementsByClassName("close")[0];
            span.onclick = function() {
                document.getElementById('myModal').style.display = "none"; // 隐藏模态框
            }

            // 点击模态框外部关闭模态框
            window.onclick = function(event) {
                const modal = document.getElementById('myModal');
                if (event.target == modal) {
                    modal.style.display = "none"; // 隐藏模态框
                }
            }
        });
    </script>

代码二

    <style>
        /* 模态框样式 */
        #myModal {
            display: none; 
            position: fixed; 
            z-index: 1; 
            left: 0; 
            top: 0; 
            width: 100%; 
            height: 100%; 
            overflow: auto; 
            background-color: rgb(0,0,0); 
            background-color: rgba(0,0,0,0.4); 
            padding-top: 60px; 
        }
        .modal-content {
            background-color: #fefefe;
            margin: 15% auto; 
            padding: 20px;
            border: 1px solid #888;
            width: 80%; 
            text-align: center;
        }
        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }
        .close:hover,
        .close:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }
    </style>
    <p>
        <a href="https://domain1.com">访问域名1</a><br>
        <a href="https://domain2.com">访问域名2</a><br>
        <a href="https://domain3.com">访问域名3</a><br>
        <a href="https://example.com">访问其他网站</a>
    </p>

    <!-- 模态框 -->
    <div id="myModal">
        <div class="modal-content">
            <span class="close">&times;</span>
            <p>需要手机端访问点击才能进入</p>
        </div>
    </div>

    <script>
        function isMobile() {
            // 简单的移动设备检测
            return /Mobi|Android/i.test(navigator.userAgent);
        }

        function handleLinkClick(event, url) {
            if (!isMobile()) {
                event.preventDefault(); // 阻止默认链接行为
                document.getElementById('myModal').style.display = "block"; // 显示模态框
            } else {
                window.location.href = url; // 手机端正常访问
            }
        }

        document.addEventListener("DOMContentLoaded", function() {
            // 获取所有链接
            const links = document.querySelectorAll("a");

            // 遍历链接
            links.forEach(link => {
                const url = link.href;
                // 检查链接是否包含指定的域名
                if (url.includes("domain1.com") || url.includes("domain2.com") || url.includes("domain3.com")) {
                    link.onclick = function(event) {
                        handleLinkClick(event, url);
                    };
                }
            });

            // 关闭模态框
            const span = document.getElementsByClassName("close")[0];
            span.onclick = function() {
                document.getElementById('myModal').style.display = "none"; // 隐藏模态框
            }

            // 点击模态框外部关闭模态框
            window.onclick = function(event) {
                const modal = document.getElementById('myModal');
                if (event.target == modal) {
                    modal.style.display = "none"; // 隐藏模态框
                }
            }
        });
    </script>

以上代码可以对多个网盘品牌进行自动处理,按照需要来修改添加网盘域名即可。多关注一下平台发布的网盘推广规则,不要做无用功。

- THE END -
最后修改:2024年10月22日
1

除非声明转载,本站所有文章均为博主原创。

共有 0 条评论

您必须 后可评论