在页面右侧预览超链接内容。直接点击链接，将在页面右侧打开链接内容；按 shift 点击链接，将在本页跳转到链接内容；按 ctrl 或 cmd 点击链接，将在新标签页打开链接内容；同时按 shift 和 ctrl 或 shift 加 cmd 点击右侧预览页面内部的链接，将在本页面跳转到点击链接的内容。请自行添加白名单。
目前為
// ==UserScript==
// @name:cn 超链接预览器
// @name linkPreviewer
// @namespace leizingyiu.net
// @version 2022.10.08
// @author leizingyiu
// @include http*://*.one-tab.com/page/*
// @include /http.*:\/\/\d*\.\d*\.\d*\.\d*:*\d*.*/
// @include file://*
// @grant none
// @description 在页面右侧预览超链接内容。直接点击链接，将在页面右侧打开链接内容；按 shift 点击链接，将在本页跳转到链接内容；按 ctrl 或 cmd 点击链接，将在新标签页打开链接内容；同时按 shift 和 ctrl 或 shift 加 cmd 点击右侧预览页面内部的链接，将在本页面跳转到点击链接的内容。请自行添加白名单。
// @license GNU AGPLv3
// ==/UserScript==
const pageWName = '页面宽度',
frameWName = '窗口宽度',
widthSettings = {
'one-tab.com': {
'页面宽度': 1440,
'窗口宽度': '64%'
}
},
contentSpecifyWidth = {
'zcool.com.cn': 1440
};
let pageW = 1440,
frameW = 480;
const iframeId = 'yiu_linkPreview_iframe',
iframeClass = 'yiu_linkPreview',
bodyClass = 'yiu_previewPage',
aClass = 'yiu_previewing',
searchName = 'yiu_link_previewer';
let scaleK = frameW / pageW;
Object.keys(widthSettings).filter(u => window.location.host.includes(u)).map(u => {
let w = window.innerWidth;
let pW = widthSettings[u][pageWName],
fW = widthSettings[u][frameWName];
console.log(w, pW, fW);
const widthNumFn = (n, w) => typeof n == 'string' && n.includes('%') ?
Number(n.replace(/%/g, '')) / 100 * w :
(isFinite(Number(n)) ? Number(n) : NaN);
pW = widthNumFn(pW, w), fW = widthNumFn(fW, w);
pageW = pW, frameW = fW;
console.log(w, pW, fW);
scaleK = fW / pW;
});
bodyCapture = false;
aCapture = true;
let iframe = document.createElement('iframe');
iframe.id = iframeId;
iframe.classList.add(iframeClass);
document.body.appendChild(iframe);
let style = document.createElement('style');
style.innerHTML = `
iframe#${iframeId}{
width:${pageW}px; height:${100 / scaleK}vh;
position:fixed; top:0; right:-100vw;
transform:scale(0,${scaleK});
transform-origin:right top;
pointer-events: none;
opacity:0;
background: #fffa;
}
body.${bodyClass}{
padding-right:${pageW * scaleK}px;
}
body.${bodyClass} iframe#${iframeId}.${iframeClass}{
transform:scale(${scaleK})!important;
right:0!important;
pointer-events:auto;
opacity:1;
}
a.${aClass}{
background: var(--bgc);
color: #fff;
}
a{transition:background 0.5s ease;}
body{transition:padding 0.5s ease;}
iframe{transition:transform 0.5s ease , right 0.5s ease, opacity 0.3s ease;}
`;
document.body.appendChild(style);
function iframeFitContentWidth() {
Object.keys(contentSpecifyWidth).filter(u => iframe.src.includes(u)).map(u => {
let tempPW = contentSpecifyWidth[u],
tempScaleK = frameW / tempPW;
iframe.style.cssText =
` width:${tempPW}px; height:${100 / tempScaleK}vh;
transform:scale(${tempScaleK})!important;`;
document.body.style.paddingRight = tempPW * tempScaleK + 'px';
});
}
function cleanSpecifyStyle() {
iframe.style.cssText = '';
document.body.style.paddingRight = 'auto';
}
function bodyClickFn() {
console.trace('bodyClick');
document.body.classList.remove(bodyClass);
[...document.querySelectorAll(`.${aClass}`)].map(_a => {
_a.classList.remove(aClass);
});
cleanSpecifyStyle();
}
[...document.querySelectorAll('a')].filter(a => !a.href.match(/^javascript/)).map(a => {
a.style.setProperty('--bgc', `hsl(${360 * Math.random()}deg ${70 + 20 * Math.random()}% 50%)`);
a.removeAttribute('target');
a.setAttribute('data-link', a.href);
a.setAttribute('href', 'javascript:void 0;');
let origFn = a.onclick;
a.addEventListener('click', function (ev) {
const openBoo = ev.ctrlKey || ev.metaKey,
jumpBoo = ev.shiftKey;
if (openBoo == false && jumpBoo == false) {
console.log(a.getAttribute('class'), a.classList.contains(aClass));
if (!a.classList.contains(aClass)) {
setTimeout(function () {
a.classList.add(aClass);
iframe.src = a.getAttribute('data-link');
cleanSpecifyStyle()
iframeFitContentWidth();
document.body.classList.add(bodyClass);
var url = new URL(window.location),
search = new URLSearchParams(url.search);
search.set(searchName, JSON.stringify(a.getAttribute('data-link')));
url.search = search.toString();
window.history.pushState(null, null, url.href);
}, 200);
}
document.body.classList.remove(bodyClass);
[...document.querySelectorAll(`.${aClass}`)].map(_a => {
_a.classList.remove(aClass);
});
iframe.src = null;
return false;
} else {
if (origFn) {
origFn();
}
if (a.getAttribute('data-link')) {
if (openBoo == true && jumpBoo == true) {
top.location.href = a.getAttribute('data-link');
} else if (openBoo == true) {
window.open(a.getAttribute('data-link'), '_blank');
} else {
window.location.href = a.getAttribute('data-link');
}
}
}
}, aCapture);
a.onmouseenter = function () {
// console.log(a,'in');
document.body.removeEventListener('click', bodyClickFn);
}
a.onmouseleave = function () {
// console.log(a,'out');
document.body.addEventListener('click', bodyClickFn, bodyCapture);
}
}, false);
document.body.addEventListener('click', bodyClickFn, bodyCapture);
window.addEventListener('load', function () {
setTimeout(
function () {
let url = new URL(window.location),
search = new URLSearchParams(url.search);
let frameSrc = search.get(searchName);
if (frameSrc) {
let srcUrl = new URL(decodeURIComponent(JSON.parse(frameSrc)));
iframe.src = srcUrl.href;
cleanSpecifyStyle();
iframeFitContentWidth()
document.body.classList.add(bodyClass);
};
}, 100
)
});