滑鼠停在連結上會彈出個框架頁,讓你不用切換頁面就能看內容,關閉預覽頁也只要將滑鼠移出預覽頁範圍內即可,完全不用點擊
目前為
// ==UserScript==
// @name 預覽網頁(改)，懸停0.8s出現框架頁預覽(preview web page) 支援youtube
// @namespace
// @version 3.43
// @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: "預覽框的偏移值(當預設的版面偏離滑鼠位置太多時調整),<br>自適應出現的版面太小時是調這個",
type: "text",
default: "60"
},
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 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"
});
});
}