给自己的网站添加一个网盘搜索功能-zibll综合交流社区-zibll子比主题-WordPress主题模板-zibll子比主题

给自己的网站添加一个网盘搜索功能

代码是通过ai写的,有点粗糙,就是将代码放在“自定义js”代码里即可,然后就会在首页右下角显示一个图标,图标可以自定义,点击会唤醒对话框,调用腾讯对话平台的代码,而腾讯对话平台是对接网上免费的网盘搜索api。

截图:

20250824234242877-image-92

 

以下是完整AI写的:

<script>
document.addEventListener('DOMContentLoaded', () => {
    // =========================
    // 配置项
    // =========================
    const CONFIG = {
        iconUrl: 'https://i.imgs.ovh/2025/08/24/m5sSt.png', // 悬浮图标 URL
        scriptUrl: 'https://chatbot.weixin.qq.com/mmspraiweb_node/dist/static/script/FLOAT_WINDOW_INIT.min.js', // 远程脚本 URL
        floatWindowUrl: 'https://chatbot.weixin.qq.com/webapp/VMMaBfwcRFiEV6pLY10zudRdLbXcH8?isFloat=true&robotName=%E7%BD%91%E7%9B%98%E5%8A%A9%E6%89%8B' // 浮窗初始化地址
    };

    // =========================
    // 工具函数
    // =========================

    /**
     * 动态注入 CSS 样式(防止重复添加)
     */
    function injectStyle() {
        if (document.getElementById('float-icon-style')) return;
        const style = document.createElement('style');
        style.id = 'float-icon-style';
        style.textContent = `
            .float-icon {
                position: fixed;
                right: 30px;
                bottom: 20px;
                width: 50px;
                height: 50px;
                background: url('${CONFIG.iconUrl}') no-repeat center center;
                background-size: cover;
                border-radius: 50%;
                cursor: pointer;
                z-index: 1000;
                border: none;
                outline: none;
            }
            .float-icon.loading {
                background: #f0f0f0 url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 50 50"><circle cx="25" cy="25" r="20" fill="none" stroke="%23007aff" stroke-width="5" stroke-dasharray="31.4 31.4" transform="rotate(-90 25 25)"><animateTransform attributeName="transform" type="rotate" repeatCount="indefinite" dur="1s" from="0 25 25" to="360 25 25"/></circle></svg>') no-repeat center center;
                background-size: 30px 30px;
            }
        `;
        document.head.appendChild(style);
    }

    /**
     * 动态加载 JS 脚本,返回 Promise
     * @param {string} src - 脚本地址
     * @returns {Promise<void>}
     */
    function loadScript(src) {
        return new Promise((resolve, reject) => {
            if (document.querySelector(`script[src="${src}"]`)) {
                resolve(); // 已加载过,不再重复加载
                return;
            }
            const script = document.createElement('script');
            script.src = src;
            script.async = true;
            script.onload = resolve;
            script.onerror = () => reject(new Error(`加载脚本失败:${src}`));
            document.body.appendChild(script);
        });
    }

    /**
     * 显示错误提示
     * @param {string} msg - 错误信息
     */
    function showError(msg) {
        alert(msg || '加载失败,请稍后再试');
    }

    // =========================
    // 核心逻辑
    // =========================

    /**
     * 加载浮窗逻辑
     */
    function loadFloatWindow() {
        const btn = document.querySelector('.float-icon');
        if (!btn) return;

        btn.classList.add('loading'); // 显示加载动画

        loadScript(CONFIG.scriptUrl)
            .then(() => {
                btn.classList.remove('loading');
                if (typeof window._FLOAT_WINDOWA_INIT_ === 'function') {
                    window._FLOAT_WINDOWA_INIT_(CONFIG.floatWindowUrl);
                } else {
                    showError('初始化函数未找到,请检查脚本');
                }
            })
            .catch(err => {
                btn.classList.remove('loading');
                console.error(err);
                showError('加载悬浮窗脚本失败');
            });
    }

    /**
     * 初始化悬浮按钮
     */
    function initFloatIcon() {
        // 防止重复初始化
        if (document.querySelector('.float-icon')) return;

        injectStyle(); // 注入样式

        const floatIcon = document.createElement('button');
        floatIcon.className = 'float-icon';
        floatIcon.setAttribute('aria-label', '打开聊天悬浮窗');
        floatIcon.addEventListener('click', loadFloatWindow);
        document.body.appendChild(floatIcon);
    }

    // =========================
    // 初始化
    // =========================
    initFloatIcon();
});
</script>

以下是原始腾讯对话平台代码:

动手能力强的小伙伴可以嵌入到自己网站,如果有更好的嵌入方法可以分享以下哦!

new Promise((r,j)=>{const s=document.createElement('script');s.src='https://chatbot.weixin.qq.com/mmspraiweb_node/dist/static/script/FLOAT_WINDOW_INIT.min.js';s.onload=r;s.onerror=j;document.body.append(s)}).then(()=>window._FLOAT_WINDOWA_INIT_('https://chatbot.weixin.qq.com/webapp/VMMaBfwcRFiEV6pLY10zudRdLbXcH8?isFloat=true&robotName=%E7%BD%91%E7%9B%98%E5%8A%A9%E6%89%8B')).catch(console.error)

 

请登录后发表评论

    没有回复内容