預覽網頁(改) (preview web page)

會彈出個框架頁,讓你不用切換頁面就能看內容,關閉預覽頁也只要滑鼠移出預覽頁範圍。可選擇停在連結上或按SHIFT鍵彈出預覽框,支援youtube和抖音及各大論壇其他網站,支援度廣

目前為 2021-10-12 提交的版本,檢視 最新版本

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

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

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

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

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

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

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

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

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

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

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

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

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

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

// ==UserScript==
// @name         預覽網頁(改) (preview web page)
// @namespace
// @version      4.05
// @description  會彈出個框架頁,讓你不用切換頁面就能看內容,關閉預覽頁也只要滑鼠移出預覽頁範圍。可選擇停在連結上或按SHIFT鍵彈出預覽框,支援youtube和抖音及各大論壇其他網站,支援度廣
// @author       kater4343587
// @include      http://*
// @include      https://*
// @exclude      https://mybid.ruten.com.tw/*
// @exclude      https://seller.shopee.tw/*
// @exclude      https://mail.yahoo.com/*
// @exclude      https://tw.bid.yahoo.com/partner/*
// @exclude      https://tw.bid.yahoo.com/myauc/*
// @exclude      https://blog.xuite.net/*
// @exclude      https://ck101.com/*
// @exclude      https://1fichier.com/*
// @exclude      https://mega.nz/*
// @exclude      https://anonfiles.com/*
// @exclude      https://rapidgator.net/*
// @exclude      https://uptobox.com/*
// @exclude      http://uploaded.net/*
// @exclude      https://drive.google.com/*
// @exclude      https://gofile.io/*
// @exclude      https://www.terabox.com/disk/*
// @exclude      https://od.kkgal.com:8080/*
// @exclude      https://pan.baidu.com/*
// @exclude      https://cloud.189.cn/*
// @exclude      http://www.xxgame.net/*
// @exclude      https://www.aliyundrive.com/*
// @exclude      https://115.com/s/*
// @exclude      https://www111.zippyshare.com/*
// @exclude      https://pastefg.hermietkreeft.site/*
// @exclude      https://mjons-my.sharepoint.com/personal/*
// @exclude      https://multiup.org/*
// @exclude      https://github.com/*
// @exclude      https://buildbot.orphis.net/*
// @exclude      https://www.5dm.app/*
// @exclude      https://www.dcard.tw/*
// @exclude      https://www.3dmgame.com/*
// @exclude      https:://imgbb.com/*
// @require      https://code.jquery.com/jquery-3.3.1.min.js
// @require      https://openuserjs.org/src/libs/sizzle/GM_config.js
// @require      https://cdn.jsdelivr.net/gh/machsix/gm4-polyfill@3ac89770e4dcb69123c749a71f101fb462eaada8/gm4-polyfill-mach6-legacy.js
// @grant        GM_getValue
// @grant        GM_setValue
// @namespace
// @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(){
    var div = document.createElement("div");
        div.innerHTML = "▞";
        div.setAttribute("class","pw_setting");
        var css = "position:fixed;top:10px;right:10px;z-index:999999999;width:5px;height:5px;line-height:1px;text-align:center;font-size:16px;font-family:Verdana, Arial, '楷体';font-weight:500;color:green;user-select:none;padding:0px;white-space:nowrap;border-radius:3px;border:0px solid red;cursor:pointer;";
        div.style.cssText = css;
        if(window.self === window.top){ document.body.appendChild(div);}
    set_GM_();

    $(document).on("mouseover", "a:not([onclick*='javascript'],[href*='mailto:'],[href*='.JPG'],[href*='.mkv'],[href*='.mpa'],[href*='.mp4'],[href*='.srt'],[href*='.ass'],[href*='.pkg'],[href*='.nsz'],[href*='.nsp'],[href*='.xci'],[href*='.ini'],[href*='.pdf'],[href*='.doc'],[href*='.txt'],[href*='.flv'],[href*='.mp3'],[href*='.js'],[href*='.exe'],[href*='.AppImage'],[href*='.rar'],[href*='.7z'],[href*='.zip'],[href*='.torrent'],[href*='magnet:'],[href*='.jpg'],[href*='.png'],[href='#'],[href*='javascript'])", function (event) {
        if(event.shiftKey && GM_config.get("preview_auto") == "自動")
        {
            return;
        }
        var target=$(this).attr("href");
        if(target!=undefined){
            if(target.match(/imgbox.com/))
            {
                return;
            }
            if(target.match(/github.com/))
            {
                return;
            }
            if(target.match(/bilibili.com/))
            {
                return;
            }
            if(target.match(/mall.yahoo.com/))
            {
                return;
            }
            if(target.match(/myauc/))
            {
                return;
            }
            if (GM_config.get("preview_auto") == "自動"){
                if($("#prelink", parent.document).length == 0 && $("#ytplayer", parent.document).length == 0)
                {
                    //防止彈出第二個預覽頁
                    $('body').append(parentDiv);
                }
            }
            else
            {
                $('body').append(parentDiv);
            }
            sty();

            var trr =target.split("&").pop().split("=");
            var tid = trr[1]
            var arr=target.split("?").pop().split("=");
            var vid = arr[1];
            var pid = arr[2];
            var yid = '?&autoplay=0&controls=1&rel=0&enablejsapi=1';
            var did = '?previous_page=app_code_link';

            if(window.location.href.match(/douyin.com/))
            {
                //抖音視頻
                target = target + did;
            }
            if(window.location.href.match(/youtube.com/))
            {
               var url = location.protocol +"//www.youtube.com/";
               $('#prelink').attr('id','ytplayer');

                if(pid!=undefined )
                {
                    if(tid == pid) //&t
                    {
                        vid = vid.substr(0,vid.length-2);
                        var vidur2=url+'embed/'+vid+yid;
                        $('#ytplayer').attr('src',`${vidur2}`);
                    }
                    else{
                        var pidurl=url+'embed/'+vid+'?list='+pid+yid;
                        $('#ytplayer').attr('src',`${pidurl}`);
                    }
                }
                else
                {
                    var vidurl = url+'embed/'+vid+yid;
                    $('#ytplayer').attr('src',`${vidurl}`);
                }
                $("#preview-a iframe").css({'border-width': '0px'});
                }
                $("#ytplayer").on("load", () => {

                if($("#ytplayer").contents().find(".ytp-error").length > 0)
                {
                    //無法播放影片的處理
                    $('#ytplayer').attr('id','prelink');;
                    $('#prelink').attr('src',`${target}`);
                    $("#preview-a iframe").css({'border-width': '5px'});
                }
                })

            $('#prelink').attr('src',target);

            //調位置開始
            var pcss = document.getElementById("preview-a");
            var psize = GM_config.get('preview_scale');
            pcss.style.transform = 'scale('+(psize)+')';
            if (GM_config.get('custom_size') == "是")
            {
                    pcss.style.width= GM_config.get('preview_width');
                    pcss.style.height= GM_config.get('preview_height');
            }

                if (GM_config.get("move_follow") == "是") {
                    //跟隨鼠標顯示,搭配小視窗使用
                    var oPosition = event.target.getBoundingClientRect()
                    var odiv =  document.getElementById("preview-a");
                    odiv.style.left = oPosition.x - GM_config.get('offset_pw') + "px";
                    odiv.style.top = 0 + "px";
                }
            if(GM_config.get("preview_auto") != "自動")
            {
                resetoPostion();
                if (GM_config.get("preview_hide") == "移去框外") {
                    $("#preview-a").mouseout(function(){
                        if(isFullScreen())
                        {
                            return;
                        }
                        else
                        {
                            if (GM_config.get("preview_auto") == "自動") {
                                $("#prelink").attr("src","");
                                $("#ytplayer").attr("src","");
                            }
                            $("#preview-a").remove();
                            clearTimeout(timer);
                        }
                    })
                }
                cleaniframeelm();
            }
            else
            {
                timer = setTimeout(function(){
                    if(!event.shiftKey && (GM_config.get("preview_auto") == "自動"))
                    {
                        $("#preview-a").show();
                        if (GM_config.get("preview_center") == "是") {
                            $("#preview-a").center();
                        }
                    }
                    resetoPostion();
                    if (GM_config.get("preview_hide") == "移去框外") {
                        $("#preview-a").mouseout(function(e){
                            if (GM_config.get("preview_auto") == "自動") {
                                if(e.shiftKey)
                                {
                                    return;
                                }
                            }
                            if(isFullScreen())
                            {
                                return;
                            }
                            else
                            {
                                if (GM_config.get("preview_auto") == "自動") {
                                    $("#prelink").attr("src","");
                                    $("#ytplayer").attr("src","");
                                }
                                $("#preview-a").remove();
                                clearTimeout(timer);
                            }
                        })
                    }
                    cleaniframeelm();
                },GM_config.get('preview_speed')); //調整預覽頁出現的時間,數字減少更快出現,數字增加延遲出現
            }}
    });
});

