前端说：01-探索浏览器地址栏的微妙
浏览器是各位小伙伴们如影随形的工具，它不仅仅是下图所示中输入网址，进入网页这样常见的操作。
那么浏览器真的是那种只能是看看文字图片，或者说无聊的时候打发时间看看小电影的老实工具么？
其实，并不是。他其实还隐藏着一些神奇功能，不过功能只有前端老司机才能操作，不过正巧，正在读文章的你，应该就是一个前端司机，那么咱们就来看看他到底隐藏着什么彩蛋吧？
首先要看到这个彩蛋，我们需要准备一个谷歌浏览器，记住一定要是谷歌浏览器，
因为其他浏览器你输入这个彩蛋其他浏览器才不会鸟你。
万事具备之后，我们就可以来使用谷歌浏览器来通过浏览器地址输入的方式来直接运行前端代码了，没错，就是直接利用输入框输入的内容就可以运行前端代码。
那好，带着试试看的心情，我们来输入一个大部分人学的第一行JavaScript代码 alert弹窗。
当然既然是运行JavaScript代码，所以我们先要在浏览器的地址输入JavaScript加上一个冒号，既javascript:，后面就可以继续跟上JS代码就会执行了。
例如：在地址栏中输入javascript:alert('Leo')，回车后，弹窗神现。
当然知道了个这个好事之后，我们就可以继续为所欲为，比如如果我们在javascript:后面输入alert(document.getElementsByTagName(‘*’).length);哇！我们就能通过浏览器地址栏获取整个页面到底有多少个元素。
如果我们在javascript:后面输入alert(1+2*“3”);哇！我们就能通过浏览器地址来充当一次计算器。
如果我们在javascript:后面输入history.go(-2);哇！我们就能通过浏览器地址看到你之前访问的那些（肮脏）的浏览器地址。
如果我们在javascript:后面输入fetch('myjavascript.cn');哇！我们就能通过浏览器地址就能发送一次前后台的请求！
如果我们复制一下vue源码在javascript:后面粘贴一下！哇！我们就能通过浏览器地址就能把Vue引入进来！
warn:不过，需要避雷的是:直接copy代码到地址栏，浏览器会自动去掉前缀javascript:代码，所以需要我们手动输入才能执行成功。
其次，浏览器地址栏还可以运行HTML代码。操作如下：
在地址栏前面输入data:text/html
后面放入一个逗号,即 data:text/html，
之后就可以为所欲为的写html标签代码了 例如data:text/html，后面放入一个<h1>hello,world!</h1>
回车 ！⬇⬇
当然，因为style标签本身也HTML标签，你还可以"绿它"。
data:text/html,<style type="text/css">h1{color : green}</style><h1>hello,world!</h1>
回车 ！⬇⬇⬇⬇
当然如果在data:text/html，后面放入一个<html contenteditable></html>
回车 ！⬇⬇⬇
你会惊奇的发现，整个页面就变成了可以输入内容的页面了！
因为我给html标签加了个可编辑属性
如果你看上了哪个网站，你可以右键查看源代码，然后全选在data:text/html，后面粘贴！哇！我居然用浏览器地址做出来一个网站！我要是把这个发给我的前端老师，然后告诉他我早就不用编辑器写代码了，他一定会感动的哭的！
当然值得一提的是因为本身html标签所以也支持<script></script>标签，所以。。。你懂的！
最后，这里还有一些其他用法，动一动发福的手指，去试一试吧 ~
1.data:,<文本数据>
2.data:text/plain,<文本数据>
3.data:text/html,<HTML代码>
4.data:text/html;base64,<base64编码的HTML代码>
5.data:text/css,<CSS代码>
6.data:text/css;base64,<base64编码的CSS代码>
7.data:text/javascript,<Javascript代码>
8.data:text/javascript;base64,<base64编码的Javascript代码>
9.data:image/gif;base64,base64编码的gif图片数据
10.data:image/png;base64,base64编码的png图片数据
11.data:image/jpeg;base64,base64编码的jpeg图片数据
12.data:image/x-icon;base64,base64编码的icon图片数据
本文原创，未经作者允许不可转载！
更多内容，欢迎关注作者微信公众号：李游Leo老师前端讲堂！
为你推荐 · 训练营（全勤打卡报名费全额返累计全额返用户133,637人）
关注56
文章721
教程
- 扫码下载APP
- 官方微信
暂无评论
违反法律法规
侵犯个人权益
有害网站环境