你可能不知道的前端18个冷知识
今天带大家盘点一下前端的一些冷知识。
一、浏览器地址栏的妙用
1.1 可以执行javascript代码
在地址栏中输入javascript:alert('hello world')，然后按回车键，会弹出一个提示框显示hello world。
注意：如果直接把这段代码复制到地址栏，浏览器会删除掉前面
javascript:（比如谷歌浏览器、edge浏览器等），需要自己手动加上。
还可以使用location.href和window.open来执行它。
location.href = "javascript:alert('hello world')";
window.open("javascript:alert('hello world')");
1.2 可以运行html
在地址栏中输入data:text/html,<div>hello world</div>，然后按回车键，会显示一个包含hello world的div元素。
利用这个能力，我们可以把浏览器标签页变成一个编辑器。
contenteditable属性能把一个元素变成可编辑的，所以我们如果在地址栏中输入data:text/html,<html contenteditable>，就可以把页面直接变成一个编辑器了。你还可以把它收藏到书签，以后直接点击就可以打开一个编辑器了。
二、把整个在线网页变成可编辑
只需要在浏览器控制台中输入这样一行代码，就能把整个页面变成可编辑的。
document.body.contentEditable = 'true';
这样我们就能随便修改页面了，比如修改页面中的文字、图片等等，轻松实现修改账户余额去装逼！
三、利用a标签解析URL
const a = document.createElement('a');
a.href = 'https://www.baidu.com/s?a=1&b=1#hash';
console.log(a.host); // http://www.baidu.com
console.log(a.pathname); // /s
console.log(a.search); // ?a=1&b=1
console.log(a.hash); // #hash
四、HTML的ID和全局变量的映射关系
在HTML中，如果有一个元素的id是a，那么在全局作用域中，会有一个变量a，这个变量指向这个元素。
<div id="a"></div>
<script>
console.log(a); // <div id="a"></div>
</script>
如果id重复了，还是会生成一个全局变量，但是这个变量指向的是一个HTMLCollection类数组。
<div id="a">a</div>
<div id="a">b</div>
<script>
console.log(a); // HTMLCollection(2) [div#a, div#a]
</script>
五、cdn加载省略协议头
<script src="//cdn.xxx.com/xxx.js"></script>
src的值以//开头，省略了协议，则在加载js时，会使用当前页面的协议进行加载。
如果当前页面是https则以https进行加载。
如果当前页面是http则以http进行加载。
如果当前页面是ftp则以ftp进行加载。
六、前端的恶作剧：隐藏鼠标光标
<style>
* {
cursor: none !important;
}
</style>
直接通过css把光标隐藏，让人哭笑不得。
七、文字模糊效果
前端文本的马赛克效果，可以使用text-shadow实现。
<style>
.text {
color: transparent;
text-shadow: #111 0 0 5px;
user-select: none;
}
</style>
<span>hello</span><span class="text">world</span>
效果如下：
八、不借助js和css，让元素消失
直接用DOM自带的hidden属性即可。
<div hidden>hello world</div>
九、保护隐私
禁用F12快捷键：
document.addEventListener('keydown', (e) => {
if (e.keyCode === 123) {
e.preventDefault();
}
})
禁用右键菜单：
document.addEventListener('contextmenu', (e) => {
e.preventDefault();
})
但即使通过禁用F12快捷键和右键菜单，用户依然可以通过其它方式打开控制台。
- 通过浏览器菜单选项直接打开控制台：比如
chrome浏览器通过菜单 > 更多工具 > 开发者工具路径可以打开控制台，Firefox/Edge/Safari等浏览器都有类似选项。 - 用户还可以通过其它快捷键打开控制台：
- Cmd+Opt+I (Mac)
- Ctrl+Shift+C (打开检查元素模式)
十、css实现三角形
<style>
.triangle {
width: 0;
height: 0;
border: 20px solid transparent;
border-top-color: red;
}
</style>
<div class="triangle"></div>
十一、为啥 a === a-1 结果为true
当a为Infinity无穷大时，a - 1的结果也是Infinity，所以a === a - 1的结果为true。
同理，a的值为-Infinity时，此等式也成立。
const a = Infinity;
console.log(a === a - 1);
十二、数字的包装类
console.log(1.toString()); // 报错
console.log(1..toString()); // 正常运行 输出字符串'1'
十三、防止网站以 iframe 方式被加载
if (window.location !== window.parent.location) window.parent.location = window.location;
十四、datalist的使用
datalist 是 HTML5 中引入的一个新元素，它用于为<input>元素提供预定义的选项列表。就是当用户在下拉框输入内容时，浏览器会显示一个下拉列表，列表的内容就是与当前输入内容相匹配的 datalist 选项。
<input list="fruits" name="fruit" />
<datalist id="fruits">
<option value="苹果"></option>
<option value="橘子"></option>
<option value="香蕉"></option>
</datalist>
效果如下：
十五、文字纵向排列
<style>
.vertical-text {
writing-mode: vertical-rl;
text-orientation: upright;
}
</style>
<div class="vertical-text">文字纵向排列</div>
效果如下：
十六、禁止选中文字
document.addEventListener('selectstart', (e) => {
e.preventDefault();
})
效果跟使用 css 的 user-select: none 效果类似。
十七、利用逗号，在一行中执行多个表达式
let a = 1;
let b = 2;
(a += 2), (b += 3);
十八、inset
inset是一个简写属性，用于同时设置元素的 top、right、bottom 和 left 属性
.box {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
可以简写成：
.box {
position: absolute;
inset: 0;
}
小结
以上就是前端的18个冷知识，希望大家看完都有所收获。
来源：juejin.cn/post/7502059146641784883
