灵活运用浏览器

最新推荐文章于 2024-08-09 10:39:28 发布

都是风景幸会

最新推荐文章于 2024-08-09 10:39:28 发布

阅读量352

点赞数 1

分类专栏：前端文章标签：浏览器编辑器

前端专栏收录该内容

16 篇文章 0 订阅

订阅专栏

*HTML篇

一、浏览器地址栏运行JavaScript代码

javascript:alert('hello from address bar :)');

二、浏览器地址栏运行HTML代码

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

三、把浏览器当编辑器

地址栏输入

data:text/html, <html contenteditable>

将下列代码放到console执行，整个网页就可以随意操作了

document.body.contentEditable='true';

四、利用a标签自动解析URL

var a = document.createElement('a');
a.href = 'http://www.cnblogs.com/wayou/p/';
console.log(a.host);

利用这一原理，稍微扩展一下，就得到了一个更加健壮的解析URL各部分的通用方法了。下面代码来自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<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的元素会创建全局变量

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

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

七、利用script标签保存任意信息

<script type="text" id="template">
    <h1>This won't display</h1>
</script>

*CSS篇

*{
    cursor: none!important;
}

简单的文字模糊效果

p {
    color: transparent;
    text-shadow: #111 0 0 5px;
}

垂直居中

.center-vertical {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

多重边框

div {
    box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.2), 0 0 0 12px rgba(0, 0, 0, 0.2), 0 0 0 18px rgba(0, 0, 0, 0.2), 0 0 0 24px rgba(0, 0, 0, 0.2);
    height: 200px;
    margin: 50px auto;
    width: 400px
}

实时编辑CSS（IE下无效）

<!DOCTYPE html>
<html>
    <body>
        <style style="display:block" contentEditable>
            body { color: blue }
        </style>
    </body>
</html>

创建长宽比固定的元素

<div style="width: 100%; position: relative; padding-bottom: 20%;">
    <div style="position: absolute; left: 0; top: 0; right: 0; bottom: 0;background-color:yellow;">
        this content will have a constant aspect ratio that varies based on the width.
    </div>
</div>

CSS中也可以做简单运算

.container{
    background-position: calc(100% - 50px) calc(100% - 20px);
}

*JavaScript篇

生成随机字符串

function generateRandomAlphaNum(len) {
    var rdmString = "";
    for (; rdmString.length < len; rdmString += Math.random().toString(36).substr(2));
    return rdmString.substr(0, len);
}

整数的操作

var foo = (12.4 / 4.13) | 0;//结果为3
var bar = ~~(12.4 / 4.13);//结果为3

!!window===true //!!将一个值方便快速转化为布尔值

重写原生浏览器方法以实现新功能

通过重写浏览器的alert让它可以记录弹窗的次数

(function() {
    var oldAlert = window.alert,
        count = 0;
    window.alert = function(a) {
        count++;
        oldAlert(a + "\n You've called alert " + count + " times now. Stop, it's evil!");
    };
})();
alert("Hello World");

关于console的恶作剧

使用之后的效果是再次调用log会输出字迹模糊不清的文字

var _log = console.log;
console.log = function() {
  _log.call(console, '%c' + [].slice.call(arguments).join(' '), 'color:transparent;text-shadow:0 0 2px rgba(0,0,0,.5);');
};

不声明第三个变量的值交换

var a=1,b=2;a=[b,b=a][0];

If语句的变形

var day=(new Date).getDay()===0;
//传统if语句
if (day) {
    alert('Today is Sunday!');
};
//运用逻辑与代替if
day&&alert('Today is Sunday!');

对于传统的if语句，如果执行体代码超过了1 条语句，则需要加花括号，而利用逗号表达式，可以执行任意条代码而不用加花括号

if(conditoin) alert(1),alert(2),console.log(3);

禁止别人以iframe加载你的页面

if (window.location != window.parent.location) window.parent.location = window.location;

console.table(Chrome专属)

//采购情况 以表格形式输出到浏览器
var data = [{'品名': '好利来', '数量': 4}, {'品名': '哈哈', '数量': 3}];
console.table(data);

原文链接

都是风景幸会

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
灵活运用浏览器

*HTML篇一、浏览器地址栏运行JavaScript代码javascript:alert('hello from address bar :)');二、浏览器地址栏运行HTML代码data:text/html,<h1>Hello, world!</h1>三、把浏览器当编辑器地址栏输入data:text/html, <html contenteditable>将下列代码放到console执行，整
复制链接

扫一扫