展示nodeseek帖子详情

鼠标悬浮展示nodeseek帖子详情

// ==UserScript==
// @name         展示nodeseek帖子详情
// @version      0.1
// @description  鼠标悬浮展示nodeseek帖子详情
// @author       Damon
// @namespace   *://*nodeseek.com/*
// @match       *://*nodeseek.com/*
// @grant        none
// @license MIT
// ==/UserScript==

(function() {
	'use strict';

	// 创建用于显示链接内容的元素
	var hoverBox = document.createElement('div');
	hoverBox.style.position = 'absolute';
	hoverBox.style.border = '1px solid black';
	hoverBox.style.background = 'white';
	hoverBox.style.padding = '10px';
	hoverBox.style.display = 'none';
	hoverBox.style.height = '500px';
	// hoverBox.style.width = (document.getElementById("nsk-body").offsetWidth-100) + 'px';
	// hoverBox.style.width = (window.innerWidth - 50) + 'px';
  hoverBox.style.maxWidth = (document.getElementById("nsk-body").offsetWidth - 100) + 'px';
	hoverBox.style.overflow = 'auto';
	document.body.appendChild(hoverBox);

	// 为所有 .post-title 下的 a 标签添加鼠标悬浮事件
	var links = document.querySelectorAll('.post-title a');
	links.forEach(function(link) {
		link.addEventListener('mouseover',
		function(event) {
			// 获取链接的 href
			var href = this.href;

			// 获取链接元素的边界信息
			var rect = this.getBoundingClientRect();

			// 发送 HTTP 请求到链接的 href
			fetch(href).then(function(response) {
				// 将响应的内容转换为文本
				return response.text();
			}).then(function(text) {
				// 创建一个新的 DOMParser
				var parser = new DOMParser();
				// 使用 DOMParser 解析响应的 HTML
				var doc = parser.parseFromString(text, 'text/html');
				// 获取 id 为 'nsk-body-left' 的元素的内容
				var content = doc.getElementById('nsk-body-left').innerHTML;
				// 更新 hoverBox 的内容和位置，并显示它
				hoverBox.innerHTML = content;
				hoverBox.style.left = rect.left + 'px'; // 使用链接元素的左边界作为 hoverBox 的 left
				hoverBox.style.top = (rect.bottom + window.scrollY) + 'px'; // 使用链接元素的下边界作为 hoverBox 的 top
				hoverBox.style.display = 'block';
				// 禁用主页面的滚动
				document.body.style.overflow = 'hidden';
			}).
			catch(function(error) {
				// 如果发生错误，显示错误信息
				hoverBox.textContent = 'Error: ' + error;
				hoverBox.style.left = rect.left + 'px'; // 使用链接元素的左边界作为 hoverBox 的 left
				hoverBox.style.top = (rect.bottom + window.scrollY) + 'px'; // 使用链接元素的下边界作为 hoverBox 的 top
				hoverBox.style.display = 'block';
				// 禁用主页面的滚动
				document.body.style.overflow = 'hidden';
			});
		});
	});

  // 鼠标挪开时隐藏 hoverBox
  // document.addEventListener('mouseout',

  // 点击 hoverBox 外部时隐藏 hoverBox
	document.addEventListener('click',
	function(event) {
		if (!hoverBox.contains(event.target)) {
			hoverBox.style.display = 'none';
			// 启用主页面的滚动
			document.body.style.overflow = 'auto';
		}
	});

})();