从零开始创造你的浏览器主页（二）

博主：博瀚君
发布时间：2020 年 12 月 04 日
2693次浏览
2 条评论
9699字数
分类：网页

前言

上次我们讲了基础的搜索框和按钮，今天我们来给她加上 JavaScript。

关于 JavaScript

JavaScript 是一种具有函数优先的轻量级，解释型或即时编译型的高级编程语言。虽然它是作为开发 Web 页面的脚本语言而出名的，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。
~~摘自百度百科~~

原来的代码

<!doctype html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>页面标题</title>
    <style>
        *{
            font-family: "Microsoft Yahei","Inconsolata","Courier";
            font-weight: 400;
            outline: none;
            border: none;
        }
        body{
            margin: 0;
            padding: 0;
        }
        #main-holder{
            position: absolute;
            top: 0px;
            width: 100%;
            height: 100%;
            overflow-y: auto;
            z-index: 1;
        }
        #main-over-top{
            height: 72px;
            box-sizing: border-box;
        }
        #main-header{
            font-weight: 100;
            color: rgb(0,181,173);
            font-size: 2em;
            text-align: center;
            margin: auto;
        }
        #main-large-search{
            height: 180px;
            box-sizing: border-box;
        }
        #search_form{
            position: relative;
            top: 1px;
            transition: ease-out top .2s;
            height: 42px;
            min-width: 580px;
            width: 40%;
            margin: auto;
            text-align: center;
        }
        #search_box{
            height: 42px;
            width: 100%;
            display: block;
            margin-top: .6em;
            border-radius: 12px;
            border: 1.5px solid rgb(0,181,173);
            color: rgb(0,181,173);
            padding-left: 12px;
            padding-right: 96px;
            box-sizing: border-box;
            font-weight: 400;
            outline: none;
            transition: ease-out padding-right .2s,ease-out border-radius .2s;
            z-index: 1;
        }
        #search_btn{
            background-color: rgb(0,181,173);
            border-color: rgb(0,181,173);
            color: rgb(248,248,248);
            height: 42px;
            width: 88px;
            position: absolute;
            top: 0px;
            right: 0px;
            bottom: 0px;
            border: 1.5px solid rgb(0,181,173);
            box-sizing: border-box;
            font-weight: 400;
            border-radius: 0px 12px 12px 0px;
            transition: ease-out background-color .1s,ease-out width .2s,ease-out border-radius .2s;
            z-index: 2;
            cursor: pointer;
        }
        #search_btn:hover{
            background-color: rgb(10,191,183);
            border-color: rgb(10,191,183);
            color: rgb(248,248,248);
            width: 108px;
        }
        #search_form:focus-within{
            top: -2px;
        }
        #search_form:focus-within>#search_btn{
            width: 108px;
            border-radius: 0px 21px 21px 0px;
        }
        #search_form:focus-within>#search_box{
            padding-right: 116px;
            border-radius: 21px;
        }
        #search_btn:hover+#search_box{
            padding-right: 116px;
        }
        #search_btn:active{
            background-color: rgb(0,171,163)!important;
        }
        #search_box::-moz-placeholder{
            color: rgb(117,117,117);
        }
    </style>
</head>
<body>
    <div id="main-holder">
        <div id="main-large-search">
            <div id="main-over-top"></div>
            <h1 id="main-header">搜索！</h1>
            <div class="holders" id="search_form">
                <button id="search_btn">搜索</button>
                <input id="search_box" name="search_box" placeholder="搜索..." autocomplete="off" />
            </div>
        </div>
    </div>
</body>
</html>

我们要添加的内容

