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

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

当前为 2021-09-12 提交的版本,查看 最新版本

您需要先安装一个扩展,例如 篡改猴Greasemonkey暴力猴,之后才能安装此脚本。

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

您需要先安装一个扩展,例如 篡改猴暴力猴,之后才能安装此脚本。

您需要先安装一个扩展,例如 篡改猴Userscripts ,之后才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey,才能安装此脚本。

您需要先安装用户脚本管理器扩展后才能安装此脚本。

(我已经安装了用户脚本管理器,让我安装!)

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

(我已经安装了用户样式管理器,让我安装!)

// ==UserScript==
// @name         預覽網頁(改) (preview web page)
// @namespace
// @version      4.02
// @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*='.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*='.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(/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 = oPosition.y - GM_config.get('offset_pw') + "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"
        });
      });
  }