前端---冷知识
2016-09-30 本文已影响0人
slightlove龙
HTML篇
1.浏览器地址栏运行JavaScript代码
这个很多人应该还是知道的，在浏览器地址栏可以直接运行JavaScript代码，做法是以javascript:开头后跟要执行的语句。比如：javascript:alert('hello from address bar :)');
将以上代码贴到浏览器地址栏回车后alert正常执行，一个弹窗神现。需要注意的是如果是通过copy paste代码到浏览器地址栏的话，IE及Chrome会自动去掉代码开头的javascript:，所以需要手动添加起来才能正确执行，而Firefox中虽然不会自动去掉，但它根本就不支持在地址栏运行JS代码
2.浏览器地址栏运行HTML代码
如果说上面那条小秘密知道的人还算多的话，这条秘笈知道的人就要少一些了，在非IE内核的浏览器地址栏可以直接运行HTML代码！
比如在地址栏输入以下代码然后回车运行，会出现指定的页面内容。
data:text/html,<h1>Hello, world!</h1>
3.可以把浏览器当编辑器
还是浏览器地址栏上做文章，将以下代码贴到地址栏运行后浏览器变成了一个原始而简单的编辑器，与Windows自带的notepad一样，吼吼。
data:text/html,<html contenteditable>
归根结底多亏了HTML5中新加的contenteditable属性，当元素指定了该属性后，元素的内容成为可编辑状态。
4.推而广之，将以下代码放到console执行后，整个页面将变得可编辑，随意践踏吧~
document.body.contentEditable='true';
