两个小时写了一个无广告版:百度搜索

2018-10-23 admin

效果见图:

clipboard.png

不为别的,怕家人搜索到不该搜索的东西、致命的毒药,医院…

代码逻辑目前比较简单,只实现了接口调用,还没有进行过多逻辑判断,这里跟大家分享的目的也是希望人人都能使用安全卫生的搜索环境:

完整代码:(需要油猴浏览器插件)

// ==UserScript==
// @name         jsoncode的安全模式
// @namespace    test
// @version      0.1
// @description  提供一个安全环境访问互联网
// @author       jsoncode
// @match        http://**/*
// @match        https://**/*
// @require      https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js
// @grant        GM_xmlhttpRequest
// @grant        GM.getResourceUrl
// @grant        unsafeWindow
// @run-at       document-end ==/context-menu==
// ==/UserScript==
var q = jQuery.noConflict();
(function() {
    if (location.host == 'www.baidu.com') {
        baidu_setTitle();
        addStyle();
        addHtml();
        // 搜索框
        var input = q('#search-input');
        // 关键词列表
        var inputList = q('#search-input-list');
        // 搜索按钮
        var searchBtn = q('#searchBtn');
        // 搜索结果
        var content = q('#contentresult');
        // 搜索分页
        var pagination = q('#pagination');
        //联想查询
        input.on('input', function() {
            var searchKeyword = q(this).val();
            baidu_getKeyWord(searchKeyword);
        }).on('keydown', function(e) {
            baidu_inputKeydown(e);
            inputList.hide();
        });
        searchBtn.click(function() {
            baidu_search(input.val());
        });
        q(document).click(function(e) {
            baidu_toggleList(e);
        });
        setTimeout(function() {
            console.clear();
        }, 1000);
    }
    function addStyle() {
        var style = `
            <style>
                a:visited{
                    color:#cc62f7;
                }
                .selfSearch{
                    position:fixed;
                    top:0;
                    left:0;
                    bottom:0;
                    right:0;
                    z-index:400;
                    background:#f0f0f0;
                }
                .search-btn-wrap{
                    width:140px;
                }
                .selfSearch button,
                .selfSearch input{
                    outline:0 !important;
                    box-shadow:none !important;
                    border-radius:0;
                }
                .search-input-wrap{
                    position:relative;
                }
                .search-input{
                    border-color:blue;
                }
                .search-input-list{
                    border-top:0;
                    top:100%;
                    left:15px;
                    right:15px;
                    cursor:pointer;
                    position:absolute;
                    z-index:400;
                }
                .search-input-list .list-group-item{
                    border-radius:0;
                }
                .search-input-list .list-group-item.current,
                .search-input-list .list-group-item:hover{
                    background:#eee;
                }
                .selfSearch .content{
                    overflow:auto;
                    height:calc(100vh - 80px);
                }
                .selfSearch .content img{
                    max-width:100%;
                }
                .selfSearch .content .result.c-container em{
                    color:red;
                    font-style:normal
                }
            </style>
            `;
        q('head').append(style);
        q('head').append('<link href=/"https_&/index.html  rel="stylesheet"/>');
    }
    function addHtml() {
        q('body').css({
            overflow: 'hidden'
        }).append(`
            <div class="selfSearch" id="searchapp">
                <div class="container">
                    <div class="row py-3">
                        <div class="col search-input-wrap">
                            <input class="form-control form-control-lg search-input" id="search-input">
                            <div class="search-input-list">
                                <ul class="list-group" id="search-input-list"></ul>
                            </div>
                        </div>
                        <div class="search-btn-wrap">
                            <button class="btn btn-primary btn-lg btn-block" type="button" id="searchBtn">搜索</button>
                        </div>
                    </div>
                </div>
                <div class="container-fluid">
                    <div class="content">
                        <div id="contentresult"></div>
                        <nav>
                            <ul class="pagination" id="pagination">
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
        `);
    }
    function baidu_setTitle(title) {
        document.title = title || '安全搜索-广告已过滤'
    }
    function baidu_getKeyWord(keyword, back) {
        var callback = back || function() {};
        var t1 = new Date().getTime();
        var t2 = t1 + 210;
        GM_xmlhttpRequest({
            method: 'GET',
            url: `https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=${keyword}&json=1&p=3&sid=26524_1464_21098_26350_22160&req=2&bs=&csor=3&pwd=cs&cb=jQuery110208264721847970322_${t1}&_=${t2}`,
            onload: function(response) {
                var objStr = response.responseText.match(/(?<=[\w+])\(([\s\S]+)(?=\))/)[1].replace(/\\'/g, "'");
                var list = JSON.parse(objStr).s;
                list = list.concat(['视频', '图片', 'api'].map(function(item) {
                    return keyword + ' ' + item;
                }));
                var html = '';
                list.forEach(function(item, i) {
                    html += '<li class="list-group-item" data-index="' + i + '" materialdesign>' + item + '</li>';
                });
                inputList.html(html);
                if (list.length) {
                    inputList.show();
                } else {
                    inputList.hide();
                }
                callback()
            },
            onerror: function(reponse) {
                alert('error');
            }
        });
    }
    function baidu_search(value) {
        if (value === null || value === '') {
            return;
        }
        GM_xmlhttpRequest({
            method: 'GET',
            url: `https://www.baidu.com/s?ie=utf-8&mod=11&isbd=1&isid=10FCC76279E92878&ie=utf-8&f=8&rsv_bp=0&rsv_idx=1&tn=baidu&wd=${encodeURIComponent(value)}&rsv_pq=ab4cc49200041a6f&rsv_t=8dfcL6IoYXAYa2vQiTntndpQUwLw3pJRQXVhnn9xy30VSdRSNNnie3QwINA&rqlang=cn&rsv_enter=1&rsv_sug3=6&rsv_sug1=6&rsv_sug7=101&rsv_sid=26524_1464_21098_26350_22160&_ss=1&clist=&hsug=%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%B8%88&csor=2&pstg=5&_cr1=28874`,
            onload: function(response) {
                var str = response.responseText;
                var dom = q(str);
                var list = dom.find('#content_left').children()
                var page = dom.find('#page a');
                var htmlList = [];
                // list.each(function(i, item) {
                //     htmlList.push(`<li class="list-group-item" href=/"${item.baseURI}" target="_blank">${item.outerHTML}</li>`);
                // });
                // var html = `<ul class="list-group">${htmlList.join('')}</ul>`;
                // content.html(html);
                list.each(function(i, item) {
                    htmlList.push(`<div class="col-lg-3 mb-3">
                        <div class="card" style="height:100%;">
                          <div class="card-body">${item.outerHTML}</div>
                        </div>
                    </div>`);
                });
                var html = `<div class="container-fluid"><div class="row">${htmlList.join('')}</div></div>`;
                content.html(html);
                // var pageHtml = [];
                // page.each(function(i, item) {
                //     q(item).addClass('page-link').find('.fk').remove();
                //     pageHtml.push(`<li class="page-item">${item.outerHTML}</li>`);
                // });
                // pagination.html(pageHtml.join(''));
                inputList.hide();
            },
            onerror: function(reponse) {
                alert('error');
                inputList.hide();
            }
        });
    }
    function baidu_inputKeydown(e) {
        var keyCode = e.keyCode; //30上键,40下键
        if (keyCode === 38 || keyCode === 40) {
            e.preventDefault();
            var list = inputList.children();
            if (list.length) {
                var current = inputList.children('.current');
                if (current.length) {
                    var index = current.data('index');
                    // 上键
                    if (keyCode === 38) {
                        if (index == 0) {
                            list.last().addClass('current').siblings().removeClass('current');
                        } else {
                            list.eq(index - 1).addClass('current').siblings().removeClass('current');
                        }
                    } else {
                        // 下键
                        if (index >= list.length - 1) {
                            list.first().addClass('current').siblings().removeClass('current');
                        } else {
                            list.eq(index + 1).addClass('current').siblings().removeClass('current');
                        }
                    }
                } else {
                    list.first().addClass('current');
                }
                var value = inputList.children('.current').text();
                input.val(value);
            }
            return false;
        } else if (keyCode === 13) {
            baidu_search(input.val())
            inputList.hide();
        }
    }
    function baidu_toggleList(e) {
        if (e.target.id === 'search-input' || e.target.id === 'search-input-list') {
            inputList.show();
        } else {
            if (e.target.closest('#search-input-list')) {
                q(e.target).addClass('current').siblings().removeClass('current');
                var value = q(e.target).text();
                input.val(value);
                baidu_search(value);
            }
            inputList.hide();
        }
    }
})();

原文链接:https://segmentfault.com/a/1190000016778610

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:2014年,你是不是被这5个HTML5技术刷屏了? iis7站长之家

文章标题:两个小时写了一个无广告版:百度搜索

相关文章
2014年,你是不是被这5个HTML5技术刷屏了?
如今,几乎每天都有HTML5页面的推广以及小游戏、小测试在微信上传播,用户也逐渐习惯被各种HTML5轰炸。那么在刚刚过去的一年究竟有哪些HTML5技术堪称火爆,让人们的微信频频被刷屏呢? 1、2048 2048 在4x4的棋盘上,用方向键选...
2015-11-12
Node.js v0.11.16 开发版发布
Node.js v0.11.16 开发版发布了,改进记录包括: openssl: Upgrade to 1.0.1l npm: Upgrade to 2.3.0 url: revert support of path for url.fo...
2015-11-12
微信火了HTML5,技术革新才是未来
Html5小游戏自从诞生以来,以其玩法简单、内容娱乐等特点,而深受玩家的欢迎。就像音乐领域的《小苹果》和《最炫名族风》一样,Html5小游戏也曾经有多款神作,在微信朋友圈如病毒式疯传。 微信让H5火了 去年,H5游戏“围住神经猫”上线微信朋...
2015-11-12
WebSocket断开原因分析,再也不怕为什么又断开了
阅读原文:https://wdd.js.org/websocket-… 1. 把错误打印出来 WebSocket断开的原因有很多,最好在WebSocket断开时,将错误打印出来。 在线demo地址:https://wdd.js.org/we...
2018-04-25
浅谈HTML5对移动广告平台的价值
就像电影盛行时那些电影人不得不面对新崛起的电视媒体带来的巨大冲击一样,如今的传统媒体正在面临互联网的挑战,而且越是年轻化的群体对互联网的依赖越强,近年来飞速增长的移动互联网趋势更甚,已经习惯了24小时手机陪伴的我们已经越来越离不开移动互联网...
2015-11-12
js漂浮广告实现代码
本文实例讲述了js实现漂浮广告的方法。分享给大家供大家参考。具体如下: 具体代码如下: &lt;html xmlns=&quot;http:&#x2F;&#x2F;www.w3.org&#x2F;1999&#x2F;xhtml&quot;&...
2017-03-29
js获取数组的最后一个元素
在js里面如何获取一个数组的最后一个元素呢?这里总结了两种方法,有需要的朋友可以看看。 (1)js内置pop方法 pop() 方法用于删除并返回数组的最后一个元素,注意这里在获取了数组的最后一个元素的同时也将原数组的最后一个元素给删除了。如...
2017-03-22
jscript读写二进制文件的方法
本文实例讲述了jscript读写二进制文件的方法。分享给大家供大家参考。具体实现方法如下: var bin = new Array(256); for(var i=0;i&lt;256;i++){ bin[i]=String.fromC...
2017-03-22
利用n 升级工具升级Node.js版本及在mac环境下的坑
一、利用n 升级Node.js 最近在用NPM安装一个nodejs工具时发现,我的nodejs的版本有些旧了。这不是大问题,只要升级就可以了,当然,重新从nodejs.org最新版本是一种方法,但我想应该有更简单的方法,那就是使用 n 这个...
2017-03-17
js实现时间显示几天前、几小时前或者几分钟前的方法集锦
这里汇总了js实现时间显示几天前、几小时前或者几分钟前的常见方法。分享给大家供大家参考。具体如下: 方法一: 个人做法是保存时间戳,然后在前端用jq插件做转换,比如 smart-time-ago 方法二: (通过freemarker模板)如...
2017-03-24
回到顶部