預覽網頁(改),懸停0.8s出現框架頁預覽(preview web page)

滑鼠停在連結上會彈出個框架頁,讓你不用切換頁面就能看內容,關閉預覽頁也只要將滑鼠移出預覽頁範圍內即可,完全不用點擊

目前為 2021-08-19 提交的版本,檢視 最新版本

您需要先安裝使用者腳本管理器擴展,如 TampermonkeyGreasemonkeyViolentmonkey 之後才能安裝該腳本。

You will need to install an extension such as Tampermonkey to install this script.

您需要先安裝使用者腳本管理器擴充功能,如 TampermonkeyViolentmonkey 後才能安裝該腳本。

您需要先安裝使用者腳本管理器擴充功能,如 TampermonkeyUserscripts 後才能安裝該腳本。

你需要先安裝一款使用者腳本管理器擴展,比如 Tampermonkey,才能安裝此腳本

您需要先安裝使用者腳本管理器擴充功能後才能安裝該腳本。

(我已經安裝了使用者腳本管理器,讓我安裝!)

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

(我已經安裝了使用者樣式管理器,讓我安裝!)

// ==UserScript==
// @name         預覽網頁(改),懸停0.8s出現框架頁預覽(preview web page)
// @namespace
// @version      2.3
// @description  滑鼠停在連結上會彈出個框架頁,讓你不用切換頁面就能看內容,關閉預覽頁也只要將滑鼠移出預覽頁範圍內即可,完全不用點擊
// @author       kater4343587
// @include      http://*
// @include      https://*
// @require      https://code.jquery.com/jquery-3.3.1.min.js
// @require      https://openuserjs.org/src/libs/sizzle/GM_config.js
// @grant        GM_getValue
// @grant        GM_setValue
// @namespace
// @namespace 
// ==/UserScript==

var div = $("<div id='preview-a'></div>"),
    iframe = $("<iframe id='link' name='link' src='' title='link'></iframe>"),
    parentDiv = div.append(iframe),
    timer;

$(document).ready(function(){
    $(document).on("mouseover", "a:not([href*='.jpg'],[href*='.png'],[href='#'],[href*='javascript'])", function (event) {
        var target=$(this).attr("href");
        if(target!=undefined){
            if (event.shiftKey)
            {
                return; //按住SHIFT鍵不彈出預覽頁
            }

            if($("#preview-a").length == 0 && $("#preview-a", parent.document).length == 0)
            {
                $('body').append(parentDiv);
            }
            sty();
            $('#link').attr('src',`${target}`);

            $("#preview-a").hide();
            clearTimeout(timer);
            timer = setTimeout(function(){
                //跟隨鼠標顯示
                /*var oPosition = event.target.getBoundingClientRect()
                var odiv =  document.getElementById("preview-a");
                odiv.style.left = oPosition.x -100 + "px";*/

                $("#preview-a").show();

                $("#preview-a").mouseout(function(){
                    $("#preview-a").hide();
                    clearTimeout(timer);
                })
                //移除不想要的網站元素,加快預覽頁的載入速度
                $("#link").ready(function(){
                    $("#link").contents().find("#toptb").remove();
                    $("#link").contents().find("div[id*='logo']").remove();
                    $("#link").contents().find("div[class*='logo']").remove();
                    $("#link").contents().find("img[src*='logo']").remove();
                    $("#link").contents().find("#pt").remove();
                    $("#link").contents().find(".toptb").remove();
                    $("#link").contents().find(".top").remove();
                    $("#link").contents().find(".hdc.cl").remove();
                    $("#link").contents().find("#hdc.cl").remove();
                    $("#link").contents().find("#top_login").remove();
                    $("#link").contents().find("#hd").remove();
                    $("#link").contents().find("header[id*='bar']").remove();
                    $("#link").contents().find("header[id*='top']").remove();
                    $("#link").contents().find("#head").remove();
                    $("#link").contents().find("#header").remove();
                    $("#link").contents().find("div[id*='topbar']").remove();
                    $("#link").contents().find("div[class*='topbar']").remove();
                    $("#link").contents().find("div[id*='search']").remove();
                    $("#link").contents().find("div[class*='search']").remove();
                    $("#link").contents().find("#foruminfo").remove();
                    $("#link").contents().find(".error").remove();
                    $("#link").contents().find("#header-inner").remove();
                    $("#link").contents().find("#bd").remove();
                    $("#link").contents().find("#navbar").remove();
                    $("#link").contents().find("div[id*='navlist']").remove();
                    $("#link").contents().find("div[class*='navlist']").remove();
                    $("#link").contents().find("div[id*='global-nav']").remove();
                    $("#link").contents().find("div[class*='global-nav']").remove();
                    $("#link").contents().find("div[id*='navbar']").remove();
                    $("#link").contents().find("div[class*='navbar']").remove();
                    $("#link").contents().find("div[id*='nvbd']").remove();
                    $("#link").contents().find("div[class*='nvbd']").remove();
                    $("#link").contents().find("div[id*='hornbox']").remove();
                    $("#link").contents().find("#welcome_mask").remove();
                    $("#link").contents().find("#welcome_present").remove();
                    $("#link").contents().find(".uk-child-width-1-1.uk-grid.uk-grid-stack").remove();//igg廣告
                })
                //框架頁載入時漏掉的補清..
                $("#link").on("load", () => {
                    $("#link").contents().find("div[id*='hornbox']").remove();
                    $("#link").contents().find("#foruminfo").remove();
                    $("#link").contents().find("#hd").remove();
                    $("#link").contents().find("#toptb").remove();
                    $("#link").contents().find(".hdc.cl").remove();
                    $("#link").contents().find("#hdc.cl").remove();
                    $("#link").contents().find("#welcome_mask").remove();
                    $("#link").contents().find("#welcome_present").remove();
                    $("#link").contents().find("#wp").css({'filter': 'blur(0px)'});
                    $("#link").contents().find("#nv_forum").css({'overflow': 'auto'});
                    $("#link").contents().find(".uk-child-width-1-1.uk-grid.uk-grid-stack").remove();//igg廣告
                })
            },850); //調整預覽頁出現的時間,數字減少更快出現,數字增加延遲出現
        }
    });
});

$(document).on("mouseout", "a", function () {
    //$("#preview-a").hide();
    clearTimeout(timer);
    });

function sty(){
    //調整預覽頁的介面
    $("#preview-a").css({
        'background': '#fff',
        'position': 'fixed',
        'width': '105%',
        'height': '117%',
        'z-index': 9999999,
        //'overflow': 'auto',
        'top': '0', //預覽頁距離頂部邊界值
        'bottom': '0',
        'right': '0',
        'margin': 'auto',
        'scale':'85%', //預覽頁是否縮放? 調100%就是原封不動的大小
        'display':'none',
        'border-radius': '30px',
        'outline': '5px solid pink',
    })
    $("#preview-a iframe").css({
        'border': 'none',
        'width': '100%',
        'height': '100%',
    });
}