美文网首页
前端---冷知识

前端---冷知识

作者: slightlove龙 | 来源:发表于2016-09-30 03:12 被阅读0次

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';

相关文章

  • 前端冷知识

    匿名函数调用自身 例: 注意:箭头函数中没有arguments(规定)。

  • 前端冷知识

    浏览器地址栏运行JavaScript代码 在地址栏输入以javascript:开头后跟要执行的语句 在地址栏输入,...

  • 前端---冷知识

    HTML篇 1.浏览器地址栏运行JavaScript代码 这个很多人应该还是知道的,在浏览器地址栏可以直接运行Ja...

  • [前端冷知识集锦]

    浏览器地址栏运行JavaScript代码 浏览器地址栏运行HTML代码 把浏览器当编辑器 利用script标签保存...

  • 前端冷知识集锦

    1 前端 1.1 HTML篇 1.1.1 浏览器地址栏运行JavaScript代码 这个很多人应该还是知道的,在浏...

  • Web框架体系

    Web 前端知识体系精简 web前端知识体系图 web前端知识体系大全 HTML,CSS,JavaScript知识...

  • 前端的一些坑,一些记录,一些冷知识

    无限期更新前端的一些坑,一些记录,一些冷知识https://github.com/ssshooter/... 大概...

  • 前端冷知识,css:Hover换img图片

    img{content: url("../img/delf.png");} 就可以直接把html的img标签的ur...

  • WEB前端要学些什么?WEB前端学习路线!WEB前端从入门到精通

    免客套,直接上料! 一.资源教程: 综合类 前端知识体系 前端知识结构 Web前端开发大系概览 Web前端开发大系...

  • 冷知识

    刚刚看到了一篇文章,简要的提取了一下信息,在这里分享了一下,可能有的是假的不必当真 1,约三分之一的人类都是寄生兽...

网友评论

      本文标题:前端---冷知识

      本文链接:https://www.haomeiwen.com/subject/lpulyttx.html