// 假设这是一个纯JS文件,没有HTML文件 // 封装ChatFloat相关逻辑 (function () { // 定义默认配置 var defaults = { chatUrl: 'https://www.weiyuai.cn/chat?org=df_org_uid&t=1&sid=default_wg_uid&', buttonPosition: 'right', buttonBackgroundColor: 'blue', iframeWidth: 400, iframeHeight: 600, iframeMargins: { right: 20, bottom: 20, left: 20 }, buttonMargins: { right: 20, bottom: 20, left: 20 }, showButton: true, showIframe: true }; // 插件核心功能 function ChatFloat(options) { // 获取元素 // var element = document.getElementById(elementId); // document.createElement("bytedesk-float-chat"); // var element = document.createElement('div'); element.id = 'bytedesk-float-chat'; // 将新的div添加到HTML文档的body中 document.body.appendChild(element); // 合并默认配置和用户配置 var settings = Object.assign({}, defaults, options); // 根据配置创建按钮 var button = document.createElement('button'); button.style.position = 'fixed'; button.style.left = settings.buttonPosition === 'left' ? settings.buttonMargins.left + 'px' : ''; button.style.right = settings.buttonPosition === 'right' ? settings.buttonMargins.right + 'px' : ''; button.style.bottom = settings.buttonMargins.bottom + 'px'; button.style.width = '50px'; button.style.height = '50px'; button.style.borderRadius = '50%'; button.style.backgroundColor = settings.buttonBackgroundColor; button.style.color = 'white'; button.style.border = 'none'; button.style.cursor = 'pointer'; button.style.boxShadow = '0px 0px 10px 0px rgba(0,0,0,0.5)'; button.style.display = settings.showButton ? 'block' : 'none'; button.innerHTML = ''; button.addEventListener('click', function () { if (settings.showIframe) { // 在点击事件中动态加载iframe内容 loadIframe(); showFloatWindow(); } }); // 创建iframe容器 var iframeContainer = document.createElement('div'); iframeContainer.style.position = 'fixed'; iframeContainer.style.left = settings.buttonPosition === 'left' ? settings.iframeMargins.left + 'px' : ''; iframeContainer.style.right = settings.buttonPosition === 'right' ? settings.iframeMargins.right + 'px' : ''; iframeContainer.style.bottom = settings.iframeMargins.bottom + 'px'; iframeContainer.style.width = settings.iframeWidth + 'px'; iframeContainer.style.height = settings.iframeHeight + 'px'; iframeContainer.style.display = 'none'; // 初始隐藏 iframeContainer.style.backgroundColor = 'white'; iframeContainer.style.zIndex = 1000; iframeContainer.style.borderRadius = '2%'; iframeContainer.style.boxShadow = '5px 5px 10px 0px rgba(0,0,0,0.5)'; // 创建iframe // var iframe = document.createElement('iframe'); // iframe.src = settings.chatUrl; // iframe.style.width = '100%'; // iframe.style.height = '100%'; // iframe.style.borderWidth = '2px'; // iframe.style.borderColor = '#ddd'; // iframe.style.borderStyle = 'solid'; // iframe.style.borderRadius = '2%'; // 创建关闭按钮 var closeButton = document.createElement('button'); closeButton.innerText = '×'; closeButton.style.position = 'absolute'; closeButton.style.right = '10px'; closeButton.style.top = '10px'; closeButton.style.padding = '5px'; closeButton.style.backgroundColor = 'gray'; closeButton.style.color = 'white'; closeButton.style.border = 'none'; closeButton.style.cursor = 'pointer'; closeButton.style.borderRadius = '10%'; closeButton.addEventListener('click', function () { hideFloatWindow(); }); // 将元素添加到页面中 element.appendChild(button); var iframeContainerElement = element.appendChild(iframeContainer); // iframeContainerElement.appendChild(iframe); iframeContainerElement.appendChild(closeButton); // 动态创建并加载iframe的函数 function loadIframe() { var iframe = document.createElement('iframe'); iframe.src = settings.chatUrl; iframe.style.width = '100%'; iframe.style.height = '100%'; iframe.style.borderWidth = '2px'; iframe.style.borderColor = '#ddd'; iframe.style.borderStyle = 'solid'; iframe.style.borderRadius = '2%'; iframeContainerElement.appendChild(iframe); } // 显示或隐藏漂浮窗口的函数 function showFloatWindow() { iframeContainer.style.display = 'block'; button.style.display = 'none'; // 如果需要同时隐藏按钮 } function hideFloatWindow() { iframeContainer.style.display = 'none'; button.style.display = 'block'; // 如果需要同时显示按钮 } } // 初始化ChatFloat插件 window.ChatFloat = function (elementId, option) { return new ChatFloat(elementId, option); }; })();