BASE_URL = 'https://www.baidu.com/s?wd=%KW%&ie=UTF-8';
var encode = function (url) {
    return url.replace(/%/g, '%25')
        .replace(/#/g, '%23')
        .replace(/\$/g, '%24')
        .replace(/&/g, '%26')
        .replace(/\+/g, '%2B')
        .replace(/,/g, '%2C')
        .replace(/\//g, '%2F')
        .replace(/:/g, '%3A')
        .replace(/=/g, '%3D')
        .replace(/\?/g, '%3F')
        .replace(/@/g, '%40')
        .replace(/\[/g, '%5B')
        .replace(/\\/g, '%5C')
        .replace(/\]/g, '%5D')
        .replace(/\^/g, '%5E')
        .replace(/`/g, '%60')
        .replace(/{/g, '%7B')
        .replace(/}/g, '%7D');
}
var redirect = function () {
    window.open(
        BASE_URL.replace(
            /%KW%/g,
            encode(
                document.getElementById(
                    'search_box'
                ).value
            )
        )
    );
};
document.getElementById('search_btn').onclick = redirect;
document.body.onkeypress = function () {
    if (event.keyCode == 13) {
        redirect();
    }
};

然后来看看效果

<!doctype html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>页面标题</title>
    <style>
        * {
            font-family: "Microsoft Yahei", "Inconsolata", "Courier";
            font-weight: 400;
            outline: none;
            border: none;
        }

        body {
            margin: 0;
            padding: 0;
        }

        #main-holder {
            position: absolute;
            top: 0px;
            width: 100%;
            height: 100%;
            overflow-y: auto;
            z-index: 1;
        }

        #main-over-top {
            height: 72px;
            box-sizing: border-box;
        }

        #main-header {
            font-weight: 100;
            color: rgb(0, 181, 173);
            font-size: 2em;
            text-align: center;
            margin: auto;
        }

        #main-large-search {
            height: 180px;
            box-sizing: border-box;
        }

        #search_form {
            position: relative;
            top: 1px;
            transition: ease-out top .2s;
            height: 42px;
            min-width: 580px;
            width: 40%;
            margin: auto;
            text-align: center;
        }

        #search_box {
            height: 42px;
            width: 100%;
            display: block;
            margin-top: .6em;
            border-radius: 12px;
            border: 1.5px solid rgb(0, 181, 173);
            color: rgb(0, 181, 173);
            padding-left: 12px;
            padding-right: 96px;
            box-sizing: border-box;
            font-weight: 400;
            outline: none;
            transition: ease-out padding-right .2s, ease-out border-radius .2s;
            z-index: 1;
        }

        #search_btn {
            background-color: rgb(0, 181, 173);
            border-color: rgb(0, 181, 173);
            color: rgb(248, 248, 248);
            height: 42px;
            width: 88px;
            position: absolute;
            top: 0px;
            right: 0px;
            bottom: 0px;
            border: 1.5px solid rgb(0, 181, 173);
            box-sizing: border-box;
            font-weight: 400;
            border-radius: 0px 12px 12px 0px;
            transition: ease-out background-color .1s, ease-out width .2s, ease-out border-radius .2s;
            z-index: 2;
            cursor: pointer;
        }

        #search_btn:hover {
            background-color: rgb(10, 191, 183);
            border-color: rgb(10, 191, 183);
            color: rgb(248, 248, 248);
            width: 108px;
        }

        #search_form:focus-within {
            top: -2px;
        }

        #search_form:focus-within>#search_btn {
            width: 108px;
            border-radius: 0px 21px 21px 0px;
        }

        #search_form:focus-within>#search_box {
            padding-right: 116px;
            border-radius: 21px;
        }

        #search_btn:hover+#search_box {
            padding-right: 116px;
        }

        #search_btn:active {
            background-color: rgb(0, 171, 163) !important;
        }

        #search_box::-moz-placeholder {
            color: rgb(117, 117, 117);
        }
    </style>
</head>

<body>
    <div id="main-holder">
        <div id="main-large-search">
            <div id="main-over-top"></div>
            <h1 id="main-header">搜索！</h1>
            <div class="holders" id="search_form">
                <button id="search_btn">搜索</button>
                <input id="search_box" name="search_box" placeholder="搜索..." autocomplete="off" />
            </div>
        </div>
    </div>
</body>
<script>
    BASE_URL = 'https://www.baidu.com/s?wd=%KW%&ie=UTF-8';
    var encode = function (url) {
        return url.replace(/%/g, '%25')
            .replace(/#/g, '%23')
            .replace(/\$/g, '%24')
            .replace(/&/g, '%26')
            .replace(/\+/g, '%2B')
            .replace(/,/g, '%2C')
            .replace(/\//g, '%2F')
            .replace(/:/g, '%3A')
            .replace(/=/g, '%3D')
            .replace(/\?/g, '%3F')
            .replace(/@/g, '%40')
            .replace(/\[/g, '%5B')
            .replace(/\\/g, '%5C')
            .replace(/\]/g, '%5D')
            .replace(/\^/g, '%5E')
            .replace(/`/g, '%60')
            .replace(/{/g, '%7B')
            .replace(/}/g, '%7D');
    }
    var redirect = function () {
        window.open(
            BASE_URL.replace(
                /%KW%/g,
                encode(
                    document.getElementById(
                        'search_box'
                    ).value
                )
            )
        );
    };
    document.getElementById('search_btn').onclick = redirect;
    document.body.onkeypress = function () {
        if (event.keyCode == 13) {
            redirect();
        }
    };
</script>

</html>

目前的代码

经过测试可以看到，通过单击 搜索 按钮和键入 enter/return 都可以跳转到目标 URL。
收工！

小结

代码就先写到这里，目前搜索框已经可以使用，之后还需要加上设置才能更人性化。

完整 Demo 链接
·
GitHub 开源仓库

版权

代码部分采用 MIT License
© Copyright 2020 博瀚君

最后修改：2021 年 02 月 19 日 03 : 58 PM

如果觉得我的文章对你有用，请随意赞赏

2 条评论

Yida_Xiang
2021年2月22日 22:59:32

这是用了一个正则表达式？

回复
1. 博瀚君
  2021年2月23日 21:25:45
  
  @Yida_Xiang
  正则表达式是用来替换一些URL中需要转义的字符的。
  
  回复

发表评论取消回复

私密评论

名称

邮箱

地址

ac2010
你傻逼吧都不注册洛谷，还有你这出言不逊
红黑树
qpzc
SuperMains
qpzc
SuperMains
很好！你已经懂得计算10以内的加法了！现在去做几道微积分吧！٩...
SuperMain
腾讯云在华南地区的速度不那么理想可我是华南人

从零开始创造你的浏览器主页（二）

博瀚君 • 2020 年 12 月 04 日

前言

上次我们讲了基础的搜索框和按钮，今天我们来给她加上 JavaScript。

从零开始创造你的浏览器主页（一）

关于 JavaScript

JavaScript 是一种具有函数优先的轻量级，解释型或即时编译型的高级编程语言。虽然它是作为开发 Web 页面的脚本语言而出名的，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。
~~摘自百度百科~~

原来的代码

<!doctype html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>页面标题</title>
    <style>
        *{
            font-family: "Microsoft Yahei","Inconsolata","Courier";
            font-weight: 400;
            outline: none;
            border: none;
        }
        body{
            margin: 0;
            padding: 0;
        }
        #main-holder{
            position: absolute;
            top: 0px;
            width: 100%;
            height: 100%;
            overflow-y: auto;
            z-index: 1;
        }
        #main-over-top{
            height: 72px;
            box-sizing: border-box;
        }
        #main-header{
            font-weight: 100;
            color: rgb(0,181,173);
            font-size: 2em;
            text-align: center;
            margin: auto;
        }
        #main-large-search{
            height: 180px;
            box-sizing: border-box;
        }
        #search_form{
            position: relative;
            top: 1px;
            transition: ease-out top .2s;
            height: 42px;
            min-width: 580px;
            width: 40%;
            margin: auto;
            text-align: center;
        }
        #search_box{
            height: 42px;
            width: 100%;
            display: block;
            margin-top: .6em;
            border-radius: 12px;
            border: 1.5px solid rgb(0,181,173);
            color: rgb(0,181,173);
            padding-left: 12px;
            padding-right: 96px;
            box-sizing: border-box;
            font-weight: 400;
            outline: none;
            transition: ease-out padding-right .2s,ease-out border-radius .2s;
            z-index: 1;
        }
        #search_btn{
            background-color: rgb(0,181,173);
            border-color: rgb(0,181,173);
            color: rgb(248,248,248);
            height: 42px;
            width: 88px;
            position: absolute;
            top: 0px;
            right: 0px;
            bottom: 0px;
            border: 1.5px solid rgb(0,181,173);
            box-sizing: border-box;
            font-weight: 400;
            border-radius: 0px 12px 12px 0px;
            transition: ease-out background-color .1s,ease-out width .2s,ease-out border-radius .2s;
            z-index: 2;
            cursor: pointer;
        }
        #search_btn:hover{
            background-color: rgb(10,191,183);
            border-color: rgb(10,191,183);
            color: rgb(248,248,248);
            width: 108px;
        }
        #search_form:focus-within{
            top: -2px;
        }
        #search_form:focus-within>#search_btn{
            width: 108px;
            border-radius: 0px 21px 21px 0px;
        }
        #search_form:focus-within>#search_box{
            padding-right: 116px;
            border-radius: 21px;
        }
        #search_btn:hover+#search_box{
            padding-right: 116px;
        }
        #search_btn:active{
            background-color: rgb(0,171,163)!important;
        }
        #search_box::-moz-placeholder{
            color: rgb(117,117,117);
        }
    </style>
