写了一个给浏览器主页特别设置的自定义搜素引擎集合，记忆和自己配置多种搜素引擎、黑暗模式、自动删除输入框的操作历史、友情提示、自适应不屏幕设备和不同系统设备等。
一些功能可能写的不够简洁，但是已经封装了，没有多少绒余。
思路请看代码注释。
-
<!--
支持Android 5+，iOS 10.3.3+，IE10+
-->
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>载入中..</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
<link rel="shortcut icon" href="http://cdnaliyun.oss-cn-hangzhou.aliyuncs.com/icon/favicon.ico" type="image/x-icon" />
<script id="kd-js" charset="utf-8" src="http://cdnaliyun.oss-cn-hangzhou.aliyuncs.com/js/common.js"></script>
<style>
body{position: fixed;width: 100%;height: 100%;z-index: 5;}
.select{height: 40px;width: 99px;font-size: 13px;color: #0078fe;letter-spacing: 1px;cursor: pointer;appearance: none;-moz-appearance: none;-webkit-appearance: none;font-weight: 700;overflow: hidden;padding: 0 8px;float: left;outline: none;border: 1px solid #dddddd;border-radius: 20px;background: #dddddd;text-indent: 5px;}
.input{height: 38px;width: calc(100% - 130px);letter-spacing: 1px;margin-left: 5px;font-size: 15px;color: #18172c;border: 1px solid #bcbcbc;padding: 0 12px;float: left;border: 1px solid #dddddd;border-radius: 20px;background: #dddddd;}
.search-style{}
.clear{clear: both;}
.input-div{padding: 5px 8px 5px 8px;background: transparent;border-radius: 40px;}
.iframe-box{width: 100%;min-height: 500px;}
@media only screen and (min-width: 640px){ .input-div{margin-top: 25%;} }
.input:focus {outline:none;border: 1px solid #0078fe;}
.select:focus {outline:none;border: 1px solid transparent;}
.liner-color{ background: -webkit-linear-gradient(left, red , blue ); background: linear-gradient(to right, red , blue );color: white;}
.bg-black{background: #1a1a1a !important;}
</style>
</head>
<body id="body">
<div class="content" id="content"></div>
<script>
const search_debug = true; // 调试日志，false关闭，true打开
const title = "?搬砖搜索";
const search = [ // 搜索引擎列表
{
"name": "百度一下", // 引擎名称，可视5个字
"url": "https://m.baidu.com/s?ie=UTF-8&wd=", // 移动端
"pc-url": "https://www.baidu.com/s?ie=UTF-8&wd=", // PC端
"url_right": "", // 参数的固顶后缀
"X-Frame-Options": "", // 默认为空，deny则表示该网站不允许跨域iframe
},
{
"name": "Bing搜索",
"url": "https://www.bing.com/search?q=",
"pc-url": "https://www.bing.com/search?q=",
"url_right": "",
"X-Frame-Options": "",
},
{
"name": "淘宝",
"url": "https://s.m.taobao.com/h5?&_input_charset=utf-8&q=",
"pc-url": "https://s.taobao.com/search?ie=utf8&q=",
"url_right": "",
"X-Frame-Options": "",
},
{
"name": "京东",
"url": "https://so.m.jd.com/ware/search.action?keyword=",
"pc-url": "https://search.jd.com/Search?keyword=",
"url_right": "",
"X-Frame-Options": "",
},
{
"name": "runoob菜鸟教程",
"url": "http://www.runoob.com/?s=",
"pc-url": "http://www.runoob.com/?s=",
"url_right": "",
"X-Frame-Options": "",
},
{
"name": "npmjs.com",
"url": "https://www.npmjs.com/search?q=",
"pc-url": "https://www.npmjs.com/search?q=",
"url_right": "",
"X-Frame-Options": "",
},
{
"name": "知乎",
"url": "https://www.zhihu.com/search?type=content&q=",
"pc-url": "https://www.zhihu.com/search?type=content&q=",
"url_right": "",
"X-Frame-Options": "deny",
},
{
"name": "微博搜索?",
"url": "http://s.weibo.com/weibo/",
"pc-url": "http://s.weibo.com/weibo/",
"url_right": "",
"X-Frame-Options": "deny",
},
{
"name": "CSDN技术博客",
"url": "https://so.csdn.net/so/search/s.do?q=",
"pc-url": "https://so.csdn.net/so/search/s.do?q=",
"url_right": "",
"X-Frame-Options": "",
},{
"name": "cnblogs技术博客（博客园）",
"url": "https://zzk.cnblogs.com/s/blogpost?w=",
"pc-url": "https://zzk.cnblogs.com/s/blogpost?w=",
"url_right": "",
"X-Frame-Options": "",
},
{
"name": "Github搜索",
"url": "https://github.com/search?&type=Repositories&q=",
"pc-url": "https://github.com/search?&type=Repositories&q=",
"url_right": "",
"X-Frame-Options": "deny",
},
{
"name": "BT蚂蚁?",
"url": "https://btmye.cc/bt/",
"pc-url": "https://btmye.cc/bt/",
"url_right": "/time-1.html",
"X-Frame-Options": "deny",
},
];
</script>
<script>
const search_cookie_pre = "search_";
const search_eq = search_cookie_pre+"_eq";
let search_time_style = 0; // 自动校正iframe
let focus_time = 1.5*60*60*1000; // 保护用户输入框隐私，1.5h不聚焦删一次
let blur_time = 3*60*60*1000; // 保护用户输入框隐私，3h聚焦删一次
let dead_input_num = 0; // 自动初始化输入框
function console_log(txt){ // 调试日志
search_debug === true ? console.info(txt) : "";
}
function set_search(val){ // 配置当前的搜索引擎
console_log("配置当前搜索引擎");
setCookie(search_eq, val, 30 * 24 * 60 * 60 * 1000);
for (let i = 0; i<document.getElementsByClassName("option").length; i++) {
document.getElementsByClassName("option")[i].removeAttribute("selected");
}
document.getElementsByClassName("option-"+val)[0].setAttribute("selected", "selected");
document.getElementsByTagName("title")[0].innerText = document.getElementsByClassName("option-"+val)[0].innerText+title;
}
function create_input(pre) { // 渲染模板
console_log("渲染模板数据");
document.getElementsByTagName("title")[0].innerText = title;
let content = document.getElementsByClassName("content")[0];
content.innerHTML = '<div class="input-div"><select class="select search-style" id="select"></select><input type="text" value="" maxlength="100" id="input" class="input search-style" placeholder="'+ pre +'输入内容，按Enter开始?"/><div class="clear"></div></div><div class="res-div"></div>';
let append_tag = [];
for (let i = 0; i < search.length; i++){
let tag = '<option class="option option-'+i+'" value="'+i+'">'+ search[i]["name"] +'</option>';
append_tag.push(tag);
}
document.getElementsByClassName("select")[0].innerHTML = append_tag.join("");
let _eq = getCookie(search_eq);
if (_eq){set_search(_eq);}else {set_search(0);}
}
create_input("");
function dead_input(del_time) { // 处理清空用户输入的情况
try {
clearTimeout(dead_input_num);
console_log(dead_input_num+"-清除成功");
}catch (e) {
console_log(dead_input_num+"-timeout is none");
}
dead_input_num = setTimeout(function () {
create_input("重新");
console_log(del_time);
}, del_time);
console_log(dead_input_num);
}
function iframe_load() { // iframe加载动画
console_log("iframe加载完成");
delete_loading();
}
function run_search(){ // 执行搜索
document.getElementsByClassName("input")[0].blur(); // 主动失去聚焦后会自动退去键盘
try {clearInterval(search_time_style);}
catch (e) {console_log("第一次进入页面是没有定时器的");}
let _select = document.getElementById("select");
let engine = _select.options[_select.selectedIndex].value;
let _input = document.getElementById("input").value;
if (!_input.trim()) {
alert_txt("内容不能为空", 1000);
return;
}
let http_url = _input;
let reg = /^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)+([A-Za-z0-9-~\/])/; // 至少是 http://a 这种格式
if(!reg.test(http_url)){
console_log("不是网址");
}else{
console_log("是网址");
window.open(http_url, "_blank"); // 搜索4/4
return;
}
let url_right = search[engine]["url_right"].trim(); // 参数固定后缀
let res_url = search[engine]["url"]+_input+url_right; // get
let pc_res_url = search[engine]["pc-url"]+_input+url_right; // get
if (window.innerWidth > 640) {
document.getElementsByClassName("res-div")[0].innerHTML = '<div class="flex-center" style="font-size: 15px;color: #CD5C5C;height: 50px;text-align:center;line-height: 22px;padding: 5px 20px;"><div style="height: 44px;overflow: hidden;">PC模式会自动打开新标签来展示搜索结果</div></div>';
window.open(pc_res_url, "_blank"); // 搜索1/4
return;
}else {
// 操作iOS设备Bug情况
let u = navigator.userAgent;
let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1;
let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
if (isAndroid === true || isiOS === false){ // android
console_log("Android");
}else if(isAndroid === false || isiOS === true){ // ios
console_log("iOS");
document.getElementsByClassName("res-div")[0].innerHTML = '<div class="flex-center" style="font-size: 15px;color: #CD5C5C;height: 50px;text-align:center;line-height: 22px;padding: 5px 20px;"><div style="height: 44px;overflow: hidden;">iOS移动设备会自动打开新标签来展示搜索结果</div></div>';
window.open(res_url, "_blank"); // 由于iOS兼容iframe特性不佳，所以直接打开新标签
return;
}else { // pc
console_log("PC");
}
}
if (search[engine]["X-Frame-Options"]){
console_log("该网站禁止非同源在iframe中加载");
document.getElementsByClassName("res-div")[0].innerHTML = '<div class="flex-center" style="font-size: 15px;color: #CD5C5C;height: 50px;text-align:center;line-height: 22px;padding: 5px 20px;"><div style="height: 44px;overflow: hidden;">由于“'+search[engine]["name"]+'”做了跨域限制，已经在新标签打开了本次搜索结果</div></div>';
window.open(res_url, "_blank"); // 搜索2/4
setTimeout(function () {
delete_loading();
}, 700);
}else {
document.getElementsByClassName("res-div")[0].innerHTML = '<iframe class="iframe iframe-box" id="iframe-box" src="" onload="iframe_load()"></iframe>';
search_time_style = setInterval(function () { // 自动校正宽高
console_log("自动校正iframe宽和高");
if (window.innerWidth > 780){
document.getElementsByClassName("iframe-box")[0].style.height = (window.innerHeight*0.9 - 58)+"px";
document.getElementsByClassName("iframe-box")[0].style.width = 780+"px";
}else {
document.getElementsByClassName("iframe-box")[0].style.height = (window.innerHeight + 80)+"px";
document.getElementsByClassName("iframe-box")[0].style.width = window.innerWidth+"px";
}
}, 1000);
document.getElementsByClassName("iframe-box")[0].setAttribute("src", res_url);
}
show_loading();
}
(function () {
document.getElementsByClassName("input")[0].addEventListener("mouseover", function (e) {
console_log("鼠标over了输入框，输入框自动聚焦");
let that = this;
that.focus();
});
document.getElementById("select").onchange = function(e){ // 设置历史和当前选中的搜索引擎
console_log("选择搜素引擎");
let that = this;
set_search(that.value);
};
document.getElementById("input").onfocus = function(e){
console_log("监听输入框状态-onfocus");
document.getElementsByClassName("select")[0].classList.add("liner-color");
dead_input(focus_time);
};
document.getElementById("input").onblur = function(e){
console_log("监听输入框状态-onblur");
document.getElementsByClassName("select")[0].classList.remove("liner-color");
dead_input(blur_time);
};
document.onkeyup = function (event) { // Enter
console_log("按键盘enter进行搜素");
let _key = event.key;
if (_key === "Enter") {run_search();}
};
})("用户操作");
/*
* 个性化功能
* */
const bg_cookie = search_cookie_pre + "bg_color";
(function () {
let bg_color = getCookie(bg_cookie)*1;
if (!bg_color) {
setCookie(bg_cookie, 0);
}else {
if (bg_color === 0){
document.getElementById("body").classList.remove("bg-black");
} else if (bg_color === 1) {
document.getElementById("body").classList.add("bg-black");
}
}
})();
document.getElementsByTagName("body")[0].addEventListener("click", function () {
many_click(3, change_bgcolor);
});
function change_bgcolor() {
if (document.getElementById("body").classList.contains("bg-black")){
document.getElementById("body").classList.remove("bg-black");
// 更新cookie
setCookie(bg_cookie, 0);
}else {
document.getElementById("body").classList.add("bg-black");
setCookie(bg_cookie, 1);
}
}
</script>
</body>
</html>
-
示例展示：http://cdnaliyun.oss-cn-hangzhou.aliyuncs.com
-
-