这是一篇关于前端的技巧使用,或许你做前端很多年了,但是下面的这些你可能闻所未闻。现在这里给大家整理出来,分享给前端的小伙伴们。
浏览器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>
资源网站大全 https://55wd.com 设计导航https://www.wode007.com/favorites/sjdh
加载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