JavaScript网页优化

已于 2024-06-02 02:14:48 修改
阅读量355 收藏
点赞数
分类专栏： JavaScript 文章标签： javascript 前端 html
于 2023-02-25 00:32:04 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_43111676/article/details/129210785
版权

JavaScript网页优化

常用复制

(function () {
    console.log("hello");
})();

// Chrome浏览器书签使用
JavaScript: (function () {
    console.log("hello");
})();

// js代码在线压缩网站
// https://www.bejson.com/jshtml_format/
// https://www.sojson.com/yasuojs.html
// css代码在线压缩网站
// https://www.runoob.com/csspack

try {
    console.log("hello");
} catch (error) {
    console.error('捕获到异常\n', error);
}

html相关


document.querySelector("html").setAttribute("translate", "no");
document.querySelector("html").setAttribute("lang", "zh-CN");

document.querySelector("html").style.filter = 'grayscale(0%)';  // 正常色
document.querySelector("html").style.filter = 'grayscale(100%)';  // 灰色

// 删除iframe
document.querySelectorAll("iframe").forEach(e => e.remove());

// 使用jQuery，将屏幕滚动到指定元素位置
$(document).scrollTop($("#xxxx").offset().top - 1);
jQuery(document).scrollTop(jQuery(document).outerHeight(true));  // 滚动到底部

网页编辑模式

// 开启
document.designMode = 'on';
document.body.contentEditable = 'true';

// 关闭
document.designMode = 'off';
document.body.contentEditable = 'inherit';

// designMode开关切换
(function () {
    if (document.designMode == 'on') {
        document.designMode = 'off';
        console.log("designMode 已关闭");
    } else {
        document.designMode = 'on';
        console.log("designMode 已开启");
    }
})();

在新标签页中打开链接

// 整个网页
(function () {
    // <base target="_blank">
    let base = document.createElement('base');
    base.target = "_blank";
    document.head.appendChild(base);
})();

// <a>标签
document.querySelectorAll("a").forEach(e => {
    e.setAttribute("target", "_blank");  // 新标签页打开
    // e.setAttribute("target", "_self");  // 当前窗口打开(默认)
});

给页面添加style标签

css压缩工具：https://www.runoob.com/csspack

jQuery方式

if ($("#tzextension-hide").length < 1) {
    // $(document.head).append(`xxxxx`);
    $(document.head).append(`<style id="tzextension-hide">
            #articleSearchTip,
            .passport-login-container,
            .passport-login-tip-container {
                display: none !important;
            }
            </style>`);
}

原生JavaScript方式

if (document.querySelectorAll('#tzextension-custom').length < 1) {
    let element = document.createElement('style');
    element.id = 'tzextension-custom';
    // element.innerHTML = `xxxxx`;
    element.innerHTML = `
    div.xxxxx {
        display: none !important;
    }
    div.MjjYud > div.g > div {
        box-sizing: content-box;
        margin: 0 0 20px 0;
        padding: 15px;
        border-radius: 10px;
        border: 2px solid #ccc;
        background-color: #f8f8f8;
    }
    div.MjjYud > div.g > div:hover {
        border-color: blueviolet;
        background-color: #ffeb3b;
    }
`;
    document.head.appendChild(element);
}

判断jQuery

(function () {
    if (typeof (jQuery) == 'function') {
        console.log("jQuery 可以正常使用");
    } else {
        console.log("jQuery 异常");
    }
})();

localStorage用法

localStorage.setItem("key", "value");
localStorage.getItem("key");  // null
localStorage.removeItem("key");
localStorage.clear();

console.table(localStorage);

快速填写input框的内容

自动填充方式

JavaScript:(function () {
    let textValue = "123456";
    let e = document.activeElement;
    while (e && e.tagName === 'IFRAME') {
        e = e.contentWindow.document.activeElement;
    }
    if (e && e.tagName === 'INPUT') {
        e.value = textValue;
    }
})();


// 压缩为一行
JavaScript:(function(){let textValue="123456";let e=document.activeElement;while(e&&e.tagName==='IFRAME'){e=e.contentWindow.document.activeElement}if(e&&e.tagName==='INPUT'){e.value=textValue}})();

浏览器书签脚本

jQuery引入

源码方式

JavaScript:(function () {
    if (typeof (jQuery) == 'function') {
        console.log("jQuery 可以正常使用");
        alert("jQuery 可以正常使用");
    } else {
        console.error("jQuery 异常");
        console.log("jQuery 正在导入...");
        document.querySelector("html").setAttribute("translate", "no");
        document.querySelector("html").setAttribute("lang", "zh-CN");
        try {
            // jQuery源码放入此行

        } catch (error) {
            console.error('jQuery执行出错', "捕获到异常\n", error);
        }
        setTimeout(function () {
            let res = (typeof (jQuery) == 'function');
            console.log("jQuery 导入结果:", res);
            alert("jQuery 导入结果: " + res);
        }, 1000);
    }
})();