$(document).keydown(function(event){
    if(event.which == 16 && (GM_config.get("preview_auto") == "按住SHIFT鍵"))
    {
        clearTimeout(timer);
        $("#preview-a").show();
        if (GM_config.get("preview_center") == "是") {
                     $("#preview-a").center();
        clearTimeout(timer);
        }
    }
})

$(document).keyup(function(event){
    if(event.which == 16 && GM_config.get("preview_auto") == "按下SHIFT鍵才觸發")
    {
        clearTimeout(timer);
        $("#preview-a").toggle();
        if (GM_config.get("preview_center") == "是") {
                     $("#preview-a").center();
        }
        clearTimeout(timer);
    }
    else if(event.which == 16 && (GM_config.get("preview_auto") == "按住SHIFT鍵"))
    {
        $("#preview-a").remove()
        clearTimeout(timer);
    }
    else
    {
        return;
    }
})

$(document).click(function(){
        $("#preview-a").remove()
    }
)

function cleaniframeelm(){
{//移除不想要的網站元素,加快預覽頁的載入速度
       $("#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廣告
                })
}
}

function resetoPostion(){
        var odiv = document.getElementById("preview-a");
        if(!odiv)  return;
        var oCpostion = odiv.getBoundingClientRect()
        var oTop = oCpostion.top;
        var oHeight = oCpostion.height;
        var oLeft = oCpostion.left;
        var oRight = oCpostion.right;
        var oBottom = oCpostion.Bottom;
        var oWidth = oCpostion.width;
        var wh = document.documentElement.clientHeight;
        var ww = document.documentElement.clientWidth;
        /*if(oTop > wh / 2 + 30){
            if(GM_config.get('custom_size') == "否")
            {
              odiv.style.top = oTop - wh /2 -100 +'px';

            }
            else
            {
                odiv.style.top = oTop - oHeight + GM_config.get('offset_pwout') +'px';
            }
        }*/
        if(oLeft > ww / 2 + 100){
            if(GM_config.get('custom_size') == "否")
            {
              odiv.style.left = oLeft - ww/2 + 100 +'px';

            }
            else
            {
                odiv.style.left = oLeft - oWidth + GM_config.get('offset_pwout') +'px';
            }
    }
    /*if(oTop < 0)
        {
            odiv.style.top = 0;
        }*/
}

