写了一个油猴脚本以实现在当前页面帖子预览

[KlNonR]

脚本地址： linuxdo超链接内容预览脚本 (greasyfork.org)

脚本效果：

脚本代码：

// ==UserScript==
// @name         linuxdo超链接内容预览脚本
// @namespace    http://tampermonkey.net/
// @version      1.1
// @description  点击任意链接预览页面内容，阻止页面跳转，并在模态窗口中显示
// @author       KlNon
// @match        https://linux.do/latest*
// @match        https://linux.do/c/general/*
// @grant        none
// @license MIT
// @downloadURL https://update.greasyfork.org/scripts/493438/linuxdo%E8%B6%85%E9%93%BE%E6%8E%A5%E5%86%85%E5%AE%B9%E9%A2%84%E8%A7%88%E8%84%9A%E6%9C%AC.user.js
// @updateURL https://update.greasyfork.org/scripts/493438/linuxdo%E8%B6%85%E9%93%BE%E6%8E%A5%E5%86%85%E5%AE%B9%E9%A2%84%E8%A7%88%E8%84%9A%E6%9C%AC.meta.js
// ==/UserScript==

(function() {
    'use strict';

    console.log("脚本初始化...");

    // 添加样式到页面头部
    const style = document.createElement('style');
    style.type = 'text/css';
    style.innerHTML = `
        .modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 1000;
        }
        .iframe-container {
            width: 90%;
            height: 90%;
        }
        iframe {
            width: 100%;
            height: 100%;
            border: none;
            border-radius: 10px;
        }
    `;
    document.head.appendChild(style);

    // 创建模态窗口和iframe容器
    const modal = document.createElement('div');
    modal.className = 'modal';
    const iframeContainer = document.createElement('div');
    iframeContainer.className = 'iframe-container';
    const iframe = document.createElement('iframe');
    iframeContainer.appendChild(iframe);
    modal.appendChild(iframeContainer);
    document.body.appendChild(modal);

    // 打开模态窗口的函数
    function openModal(url) {
        iframe.src = url;
        modal.style.display = 'flex';
    }

    // 点击模态窗口以外的区域关闭模态窗口
    modal.addEventListener('click', function(event) {
        if (event.target === modal) {
            modal.style.display = 'none';
            iframe.src = ''; // 清除iframe内容
        }
    });

    // 监听点击事件
    document.addEventListener('click', function(e) {
        if (e.target.matches('.raw-link')) {
            e.preventDefault(); // 阻止链接默认行为
            openModal(e.target.href); // 打开模态窗口并加载链接
        }
    }, true);
})();

[KlNonR]

大部分代码由GPT完成，我只是起到一个DEBUG工具人的效果

[Musifei]

好眼熟，和这个差不多

网页脚本-探索者视角：在Linux论坛中即刻预览任何链接

[KlNonR]

竟然已经有了，还是论坛逛少了

[KlNonR]

不过我这个是点击帖子标题直接进行预览，还是有些不同的

[baipiaodang (C)]

也挺好

[Musifei]

挺好的

[handsome (大帅哥)]

真巧，昨天大佬刚发了个类似功能的

[pengzhile (卡尔 · 马克思)]

很棒

[tttt]

改进了下：

• 隐藏 navbar，聚焦帖子
• 缩小宽度，居中 modal
  
  

(function() {
    'use strict';

    console.log("脚本初始化...");

    // 添加样式到页面头部
    const style = document.createElement('style');
    style.type = 'text/css';
    style.innerHTML = `
        .modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 1000;
        }
        .iframe-container {
            width: 55%;
            height: 90%;
            display: flex;
            align-items: center; /* 垂直居中 */
            justify-content: center; /* 水平居中 */
        }
        iframe {
            width: 100%; /* iframe填充整个iframe-container */
            height: 100%; /* 高度不变，填满容器 */
            border: none;
            border-radius: 10px;
        }
    `;
    document.head.appendChild(style);

    // 创建模态窗口和iframe容器
    const modal = document.createElement('div');
    modal.className = 'modal';
    const iframeContainer = document.createElement('div');
    iframeContainer.className = 'iframe-container';
    const iframe = document.createElement('iframe');

    // 在iframe加载时移除has-sidebar-page类
    iframe.onload = function() {
        if (iframe.contentDocument.body) {
            iframe.contentDocument.body.classList.remove('has-sidebar-page');
        }
    };

    iframeContainer.appendChild(iframe);
    modal.appendChild(iframeContainer);
    document.body.appendChild(modal);

    // 打开模态窗口的函数
    function openModal(url) {
        iframe.src = url;
        modal.style.display = 'flex';
    }

    // 点击模态窗口以外的区域关闭模态窗口
    modal.addEventListener('click', function(event) {
        if (event.target === modal) {
            modal.style.display = 'none';
            iframe.src = ''; // 清除iframe内容
        }
    });

    // 监听点击事件
    document.addEventListener('click', function(e) {
        if (e.target.matches('.raw-link')) {
            e.preventDefault(); // 阻止链接默认行为
            openModal(e.target.href); // 打开模态窗口并加载链接
        }
    }, true);
})();

[KlNonR]

可以

[z827334597 (猪就是笨笨)]

很好

[meatroll (鸡汁的肉丸)]

谢谢佬，很好玩

[Aerbeita]

笑死我了

[KlNonR]

什么情况 我这里用着倒是好好的,除了4K屏幕有一点点不适配,你可以试试自己用GPT改改

[meatroll (鸡汁的肉丸)]

不用担心喔佬，是多层嵌套而已，很好用喔

[delph1s (威震天)]

套娃