和你们新米党拼了!(预览帖子2.0)

V 阿呆 屌  (UID: 1) 站长 [复制链接]
帖子链接已复制到剪贴板
帖子已经有人评论啦,不支持删除!

1007 5

1.0版本:https://www.dalao.net/thread-26291.htm

2.0版本:

// ==UserScript==
// @name         大佬论坛帖子预览
// @version      3.0
// @description  首页浏览帖子内容
// @author       Oyiso
// @match        *://dalao.net/
// @match        *://dalao.net/index*.htm
// @match        *://dalao.net/forum-*.htm
// @match        *://www.dalao.net/
// @match        *://www.dalao.net/index*.htm
// @match        *://www.dalao.net/forum-*.htm
// @icon         https://dalao.net/view/img/ioslogo.png
// ==/UserScript==

(function() {
  'use strict';

  // 存储当前激活的预览项
  let currentActiveLi = null;

  // 创建样式,确保隔离性
  const createStyles = () => {
    const style = document.createElement('style');
    style.innerHTML = `
      /* 基础定位样式 */
      .threadlist li {
        position: relative;
      }

      /* 预览窗口容器 */
      .oyiso-preview-container {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 600px;
        height: 350px;
        margin-top: 10px;
        z-index: 9999;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
      }

      /* 预览窗口激活状态 */
      .threadlist li.oyiso-active .oyiso-preview-container {
        display: block;
      }

      /* 预览窗口头部 */
      .oyiso-preview-header {
        background-color: #f5f5f5;
        padding: 12px 15px;
        border-bottom: 1px solid #eee;
        font-weight: bold;
        color: #333;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      /* 预览窗口内容区域 */
      .oyiso-preview-content {
        background-color: #fff;
        height: calc(100% - 45px);
        overflow-y: auto;
        padding: 15px;
      }

      /* 内容区域内元素样式 - 仅影响预览窗口 */
      .oyiso-preview-content * {
        box-sizing: border-box;
        max-width: 100% !important;
      }

      .oyiso-preview-content p {
        margin: 10px 0;
        line-height: 1.6;
        color: #333;
      }

      .oyiso-preview-content ul,
      .oyiso-preview-content ol {
        margin: 10px 0 10px 20px;
        padding: 0;
      }

      .oyiso-preview-content li {
        margin: 5px 0;
        line-height: 1.6;
      }

      .oyiso-preview-content img {
        max-width: 100% !important;
        height: auto !important;
        margin: 10px 0;
        border-radius: 4px;
      }

      .oyiso-preview-content a {
        color: #0066cc;
        text-decoration: none;
      }

      .oyiso-preview-content a:hover {
        text-decoration: underline;
      }

      .oyiso-preview-content video {
        max-width: 100% !important;
        margin: 10px 0;
        border-radius: 4px;
      }

      /* 加载状态样式 */
      .oyiso-loading {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        color: #666;
      }

      .oyiso-loading::after {
        content: "";
        width: 20px;
        height: 20px;
        margin-left: 10px;
        border: 3px solid #ddd;
        border-top-color: #666;
        border-radius: 50%;
        animation: oyiso-spin 1s linear infinite;
      }

      @keyframes oyiso-spin {
        to { transform: rotate(360deg); }
      }

      /* 错误提示样式 */
      .oyiso-error {
        padding: 20px;
        text-align: center;
        color: #e74c3c;
      }
    `;
    document.head.appendChild(style);
  };

  // 关闭当前激活的预览窗口
  const closeCurrentPreview = () => {
    if (currentActiveLi) {
      currentActiveLi.classList.remove('oyiso-active');
      const content = currentActiveLi.querySelector('.oyiso-preview-content');
      if (content) {
        content.innerHTML = '<div class="oyiso-loading">加载中...</div>';
      }
      currentActiveLi = null;
    }
  };

  // 初始化样式
  createStyles();

  // 获取帖子列表
  const threadItems = document.querySelectorAll('.threadlist li');

  if (threadItems.length > 0) {
    threadItems.forEach(li => {
      // 创建预览容器
      const previewContainer = document.createElement('div');
      previewContainer.className = 'oyiso-preview-container';

      // 预览头部
      const previewHeader = document.createElement('div');
      previewHeader.className = 'oyiso-preview-header';
      previewHeader.textContent = '帖子预览';

      // 预览内容区域
      const previewContent = document.createElement('div');
      previewContent.className = 'oyiso-preview-content';
      previewContent.innerHTML = '<div class="oyiso-loading">加载中...</div>';

      // 组装预览窗口
      previewContainer.appendChild(previewHeader);
      previewContainer.appendChild(previewContent);
      li.appendChild(previewContainer);

      // 获取帖子链接
      const threadLink = li.querySelector('.media-body .subject a');
      if (threadLink) {
        // 鼠标进入显示预览(切换逻辑)
        threadLink.addEventListener('mouseenter', () => {
          // 如果当前有激活的预览,先关闭
          if (currentActiveLi && currentActiveLi !== li) {
            closeCurrentPreview();
          }
          // 激活当前预览
          li.classList.add('oyiso-active');
          currentActiveLi = li;
          const url = threadLink.getAttribute('href');
          loadThreadContent(url, previewContent);
        });

        // 让预览窗口内部鼠标移动不会关闭
        previewContainer.addEventListener('mouseenter', () => {
          if (currentActiveLi === li) {
            li.classList.add('oyiso-active'); // 保持激活状态
          }
        });
      }
    });
  }

  // 点击页面其他区域关闭预览
  document.addEventListener('click', (e) => {
    // 判断点击是否在预览窗口或帖子标题内
    const isClickInPreview = e.target.closest('.oyiso-preview-container');
    const isClickInThreadLink = e.target.closest('.media-body .subject a');

    if (!isClickInPreview && !isClickInThreadLink) {
      closeCurrentPreview();
    }
  });

  // 加载帖子内容
  function loadThreadContent(url, container) {
    // 处理相对路径
    let fullUrl = url;
    if (!url.startsWith('http')) {
      fullUrl = new URL(url, window.location.origin).href;
    }

    fetch(fullUrl)
      .then(response => {
        if (!response.ok) {
          throw new Error('网络请求失败');
        }
        return response.text();
      })
      .then(html => {
        // 解析HTML
        const parser = new DOMParser();
        const doc = parser.parseFromString(html, 'text/html');

        // 提取指定的帖子内容区域
        const contentElement = doc.querySelector('.message.break-all.box-shadow#pangu');

        if (contentElement) {
          // 复制内容并清理可能的外部样式类
          const clonedContent = contentElement.cloneNode(true);
          container.innerHTML = '';
          container.appendChild(clonedContent);
        } else {
          container.innerHTML = '<div class="oyiso-error">无法获取帖子内容</div>';
        }
      })
      .catch(error => {
        console.error('加载帖子内容出错:', error);
        container.innerHTML = '<div class="oyiso-error">加载失败,请稍后再试</div>';
      });
  }
})();
本站服务器由 DangYun 友情提供
已有评论 ( 5 )
提示:您必须 登录 才能查看此内容。
域名市场
   域名载入中...
创建新帖
自助推广 (点击空位或 这里 添加)
确认删除
确定要删除这篇帖子吗?删除后将无法恢复。
删除成功
帖子已成功删除,页面将自动刷新。
删除失败
删除帖子时发生错误,请稍后再试。