jQuery.fn.center = function () {
                this.css("position","absolute");
                this.css("top", Math.max(0, (($(window).height() - $(this).outerHeight()) / 2) +
                                                $(window).scrollTop()) + "px");
                this.css("left", Math.max(0, (($(window).width() - $(this).outerWidth()) / 2) +
                                                $(window).scrollLeft()) + "px");
                return this;
            }

$(document).on("mouseout", "a", function () {
    clearTimeout(timer);
    });

function isFullScreen() {
    return  !! (
        document.fullscreen ||
        document.mozFullScreen ||
        document.webkitIsFullScreen ||
        document.webkitFullScreen ||
        document.msFullScreen
    );
}

function sty(){
    //調整預覽頁的介面
    $("#preview-a").css({
        'background': '#fff',
        'position': 'fixed',
        'z-index': 2147483647,
        'left': '0',
        //'top': '0',
        'bottom': '0',
        'right': '0',
        'margin': '0px auto;',
        'border-radius': GM_config.get('border_circle'), //邊框角度
        'display':'none',
    })
    $("#preview-a iframe").css({
        'z-index': 2147483647,
        'border': 'none',
        'width': '100%',
        'height': '100%',
        'left': '0',
        'top': '0',
        'margin': '0px auto;',
        'border-radius': GM_config.get('border_circle'), //邊框角度
        'border-width': GM_config.get('border_width'), //框線寬度
        'border-color':GM_config.get('border_color'),
        'border-style':'solid',
        'display':'inline-block',
        'position': 'absolute'
    });
}