压缩为一行

//

script标签方式

JavaScript:(function () {
    if (typeof (jQuery) == 'function') {
        console.log("jQuery 可以正常使用");
        alert("jQuery 可以正常使用");
    } else {
        console.error("jQuery 异常");
        console.log("jQuery 正在导入...");
        document.querySelector("html").setAttribute("translate", "no");
        document.querySelector("html").setAttribute("lang", "zh-CN");
        try {
            let script = document.createElement("script");
            script.src = "https://s3.pstatp.com/cdn/expire-1-M/jquery/3.3.1/jquery.min.js";
            document.head.appendChild(script);
        } catch (error) {
            console.error('jQuery执行出错', "捕获到异常\n", error);
        }
        setTimeout(function () {
            let res = (typeof (jQuery) == 'function');
            console.log("jQuery 导入结果:", res);
            alert("jQuery 导入结果: " + res);
        }, 1000);
    }
})();

压缩为一行

JavaScript:(function(){if(typeof(jQuery)=='function'){console.log("jQuery 可以正常使用");alert("jQuery 可以正常使用")}else{console.error("jQuery 异常");console.log("jQuery 正在导入...");document.querySelector("html").setAttribute("translate","no");document.querySelector("html").setAttribute("lang","zh-CN");try{let script=document.createElement("script");script.src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.3.1/jquery.min.js";document.head.appendChild(script)}catch(error){console.error('jQuery执行出错',"捕获到异常\n",error)}setTimeout(function(){let res=(typeof(jQuery)=='function');console.log("jQuery 导入结果:",res);alert("jQuery 导入结果: "+res)},1000)}})();

iframe元素删除

JavaScript:(function(){document.querySelectorAll("iframe").forEach(e=>e.remove())})();

ins.adsbygoogle删除

JavaScript: (function () {
    if (document.querySelectorAll('#tzextension-hide-adsbygoogle').length < 1) {
        let element = document.createElement('style');
        element.id = 'tzextension-hide-adsbygoogle';
        element.innerHTML = `ins.adsbygoogle{display:none !important;}`;
        document.head.appendChild(element);
    }
    document.querySelectorAll("ins.adsbygoogle").forEach(e => e.remove())
})();

// 压缩为一行
JavaScript:(function(){if(document.querySelectorAll('#tzextension-hide-adsbygoogle').length<1){let element=document.createElement('style');element.id='tzextension-hide-adsbygoogle';element.innerHTML=`ins.adsbygoogle{display:none!important}`;document.head.appendChild(element)}document.querySelectorAll("ins.adsbygoogle").forEach(e=>e.remove())})();

designMode切换

designMode网页编辑模式

JavaScript:(function () {
    if (document.designMode == 'on') {
        document.designMode = 'off';
        document.body.contentEditable = 'inherit';
        console.log("designMode 已关闭");
        alert("designMode 已关闭");
    } else {
        document.designMode = 'on';
        document.body.contentEditable = 'true';
        console.log("designMode 已开启");
        alert("designMode 已开启");
    }
})();

压缩为一行

JavaScript:(function(){if(document.designMode=='on'){document.designMode='off';document.body.contentEditable='inherit';console.log("designMode 已关闭");alert("designMode 已关闭")}else{document.designMode='on';document.body.contentEditable='true';console.log("designMode 已开启");alert("designMode 已开启")}})();

切换黑白和彩色

JavaScript: (function () {
    let tzFilter = window.getComputedStyle(document.querySelector("html")).filter;
    if (tzFilter != 'grayscale(1)' && tzFilter != 'grayscale(100%)') {
        document.querySelector("html").style.filter = 'grayscale(100%)';  // 灰色
        console.log("html已设置成灰色");
    } else {
        document.querySelector("html").style.filter = 'grayscale(0%)';  // 正常色
        console.log("html已设置成正常色");
    }
})();

压缩为一行

JavaScript:(function(){let tzFilter=window.getComputedStyle(document.querySelector("html")).filter;if(tzFilter!='grayscale(1)'&&tzFilter!='grayscale(100%)'){document.querySelector("html").style.filter='grayscale(100%)';console.log("html已设置成灰色")}else{document.querySelector("html").style.filter='grayscale(0%)';console.log("html已设置成正常色")}})();

复制文字

JavaScript:(function () {
    let textValue = `123456`;
    (function (text) {
        let element = document.createElement('textarea');
        element.value = text;
        element.style.position = 'fixed';
        element.style.top = '0px';
        element.style.left = '-9999px';
        element.style.width = '100px';
        element.style.height = '100px';
        element.style.zIndex = '-9999';
        document.body.appendChild(element);
        element.select();
        let flag = false;
        if (document.execCommand('copy')) {
            flag = true;
            document.execCommand('copy');
        }
        document.body.removeChild(element);
        if (!flag) {
            console.error('copy失败\n' + text);
            alert(`copy失败  ${text}`)
        }
        return flag;
    })(textValue);
})();

压缩为一行

JavaScript:(function(){let textValue=`123456`;(function(text){let element=document.createElement('textarea');element.value=text;element.style.position='fixed';element.style.top='0px';element.style.left='-9999px';element.style.width='100px';element.style.height='100px';element.style.zIndex='-9999';document.body.appendChild(element);element.select();let flag=false;if(document.execCommand('copy')){flag=true;document.execCommand('copy')}document.body.removeChild(element);if(!flag){console.error('copy失败\n'+text);alert(`copy失败${text}`)}return flag})(textValue)})();

网页加入自定义面板

// (function(){})();

(function () {
    if ($("#fywy-drag").length > 0) {
        return;
    }
    $(document.body).append('<div id="fywy-drag">工具栏</div>');
    let fywyDrag = $("#fywy-drag");
    fywyDrag.css({
        'position': 'fixed',
        'left': '10px',
        'top': '10px',
        'width': '50px',
        'height': '100px',
        'box-sizing': 'border-box',
        'margin': '1px',
        'background-color': '#fff',
        'cursor': 'pointer',
        'color': '#555',
        'font-size': '12px',
        'font-family': 'Microsoft YaHei UI',
        "text-align": "center",
        'user-select': 'none',
        'border': '1px solid #eab433',
        'border-radius': '4px',
        'box-shadow': '0px 0px 10px #d9d9d9',
        'z-index': '9999',
    });
    let fywyDragging = false;
    let fywyDragClick = false;
    let clickXY = {};
    fywyDrag.on('mousedown', function (e) {
        clickXY = {
            x: e.clientX - fywyDrag.css('left').replace('px', ''),
            y: e.clientY - fywyDrag.css('top').replace('px', ''),
        };
        fywyDragging = true;
        fywyDragClick = true;
    });
    $(document).on('mousemove', function (e) {
        if (fywyDragging) {
            let newLeft = e.clientX - clickXY.x;
            let newTop = e.clientY - clickXY.y;
            newLeft = newLeft < 0 ? 0 : newLeft;
            newTop = newTop < 0 ? 0 : newTop;
            let maxLeft = $(window).width() - fywyDrag.outerWidth(true);
            let maxTop = $(window).height() - fywyDrag.outerHeight(true);
            newLeft = newLeft > maxLeft ? maxLeft : newLeft;
            newTop = newTop > maxTop ? maxTop : newTop;
            fywyDrag.css({
                'left': newLeft + 'px',
                'top': newTop + 'px',
                'cursor': 'move'
            });
            fywyDragClick = false;
        }
    }).on('mouseup', function () {
        fywyDragging = false;
        fywyDrag.css('cursor', 'pointer');
    });
    fywyDrag.hover(function () {
        fywyDrag.css('background-color', '#1890ff');
        // fywyDrag.css('background-color', '#409eff');
        // fywyDrag.css('background-color', '#53a8ff');
    }, function () {
        fywyDrag.css('background-color', '#fff');
    });
    fywyDrag.click(function () {
        if (!fywyDragClick) {
            return;
        }
        let fywyPanel = $("#fywy-panel");
        if (fywyPanel.css('display') == 'none') {
            fywyPanel.show();
        } else {
            fywyPanel.hide();
        }
    });

    $(document.body).append('<div id="fywy-panel">xxxxx</div>');
    let fywyPanel = $("#fywy-panel");
    fywyPanel.css({
        'width': '300px',
        'height': '300px',
        'padding': '10px',
        'border-radius': '10px',
        'background-color': 'pink',
        'position': 'fixed',
        'box-shadow': '0px 0px 10px #d9d9d9',
        'filter': 'drop-shadow(rgba(0, 0, 0, .14) 0 0 6px)',
        'left': '100px',
        'top': '100px',
        'z-index': '999',
    });
    fywyPanel.hide();
})();

(function () {
    if ($('#fywy-btn-xxx').length > 0) {
        return;
    }
    let fywyPanel = $("#fywy-panel");
    fywyPanel.append('<br><button id="fywy-btn-xxx">按钮A</button>');
    $('#fywy-btn-xxx').click(function () {
        alert("按钮测试");
    });
})();
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值