web前端的一些不为人知的冷知识点

web前端的一些不为人知的冷知识点_html篇整理

更新日期: 2018-05-26阅读: 3.7k标签: 前端分享

复制链接

新浪微博

QQ 好友

扫一扫分享

这是一篇关于前端的技巧使用，或许你做前端很多年了，但是下面的这些你可能闻所未闻。现在这里给大家整理出来，分享给前端的小伙伴们。

浏览器URL地址栏运行html 代码

在非IE内核的浏览器地址栏可以直接运行HTML代码！代码如下：

data:text/html,<h1>Hello, world!</h1>

输入后，直接在页面中显示hello,world的了。打开开发者工具可以看出在body中有了便签<h1>Hello, world!</h1>

浏览器URL地址栏运行Js代码

在浏览器的url地址栏上可以直接运行js的代码，你知道吗？只需要通过javascript:开头后跟要执行的语句，代码如下：

javascript:alert('hello，world');

需要注意的是:

1：如果是直接通过复制粘贴（copy paste）代码到浏览器地址栏的话，IE及Chrome会自动去掉代码开头的javascript:，所以需要手动添加起来才能正确执行
2：Firefox中虽然不会自动去掉，Firefox不支持在地址栏运行JS代码

如何浏览器当编辑器

在浏览器地址中输入下代码，运行后浏览器变成了一个原始而简单的编辑器，与Windows自带的notepad一样。

data:text/html, <html contenteditable>

HTML5中新加的contenteditable属性，当元素指定了该属性后，元素的内容成为可编辑状态。推而广之，将以下代码放到console执行后，整个页面将变得可编辑：

document.body.contentEditable='true';

利用a标签自动解析URL

JS代码里先创建一个a标签然后将需要解析的URL赋值给a的href属性

var a = document.createElement('a');
a.href = 'http://www.abc.com/about';
console.log(a.host);//输出www.abc.com

稍微扩展一下，就得到了一个更加健壮的解析URL各部分的通用方法了

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<len;i++) {
                if (!seg[i]) { continue; }
                s = seg[i].split('=');
                ret[s[0]] = s[1];
            }
            return ret;
        })(),
        file: (a.pathname.match(/\/([^\/?#]+)$/i) || [,''])[1],
        hash: a.hash.replace('#',''),
        path: a.pathname.replace(/^([^\/])/,'/$1'),
        relative: (a.href.match(/tps?:\/\/[^\/]+(.+)/) || [,''])[1],
        segments: a.pathname.replace(/^\//,'').split('/')
    };
}

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

不是要document.getElementById()。直接通过ID就可以获取到

<div id="sample"></div>
<script type="text/javascript">
        console.log(sample);//<div id="sample"></div>
</script>

加载CDN文件时，可以省掉HTTP标识

现在很流行的CDN即从专门的服务器加载一些通用的JS和css文件，出于安全考虑有的CDN服务器使用HTTPS方式连接，而有的是传统的HTTP，其实我们在使用时可以忽略掉这个，将它从URL中省去。

<script src="//domain.com/path/to/script.js"></script>

利用script标签保存任意信息

将script标签设置为type='text'然后可以在里面保存任意信息，之后可以在JavaScript代码中很方便地获取。

<script type="text" id="template">
	<h1>This won't display</h1>
</script>
var text = document.getElementById('template').innerHTML

原文地址：http://www.cnblogs.com/Wayou/p/things_you_dont_know_about_frontend.html

链接: https://www.fly63.com/article/detial/826