function set_GM_() {
    const frame = document.createElement("div");
    document.body.appendChild(frame);
    GM_config.init({
      id: "pw_setting",
      title: "預覽網頁的設定",
      fields: {
        preview_auto: {
          label: "彈出預覽框的方式<br>*選自動要釘住預覽頁要持續按住SHIFT鍵不放,變換全屏時不按住有機率直接跳掉<br>*按SHIFT鍵觸發可再按一次SHIFT鍵隱藏<br>*按住SHIFT鍵是鬆開後自動隱藏,要釘住預覽頁只需在空白處點滑鼠左鍵<br>*選自動以外的模式在頁面空白處點擊滑鼠左鍵後可再彈出第二個預覽頁<br>*自動觸發可支援捷克論壇,其他模式可能被擋住",
          type: "radio",
          options: ["自動", "按下SHIFT鍵才觸發","按住SHIFT鍵"],
          default: "自動"
        },
        preview_scale: {
          label: "預覽框的縮放倍數",
          type: "text",
          default: "85%"
        },
        preview_hide: {
          label: "預覽框的隱藏方式",
          type: "radio",
          options: ["移去框外", "點擊框外(全屏完美)"],
          default: "移去框外"
        },
        move_follow: {
          label: "預覽框跟隨滑鼠移動",
          type: "radio",
          options: ["是", "否"],
          default: "是"
        },
        offset_pw: {
          label: "預覽框的偏移值(當預設的版面偏離滑鼠位置太多時調整),自適應出現的版面太小時是調這個",
          type: "text",
          default: "100"
        },
        offset_pwout: {
          label: "預覽框出界的偏移值(當預設的版面偏離滑鼠位置太多時調整)",
          type: "text",
          default: "60"
        },
        custom_size: {
          label: "自訂預覽框大小(選否等於自適應版面,適合配跟隨滑鼠移動使用,改完要刷新才正常)",
          type: "radio",
          options: ["是", "否"],
          default: "否"
        },
        preview_width: {
          label: "預覽框的寬度",
          type: "text",
          default: "100%"
        },
        preview_height: {
          label: "預覽框的高度",
          type: "text",
          default: "100%"
        },
        preview_center: {
          label: "預覽框置中顯示,改完要刷新才正常",
          type: "radio",
          options: ["是", "否"],
          default: "否"
        },
        border_width: {
          label: "框線寬度",
          type: "text",
          default: "5px"
        },
        border_color: {
          label: "框線顏色",
          type: "text",
          default: "pink"
        },
        border_circle: {
          label: "邊框角度",
          type: "text",
          default: "30px"
        },
        preview_speed: {
          label: "預覽頁的出現速度(1000等於1秒)",
          type: "text",
          default: "850"
        },
      },
      frame
    });
    $(".pw_setting").click(() => {
      GM_config.open();

      $("#pw_setting").css({
        position: "fixed",
        right: "1%",
        left: "auto",
        height: "500px",
        width: "430px"
      });
      $("#pw_setting")
        .contents()
        .find("#pw_setting_header")
        .css({
          margin: "10px"
        });
      $("#pw_setting")
        .contents()
        .find(".field_label")
        .css({
          margin: "10px"
        });
      $("#pw_setting")
        .contents()
        .find("#pw_setting_field_preview_auto")
        .css({
          margin: "10px"
        });
      $("#pw_setting")
        .contents()
        .find("#pw_setting_field_preview_scale")
        .css({
          margin: "10px"
        });
      $("#pw_setting")
        .contents()
        .find("#pw_setting_field_preview_hide")
        .css({
          margin: "10px",
        });
      $("#pw_setting")
        .contents()
        .find("#pw_setting_field_move_follow")
        .css({
          margin: "10px"
        });
      $("#pw_setting")
        .contents()
        .find("#pw_setting_field_offset_pw")
        .css({
          margin: "10px"
        });
      $("#pw_setting")
        .contents()
        .find("#pw_setting_field_custom_size")
        .css({
          margin: "10px"
        });
      $("#pw_setting")
        .contents()
        .find("#pw_setting_field_preview_width")
        .css({
          margin: "10px"
        });
      $("#pw_setting")
        .contents()
        .find("#pw_setting_field_preview_height")
        .css({
          margin: "10px"
        });
      $("#pw_setting")
        .contents()
        .find("#pw_setting_field_preview_center")
        .css({
          margin: "10px"
        });
      $("#pw_setting")
        .contents()
        .find("#pw_setting_field_border_width")
        .css({
          margin: "10px"
        });
      $("#pw_setting")
        .contents()
        .find("#pw_setting_field_border_color")
        .css({
          margin: "10px"
        });
      $("#pw_setting")
        .contents()
        .find("#pw_setting_field_border_circle")
        .css({
          margin: "10px"
        });
      $("#pw_setting")
        .contents()
        .find("#pw_setting_field_preview_speed")
        .css({
          margin: "10px"
        });
      });
  }