</head>
<body>
    <div id="main-holder">
        <div id="main-large-search">
            <div id="main-over-top"></div>
            <h1 id="main-header">搜索！</h1>
            <div class="holders" id="search_form">
                <button id="search_btn">搜索</button>
                <input id="search_box" name="search_box" placeholder="搜索..." autocomplete="off" />
            </div>
        </div>
    </div>
</body>
</html>

我们要添加的内容

BASE_URL = 'https://www.baidu.com/s?wd=%KW%&ie=UTF-8';
var encode = function (url) {
    return url.replace(/%/g, '%25')
        .replace(/#/g, '%23')
        .replace(/\$/g, '%24')
        .replace(/&/g, '%26')
        .replace(/\+/g, '%2B')
        .replace(/,/g, '%2C')
        .replace(/\//g, '%2F')
        .replace(/:/g, '%3A')
        .replace(/=/g, '%3D')
        .replace(/\?/g, '%3F')
        .replace(/@/g, '%40')
        .replace(/\[/g, '%5B')
        .replace(/\\/g, '%5C')
        .replace(/\]/g, '%5D')
        .replace(/\^/g, '%5E')
        .replace(/`/g, '%60')
        .replace(/{/g, '%7B')
        .replace(/}/g, '%7D');
}
var redirect = function () {
    window.open(
        BASE_URL.replace(
            /%KW%/g,
            encode(
                document.getElementById(
                    'search_box'
                ).value
            )
        )
    );
};
document.getElementById('search_btn').onclick = redirect;
document.body.onkeypress = function () {
    if (event.keyCode == 13) {
        redirect();
    }
};

然后来看看效果

<!doctype html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>页面标题</title>
    <style>
        * {
            font-family: "Microsoft Yahei", "Inconsolata", "Courier";
            font-weight: 400;
            outline: none;
            border: none;
        }

        body {
            margin: 0;
            padding: 0;
        }

        #main-holder {
            position: absolute;
            top: 0px;
            width: 100%;
            height: 100%;
            overflow-y: auto;
            z-index: 1;
        }

        #main-over-top {
            height: 72px;
            box-sizing: border-box;
        }

        #main-header {
            font-weight: 100;
            color: rgb(0, 181, 173);
            font-size: 2em;
            text-align: center;
            margin: auto;
        }

        #main-large-search {
            height: 180px;
            box-sizing: border-box;
        }

        #search_form {
            position: relative;
            top: 1px;
            transition: ease-out top .2s;
            height: 42px;
            min-width: 580px;
            width: 40%;
            margin: auto;
            text-align: center;
        }

        #search_box {
            height: 42px;
            width: 100%;
            display: block;
            margin-top: .6em;
            border-radius: 12px;
            border: 1.5px solid rgb(0, 181, 173);
            color: rgb(0, 181, 173);
            padding-left: 12px;
            padding-right: 96px;
            box-sizing: border-box;
            font-weight: 400;
            outline: none;
            transition: ease-out padding-right .2s, ease-out border-radius .2s;
            z-index: 1;
        }

        #search_btn {
            background-color: rgb(0, 181, 173);
            border-color: rgb(0, 181, 173);
            color: rgb(248, 248, 248);
            height: 42px;
            width: 88px;
            position: absolute;
            top: 0px;
            right: 0px;
            bottom: 0px;
            border: 1.5px solid rgb(0, 181, 173);
            box-sizing: border-box;
            font-weight: 400;
            border-radius: 0px 12px 12px 0px;
            transition: ease-out background-color .1s, ease-out width .2s, ease-out border-radius .2s;
            z-index: 2;
            cursor: pointer;
        }

        #search_btn:hover {
            background-color: rgb(10, 191, 183);
            border-color: rgb(10, 191, 183);
            color: rgb(248, 248, 248);
            width: 108px;
        }

        #search_form:focus-within {
            top: -2px;
        }

        #search_form:focus-within>#search_btn {
            width: 108px;
            border-radius: 0px 21px 21px 0px;
        }

        #search_form:focus-within>#search_box {
            padding-right: 116px;
            border-radius: 21px;
        }

        #search_btn:hover+#search_box {
            padding-right: 116px;
        }

        #search_btn:active {
            background-color: rgb(0, 171, 163) !important;
        }

        #search_box::-moz-placeholder {
            color: rgb(117, 117, 117);
        }
    </style>
</head>

<body>
    <div id="main-holder">
        <div id="main-large-search">
            <div id="main-over-top"></div>
            <h1 id="main-header">搜索！</h1>
            <div class="holders" id="search_form">
                <button id="search_btn">搜索</button>
                <input id="search_box" name="search_box" placeholder="搜索..." autocomplete="off" />
            </div>
        </div>
    </div>
</body>
<script>
    BASE_URL = 'https://www.baidu.com/s?wd=%KW%&ie=UTF-8';
    var encode = function (url) {
        return url.replace(/%/g, '%25')
            .replace(/#/g, '%23')
            .replace(/\$/g, '%24')
            .replace(/&/g, '%26')
            .replace(/\+/g, '%2B')
            .replace(/,/g, '%2C')
            .replace(/\//g, '%2F')
            .replace(/:/g, '%3A')
            .replace(/=/g, '%3D')
            .replace(/\?/g, '%3F')
            .replace(/@/g, '%40')
            .replace(/\[/g, '%5B')
            .replace(/\\/g, '%5C')
            .replace(/\]/g, '%5D')
            .replace(/\^/g, '%5E')
            .replace(/`/g, '%60')
            .replace(/{/g, '%7B')
            .replace(/}/g, '%7D');
    }
    var redirect = function () {
        window.open(
            BASE_URL.replace(
                /%KW%/g,
                encode(
                    document.getElementById(
                        'search_box'
                    ).value
                )
            )
        );
    };
    document.getElementById('search_btn').onclick = redirect;
    document.body.onkeypress = function () {
        if (event.keyCode == 13) {
            redirect();
        }
    };
</script>

</html>

目前的代码

经过测试可以看到，通过单击 搜索 按钮和键入 enter/return 都可以跳转到目标 URL。
收工！

小结

代码就先写到这里，目前搜索框已经可以使用，之后还需要加上设置才能更人性化。

完整 Demo 链接
·
GitHub 开源仓库

版权

代码部分采用 MIT License
© Copyright 2020 博瀚君

从零开始创造你的浏览器主页（二）

前言

关于 JavaScript

原来的代码

我们要添加的内容

然后来看看效果

小结

版权

2 条评论

发表评论取消回复

博客迁移成功！

【测评】各大 CDN 测评来啦！

从零开始创造你的浏览器主页（一）

快来给你的博客加一只看板娘！

从零开始创造你的浏览器主页（二）

【新闻】研究报告称所有 iPhone 13 机型都将提供 1TB 存储空间和 LiDAR 摄像头

GAC003 AE1: Weekly Learning Log 1

博客迁移成功！

从零开始创造你的浏览器主页（二）

【咕】如何优雅地给网站添加搜索框？

从零开始创造你的浏览器主页（二）

前言

关于 JavaScript

原来的代码

我们要添加的内容

然后来看看效果

小结

版权

前言

关于 JavaScript

原来的代码

我们要添加的内容

然后来看看效果

小结

版权

2 条评论

发表评论 取消回复

从零开始创造你的浏览器主页（二）

前言

关于 JavaScript

原来的代码

我们要添加的内容

然后来看看效果

小结

版权

发表评论取消回复