浏览器地址栏运行JavaScript代码
在地址栏输入以javascript:开头后跟要执行的语句
javascript：alert('hello world')
在地址栏输入，回车后alert()正常执行。需要注意的是copy paste时IE及Chrome会自动去掉前缀javascript：，所以要手动加上才能执行。Firefox中不支持在地址栏运行JS代码
应用：《让Chrome 接管邮件连接，收发邮件更方便了》中有使用到，利用在浏览器地址栏中执行JavaScript代码将Gmail设置为系统的邮件接管程序。
浏览器地址栏运行HTML代码
在非IE内核的浏览器中，地址栏可以直接运行HTML代码
data:text/html,<h1>Hello, world!</h1>
利用a标签自动解析URL
有时候我们想要获取URL中的host，query，会用正则表达式去抓取。如果把url赋给DOM-a就一切OK！
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('/')
};
}
// usage
var myURL = parseURL('http://abc.com:8080/dir/index.html?id=255&m=hello#top');
myURL.file; // = 'index.html'
myURL.hash; // = 'top'
myURL.host; // = 'abc.com'
myURL.query; // = '?id=255&m=hello'
myURL.params; // = Object = { id: 255, m: hello }
myURL.path; // = '/dir/index.html'
myURL.segments; // = Array = ['dir', 'index.html']
myURL.port; // = '8080'
myURL.protocol; // = 'http'
myURL.source; // = 'http://abc.com:8080/dir/index.html?id=255&m=hello#top'
页面拥有ID的元素会创建全局变量
<div id="hello"></div>
<script> console.log(hello) </script>
实时编辑CSS
通过设置style标签的 display:block 样式可以让页面的style标签显示出来，并且加上 contentEditable 属性后可以让样式成为可编辑状态，更改后的样式效果也是实时更新呈现的。此技巧在IE下无效。爽爆啊！
<body>
<style type="text/css" style="display: block" contentEditable>
body{
background: pink;
}
</style>
<p class="content">在上面可以实时编辑我的样式</p>
</body>
网友评论