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

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

当前为 2021-08-25 提交的版本,查看 最新版本

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

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

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

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

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

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

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

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

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

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

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

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

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

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

// ==UserScript==
// @name         預覽網頁(改),懸停0.8s出現框架頁預覽(preview web page) 支援youtube
// @namespace
// @version      3.42
// @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
// @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([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 && $("#ytplayer", 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/))
            {
               $('#prelink').attr('id','ytplayer');
                var url = location.protocol +"//www.youtube.com/";
                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 fid = '?&autoplay=1&controls=1&rel=0&enablejsapi=1';
                if(pid!=undefined )
                {
                    if(tid == pid) //&t
                    {
                        vid = vid.substr(0,vid.length-2);
                        var vidur2=url+'embed/'+vid+fid;
                        $('#ytplayer').attr('src',`${vidur2}`);
                    }

                    else{
                        var pidurl=url+'embed/'+vid+'?list='+pid+fid;
                        $('#ytplayer').attr('src',`${pidurl}`);
                    }
                }
                else
                {
                    var vidurl=url+'embed/'+vid+fid;
                    $('#ytplayer').attr('src',`${vidurl}`);
                }
                $("#preview-a iframe").css({'outline': '0px solid pink'});
                }
                $("#ytplayer").load(function(){
                if($("#ytplayer").contents().find(".ytp-error").length > 0)
                {
                    //無法播放影片的處理
                    $('#ytplayer').attr('id','prelink');;
                    $('#prelink').attr('src',`${target}`);
                    $("#preview-a iframe").css({'outline': '5px solid pink'});
                }
                })

            //加入置中函數
            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;
            }
            if (GM_config.get("preview_center") == "是") {
                $("#preview-a").center();
            }
            //設定框架頁於中央置中
            if (GM_config.get('custom_size') == "是")
                {
                    var  pcss = document.getElementById("preview-a");
                    pcss.style.width= GM_config.get('preview_width');
                    pcss.style.height= GM_config.get('preview_height');
                }
            timer = setTimeout(function(){
                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";
                }

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

                if (GM_config.get("preview_hide") == "移去框外") {
                    $("#preview-a").mouseout(function(e){
                        if(e.shiftKey || isFullScreen())
                        {
                            return;
                        }
                        else
                        {
                            $("#preview-a").remove();
                            $("#prelink").remove();
                            $("#ytplayer").remove();
                            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廣告
                })
            },GM_config.get('preview_speed')); //調整預覽頁出現的時間,數字減少更快出現,數字增加延遲出現
        }
    });
    });

$(document).click(function(){
        $("#preview-a").remove();
        $("#prelink").remove();
        $("#ytplayer").remove();
        clearTimeout(timer);
    }
)

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 oWidth = oCpostion.width;
        var wh = document.documentElement.clientHeight;
        var ww = document.documentElement.clientWidth;
        if(oTop > wh / 2){
            odiv.style.top = oTop - oHeight - GM_config.get('offset_pwout'); +'px';
        }
        if(oLeft > ww / 2 +100){
            odiv.style.left = oLeft - oWidth + GM_config.get('offset_pwout'); +'px';
    }
}

$(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',
        'z-index': 2147483647,
        'left': '0',
        //'top': '0',
        'bottom': '0',
        'right': '0',
        'margin': '0px auto;',
        'scale': GM_config.get('preview_size'), //喜歡小視窗的可以調這裡,預覽頁是否縮放? 調100%就是原封不動的大小
        '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'), //邊框角度
        'outline': GM_config.get('border_width'), //框線寬度
        '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_size: {
          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: "60"
        },
        offset_pwout: {
          label: "預覽框出界的偏移值(當預設的版面偏離滑鼠位置太多時調整),<br>自適應出現的版面太小時是調這個",
          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 solid 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_size")
        .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_circle")
        .css({
          margin: "10px"
        });
      $("#pw_setting")
        .contents()
        .find("#pw_setting_field_preview_speed")
        .css({
          margin: "10px"
        });
      });
  }