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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

var div = $("<div id='preview-a'></div>"),
    iframe=$("<iframe id='prelink' src='' allowfullscreen frameborder='0'></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($("#prelink", parent.document).length ==0)
            {
                $('body').append(parentDiv);
            }
            sty();
            $('#prelink').attr('src',`${target}`);
            /*$("#prelink").each(function () {
                this.style.setProperty( 'z-index', '2147483647', 'important' );
            });*/

            if(window.location.href.match(/youtube.com/))
            {
                var arr=target.split("?").pop().split("=");
                var vid = arr[1];
                var newurl=location.href+'embed/'+vid;
                $('#prelink').attr('id','ytplayer');
                $('#ytplayer').attr('src',`${newurl}`);
                $("#preview-a iframe").css({'outline': '0px solid pink'});
            }
            var myLeft=($(window).width()-$("#preview-a").width())/2;
            //取得水平中央位置
            //$("#preview-a").offset({left:myLeft});
            //設定框架頁於水平置中
            timer = setTimeout(function(){

                //跟隨鼠標顯示,搭配小視窗使用
                /*var oPosition = event.target.getBoundingClientRect()
                var odiv =  document.getElementById("preview-a");
                odiv.style.left = oPosition.x -60 + "px";*/
                $("#preview-a").show();

                  $("#preview-a").mouseout(function(e){
                   if(e.shiftKey || isFullScreen())
                    {
                        $("#preview-a").show();
                        return;
                    }
                    else
                    {
                        $("#preview-a").hide();
                        clearTimeout(timer);}
                    })


                //移除不想要的網站元素,加快預覽頁的載入速度
                $("#prelink").ready(function(){
                    $("#prelink").contents().find("#toptb").remove();
                    $("#prelink").contents().find("div[id*='logo']").remove();
                    $("#prelink").contents().find("div[class*='logo']").remove();
                    $("#prelink").contents().find("img[src*='logo']").remove();
                    $("#prelink").contents().find("#pt").remove();
                    $("#prelink").contents().find(".toptb").remove();
                    $("#prelink").contents().find(".top").remove();
                    $("#prelink").contents().find(".hdc.cl").remove();
                    $("#prelink").contents().find("#hdc.cl").remove();
                    $("#prelink").contents().find("#top_login").remove();
                    $("#prelink").contents().find("#hd").remove();
                    $("#prelink").contents().find("header[id*='bar']").remove();
                    $("#prelink").contents().find("header[id*='top']").remove();
                    $("#prelink").contents().find("#head").remove();
                    $("#prelink").contents().find("#header").remove();
                    $("#prelink").contents().find("div[id*='topbar']").remove();
                    $("#prelink").contents().find("div[class*='topbar']").remove();
                    $("#prelink").contents().find("div[id*='search']").remove();
                    $("#prelink").contents().find("div[class*='search']").remove();
                    $("#prelink").contents().find("#foruminfo").remove();
                    $("#prelink").contents().find(".error").remove();
                    $("#prelink").contents().find("#header-inner").remove();
                    $("#prelink").contents().find("#bd").remove();
                    $("#prelink").contents().find("#navbar").remove();
                    $("#prelink").contents().find("div[id*='navlist']").remove();
                    $("#prelink").contents().find("div[class*='navlist']").remove();
                    $("#prelink").contents().find("div[id*='global-nav']").remove();
                    $("#prelink").contents().find("div[class*='global-nav']").remove();
                    $("#prelink").contents().find("div[id*='navbar']").remove();
                    $("#prelink").contents().find("div[class*='navbar']").remove();
                    $("#prelink").contents().find("div[id*='nvbd']").remove();
                    $("#prelink").contents().find("div[class*='nvbd']").remove();
                    $("#prelink").contents().find("div[id*='hornbox']").remove();
                    $("#prelink").contents().find("#welcome_mask").remove();
                    $("#prelink").contents().find("#welcome_present").remove();
                    $("#prelink").contents().find(".uk-child-width-1-1.uk-grid.uk-grid-stack").remove();//igg廣告
                })
                //框架頁載入時漏掉的補清..
                $("#prelink").on("load", () => {
                    $("#prelink").contents().find("div[id*='hornbox']").remove();
                    $("#prelink").contents().find("#foruminfo").remove();
                    $("#prelink").contents().find("#hd").remove();
                    $("#prelink").contents().find("#toptb").remove();
                    $("#prelink").contents().find(".hdc.cl").remove();
                    $("#prelink").contents().find("#hdc.cl").remove();
                    $("#prelink").contents().find("#welcome_mask").remove();
                    $("#prelink").contents().find("#welcome_present").remove();
                    $("#prelink").contents().find("#wp").css({'filter': 'blur(0px)'});
                    $("#prelink").contents().find("#nv_forum").css({'overflow': 'auto'});
                    $("#prelink").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 isFullScreen() {
    return  !! (
        document.fullscreen ||
        document.mozFullScreen ||
        document.webkitIsFullScreen ||
        document.webkitFullScreen ||
        document.msFullScreen
    );
}

function sty(){
    //調整預覽頁的介面
    $("#preview-a").css({
        'background': '#fff',
        'position': 'fixed',
        'width': '100%', //喜歡小視窗的可以調這裡,會影響置中顯示
        'height': '100%', //108%再配preview-a iframe的height弄115%可以全高;喜歡小視窗的可以調這裡,會影響置中顯示
        'z-index': 2147483647,
        'left': '0',
        //'top': '0',
        'bottom': '0',
        'right': '0',
        'margin': '0px auto;',
        'scale':'85%', //喜歡小視窗的可以調這裡,預覽頁是否縮放? 調100%就是原封不動的大小
        'display':'none',
    })
    $("#preview-a iframe").css({
        'z-index': 2147483647,
        'border': 'none',
        'width': '100%',
        'height': '100%',
        'margin': '0px auto;',
        'border-radius': '30px', //邊框角度
        'outline': '5px solid pink', //框線寬度
    });
}