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

會彈出個框架頁,讓你不用切換頁面就能看內容,關閉預覽頁也只要滑鼠移出預覽頁範圍。可選擇停在連結上或按SHIFT鍵或按住滑鼠左右鍵彈出預覽框

目前為 2022-02-27 提交的版本,檢視 最新版本

您需要先安裝使用者腳本管理器擴展,如 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.08
// @description  會彈出個框架頁,讓你不用切換頁面就能看內容,關閉預覽頁也只要滑鼠移出預覽頁範圍。可選擇停在連結上或按SHIFT鍵或按住滑鼠左右鍵彈出預覽框
// @author       kater4343587
// @include      http://*
// @include      https://*
// @exclude      https://blog.xuite.net/*
// @exclude      https://ck101.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
// @license MIT
// @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*='mpv://'],[href*='action-download'],[href*='attachment'],[href='#'],[href*='javascript'],[href*='.json'],[href*='.patch'],[href*='.bat'],[href*='.dll'],[href*='.cia'],[href*='.cci'],[href*='.3ds'],[href*='.ws'],[href*='.sfc'],[href*='.PBP'],[href*='.pbp'],[href*='.pce'],[href*='.ngp'],[href*='.sms'],[href*='.iso'],[href*='.bin'],[href*='.nes'],[href*='.gb'],[href*='.gba'],[href*='.cfg'],[href*='.VPK'],[href*='.vpk'],[href*='.mka'],[href*='.rmvb'],[href*='.m3u'],[href*='.m3u8'],[href*='.apk'],[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'])", 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(/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 = -35 + "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).on("mousedown", "a", function (event) {
    if(GM_config.get("preview_auto") == "自動"){return;}
    timer = setTimeout(function() {
        if(event.which == 1 && GM_config.get("preview_auto") == "按住滑鼠左鍵")
        {
           $("#preview-a").show();
            resetoPostion()
            if (GM_config.get("preview_center") == "是") {
                $("#preview-a").center();
            }
        }
        else if(event.which == 3 && GM_config.get("preview_auto") == "按住滑鼠右鍵")
        {
            $("#preview-a").show();
            resetoPostion()
            if (GM_config.get("preview_center") == "是") {
                $("#preview-a").center();
            }
        }
        else
        {
            return;
        }

     },GM_config.get('preview_speed'))}
)

$(document).keyup(function(event){
    if(event.which == 16 && GM_config.get("preview_auto") == "按下SHIFT鍵才觸發")
    {
        clearTimeout(timer);
        $("#preview-a").toggle();
        resetoPostion()
        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(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';
            }
    }
}

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"
        });
      });
  }