今天看到同时在书签栏有一个书签,点击这个书签并没有打开新的页面,而是在当前页面上弹出了一个弹出框,并且这个弹出框里面显示了一些网页内的信息。当时看到这个效果时,你能想象我两只眼睛睁得浑圆的样子吗。我立马就甩出一个问题:“卧槽!你这是书签吗?怎么没有打开新界面?”。同事回复:“对,这就是书签,我也觉得很神奇!”。之后同事就把这个书签怎么来的一五一十的告诉了我。后来经过我的一番研究,我最终了解了,现在又轮到我来介绍给你们听了。也许这也是我太后知后觉吧,现在才知道有这个特性。
一、先看效果
无图无真相,咱们先来看下效果是啥样的:
当我真正看到这个效果时,我是震惊的,但是当我追究其原理时,我又发现这好像又很顺其自然。下面一起来看下它的庐山真面目。
二、真实面目
其实你在配置书签的时候,像下面这样配置,你也可以实现类似的效果。
在 网址 这一栏可以看到,其实可以写一条以javascript:
开头的代码,就会直接在当前网页处执行这一行代码。既然有了这样的特性,那么我们就可以编写一个工具代码,然后单独放到一个自己的服务器上,通过执行一行代码,将其引入到页面里面,就可以实现直接在页面上弹出一个弹出框类似的插件功能。
三、本质
其实这并不是书签的专利,书签的展现形式只是提供了一种方便执行代码的快捷形式。我们知道,点击书签的时候,浏览器就会打开对应的内容,而内容又是一段js,那如果我们直接把这个内容输入到浏览器的地址输入栏里面,能否达到一样的效果呢?比如把下面的代码输入到浏览器地址栏(不要复制粘贴,请手动输入),然后回车:
javascript:alert(document.body.innerText)
可以看到,也是正常执行了后面的js。说明能实现这样的形式,最终还是源自于浏览器支持直接执行javascript:
前缀的代码。
四、引申
有了这样的特性,我们其实可以针对一些网站做一个小工具,因为这样执行的代码,就像直接在网页内执行js代码,当我们足够了解一个网站后,我们可以将其调用的后端接口爬出来,然后在小工具里面直接实现一些快捷功能,从而不需要在整个网页里面点来点去才能做到。同时有些网站不提供某种操作模式,但经过我们的测试发现接口是支持某些功能的,这时候我们就可以利用这样的特性去实现一些功能。
比如说有些网站有付费才能看剩下的文章内容,但实际上文章内容已经是加载了下来的,只是被前端手段遮盖了而已,自然我们也可以通过前端手段取消遮盖。