| date | tags |
|---|---|
2016-12-03 |
软件 |
一次偶然的解决方案查找让我重新思考浏览器地址栏。如何使用前端下载文件？
一道经典的面试题是这样的：当在地址栏输入url在按回车会发生什么？一般来讲面试者会回答一整套的计算机网络知识。实际上url的定义中的第一部分：协议，决定了是否发生这套计算机网络行为。
协议，为双方之事。浏览器懂，另一方懂，则可以运行。http中，另一方是web服务器，当url的协议是http时，意味着浏览器要跟web服务器进行沟通。以此类推，当协议不同时，浏览器以不同的方式与不同的端进行沟通。
简单的，在地址栏中数据file://，则看到自己的文件目录，端为文件系统。输入mailto:[email protected]则吊起mac的邮件应用（端）。javascript:alert(1)则执行alert(1)，端为v8引擎。浏览器中吊起app也是利用了协议，端为各种app。
还是比较好理解的。一个很有意思的东西叫data:，虽然后面带冒号，但按照规范，data url属于http协议范畴，我经常使用这个来加一些小的图标，很方便。data协议的格式是这样的data:[<mediatype>][;base64],<data>，当浏览器可以处理mediatype时则在页面中显示以data为数据源mediatype类型的输出结果。当浏览器无法输出该结果时，则会下载data。如data:application/vnd.ms-powerpoint,<h1>Hello%2C%20World!<%2Fh1>，类型为ppt的文件浏览器打不开，所以下载了，且保存类型为*.ppt。
***所以window.open可以用作下载，脑洞太大。***如window.open('data:application/vnd.ms-powerpoint,<h1>Hello%2C%20World!<%2Fh1>')。只要下载文件类型浏览器打不开，二进制转base64码即可。当然这个ppt并不能打开。
不过注意一点。data协议本身依赖http的get方法，所以使用data协议加window.open的方式下载文件大小十分受限。
说到地址栏，还有个很有意思的功能。如下图直接输入zhihu.com然后tab就可以直接进行搜索。
<link rel="search" type="application/opensearchdescription+xml" href="https://static.zhihu.com/static/search.xml" title="知乎" />
这个配置大概瞄一眼就知道什么意思https://static.zhihu.com/static/search.xml。
实际上我并没有设置其他搜索引擎，但我的chrome设置里面却有这么多个设置，我又没有去挨个添加，所以想到是自动设置的。在什么时机自动设置的？理所应当想到的是“第一次搜索时”。经验证之后确实是这样的。
非要下个结论的话：浏览器是一个根据能处理各种应用层协议的软件，地址栏是切换协议的入口，也承担了搜索和openSearch的功能。