前端冷知识

浏览器地址栏运行JavaScript代码

在地址栏输入以javascript:开头后跟要执行的语句

javascript:alert('hello world')

在地址栏输入,回车后alert()正常执行。需要注意的是copy paste时IE及Chrome会自动去掉前缀javascript:,所以要手动加上才能执行。Firefox中不支持在地址栏运行JS代码

应用:《让Chrome 接管邮件连接,收发邮件更方便了》中有使用到,利用在浏览器地址栏中执行JavaScript代码将Gmail设置为系统的邮件接管程序。

浏览器地址栏运行HTML代码

在非IE内核的浏览器中,地址栏可以直接运行HTML代码

data:text/html,

Hello, world!

前端冷知识_第1张图片

利用a标签自动解析URL

有时候我们想要获取URL中的host,query,会用正则表达式去抓取。如果把url赋给DOM-a就一切OK!

来自james代码

function parseURL(url) {
    var a =  document.createElement('a');
    a.href = url;
    return {
        source: url,
        protocol: a.protocol.replace(':',''),
        host: a.hostname,
        port: a.port,
        query: a.search,
        params: (function(){
            var ret = {},
                seg = a.search.replace(/^?/,'').split('&'),
                len = seg.length, i = 0, s;
            for (;i

页面拥有ID的元素会创建全局变量

实时编辑CSS

通过设置style标签的 display:block 样式可以让页面的style标签显示出来,并且加上 contentEditable 属性后可以让样式成为可编辑状态,更改后的样式效果也是实时更新呈现的。此技巧在IE下无效。爽爆啊!


    
    

在上面可以实时编辑我的样式

前端冷知识_第2张图片

你可能感兴趣的:(前端冷知识)