分类 JavaScript 下的文章

JavaScript语言核心之对象转换为原始值

对象到布尔值


  对象到布尔值的转换非常简单,所有的对象(包括数组和函数)都转换为true。对于包装对象亦是如此:new Boolean(false)是一个对象而不是原始值,它将转换为true
  

对象到字符串和对象到数字


它们的转换是通过调用待转换对象的一个方法来完成的。一个麻烦的事实是,`Javascript`对象有两个不同的方法来执行转换,并且接下来要讨论的特殊场景更加复杂。值得注意的是,这里提到的字符串和数字的转换规则只是用于本地对象(native object)。宿主随想(例如,有Web浏览器定义的对象)根据各自的算法可以转换成字符串和数字。
所有的对象继承了两个转换方法。

第一个是toString()


  • 它的作用是返回一个反应这个对象的字符串。默认的toString()方法并不会返回一个有趣的值(在例6-4中我们发现它非常有用):
({x:1, y:2}).toString()     // "[object Object]"

很多类定义了更多特定版本的toString()方法。例如,

  • 数组类(Array class)的的toString()方法将每个数组元素转换为一个字符串,并在元素之间添加逗号后合并成结果字符串;
  • 函数类(Function class)的toString()方法返回这个函数的实现定义的表示方式。实际上,这里的实现方式是通常是将用户定义的函数转换为Javascript源代码字符串
  • 日期类(Date class)定义的toString()方法返回了一个可读的(可被JavaScript解析的)的日期和时间字符串;
  • RegExp类(RegExp class)定义的toString()方法将RegExp对象转换为表示正则表达式直接量的字符串:
[1,2,3].toString()                  // => "1,2,3"
(function(x) { f(x); }).toString()  // =>"function(x) {\n f(x);\n}"
/\d+/g.toString()                   // "/\d+/g"
new Date(2010,0,1).toString()       // "Fri Jan 01 2010 00:00:00 GMT-0800 (PST)"

另一个转换对象的函数是valueOf()


  • 这个方法的任务并未详细定义:如果存在任意原始值,它将默认将对象转换为表示它的原始值。
  • 对象是复合值,而且大多数对象无法真正的表示为一个原始值,因此默认的valueOf()方法简单的返回对象本身,而不是返回一个原始值。
  • 数组、函数和正则表达式简单的继承了这个默认方法,调用这些类型的实例valueOf()方法会返回它的一个内部表示:1970年1月1日一来的毫秒数
var d = new Date(2010, 0, 1)    // 2010年1月1日(太平洋时间)
d.valueOf()                     // 1262332800000

通过使用我们刚刚讲解过的toString()valueOf()方法,就可以做到对象到字符串和对象到数字的转换了。但需要注意的是,在某些特殊的场景中,JavaScript执行了完全不同的对象到原始值的转换。这些特殊场景在最后会讲到。

对象到字符串的转换过程


  • 如果对象具有toString()方法,则调用这个方法。如果它返回一个原始值,JavaScript将这个值转换为字符串(如果本身不是字符串的话),并返回这个字符串的结果。需要注意的是,原始值到字符串的转换
  • 如果对象没有toString()方法,或者这个方法并不返回一个原始值,那么JavaScript会调用valueOf()方法。如果存在这个方法,则JavaScript调用它。如果返回值是原始值,JavaScript将这个值转换为字符串(如果本身不是字符串的话),并返回这个字符串结果。
  • 否则,JavaScript无法从toString()valueOf()获得一个原始值,因此这时它将抛出一个类型错误异常。

对象到数字的转换过程


  • 和转换字符串的过程类似,只是它会首先尝试使用valueOf()方法
  • 如果对象具有valueOf()方法,侯着返回一个原始值,则JavaScript将这个原始值转换为数字(如果需要的话)并返回这个数字
  • 否则,如果对象具有toString()方法,后者返回一个原始值,则JavaScript将其转换并返回
  • 否则,JavaScript抛出一个类型错误的异常。

对象转换为数字的细节解释了为什么空数组会被转换为数字0以及为什么具有单个元素的数组同样会转换成一个数字。数组继承了默认的valueOf()方法,这个方法返回一个对象而不是一个原始值,因此,数组到数字的转换则调用toString()方法。空数组转换成为空字符串,空字符串转换为数字0。含有一个元素的数组转换为字符串的结果和这个元素转换字符串的结果一样。如果数组只包含一个数组元素,这个数字转换为字符串,再转换为数字。

JavaScript中的 "+" 运算符可以进行数学加法和字符串链接操作。如果他的其中一个操作数是对象,则JavaScript将使用特殊的方法将对象转换为原始值,而不是使用其他的算术运算符的方法执行对象到数字的转化, "==" 相等运算符与此类似。如果将对象和一个原始值比较,则转换将会遵守对象到原始值的转换方式进行。

"+""==" 应用的对象到原始值的转换包含日期对象的一种特殊情形。日期类是JavaScript语言核心中唯一的预先定义类型,它定义了有意义的向字符串和数字类型的转换。对于所有非日期的对象来说,对象到原始值的转换基本上是对象到数字的转换(首先调用valueOf()),日期对象则使用对象到字符串的转换模式,然而,这里的转换和上文讲述的完全一致: 通过valueOf()toString()返回的原始值将被直接使用,而不会被强制转换为数字或字符串。

"==" 一样,"<" 运算符以及其他关系运算符也会做对象到原始值的转换,但要除去日期对象的特殊情形: 任何对象都会首先尝试调用valueOf(),然后调用toString()不管得到的原始值是否直接使用,它都不会进一步被转换为数字或字符串。

"+""==""!=" 和关系运算符是唯一执行这种特殊的字符串到原始值的转换方式的运算符。其他运算符到特定类型的转换都很明确,而且对日期对象来讲也没有特殊情况。例如 -(减号)运算符把它的两个操作数都转换为数字。下面的代码展示了日期对象和 "+""-""==" 以及 ">" 的运算结果:

var now = new Date();       // 创建一个日期对象
typeof (now + 1)            // => "string": "+"将日期转换为字符串
typeof (now - 1)            // => "number": "-"使用对象到数字的转换
now == now.toString()       // => true: 隐式的和显式的字符串转换
now > (now - 1)             // => true: ">"将日期转换为数字

全文主要摘自《JavaScript权威指南》第3.8.3节

模拟易名中国域名的点赞

易名中国的域名有点赞功能,点赞数高可以被推荐,但只能点一次,那么需求就来了

ename.jpg

方法一: ajax请求

与源代码的js类似,需要注意的是跨域问题, 因为请求的二级域名是www,所以也要在www主机页面的控制台(console)里跑,否则会返回非法请求

var praise = 0, num = 123456;   // num为你域名页面的id,在浏览器的url中可以直观看到
var _this = $('#praise');
var url = "http://www.ename.com/auction/praise"+'/' + num + '/' + praise;
// 这是它页面的源代码
$.ajax({
        url:url,
        type:'get',
        dataType:'json',
        success:function(data) {
            switch(data.flag) {
                case 1:
                    _this.find('.praise_amount').html("("+data.count+")");
                    var html = '<div class="dz_tip"><span class="outsideb"></span><span class="insideb"></span>点赞成功</div>';
                        _this.find('.praise_r').after(html);
                    $('.dz_tip').stop().fadeOut(2000, function() {
                        $(this).remove();
                    })
                    praise = data.praise;
                    break;
                case 2:
                default:
                    alert(data.msg);
            }
        }
});
  • 问题: 由于它服务端有对ip的判断,所以这代码只能用一次,而且不利于在linux服务器上跑脚本,所以替换方案来了

方法二: curl模拟

<?php

header('Content-Type: text/html; charset=utf-8');

// $num为你页面域名的id,可以在浏览器的url中直观看到
function run($num, $second = 30){

    $url = "http://www.ename.com/auction/praise/$num";

    $headers['CLIENT-IP'] = '202.103.229.46'; 
    $headers['X-FORWARDED-FOR'] = '202.103.229.46';
    $headers['X-Requested-With'] = 'XMLHttpRequest';    // 重要
    // X-Requested-With:XMLHttpRequest

    $headerArr = array(); 
    foreach( $headers as $n => $v ) { 
        $headerArr[] = $n .':' . $v;  
    }

    $ch = curl_init();
    curl_setopt ($ch, CURLOPT_URL, $url.'/0');
    curl_setopt ($ch, CURLOPT_HEADER, 1);
    curl_setopt ($ch, CURLOPT_HTTPHEADER , $headerArr );  //构造IP
    // curl_setopt ($ch, CURLOPT_REFERER, $url);   //构造来路

    $content = curl_exec($ch);
    curl_close($ch);
    return $content;
}

$res = run(123456);
  • 可以再对其优化下,加个循环把ip随机, 再加个sleep停顿下,再在header中中随机个UA模拟下更像
  • 返回结果如下就成功了
{"flag":1,"msg":"\u70b9\u8d5e\u6210\u529f","count":48,"praise":1}

再次提醒慎用,导致域名被封了概不负责

JavaScript黑魔法jother编码之谜

js的黑魔法jother编码之谜

引入


jother编码是我最开始想写的内容,原因有两点:

  1. 原理比较简单,不需要太多关于算法的知识。
  2. 比较有趣,是在对javascript有了很深的理解之后催生的产物。如果你只需要知道jother编码和解码的方法,那么你可以直接跳过文章正文看结论部分。如果你想知道其中的原理那么你可以带着这个疑问和我一起开始jother探索之旅。

在出发前,我们需要做一些准备工作,就如同去沙漠探险需要带上充足的水和干粮一样。有几样东西需要读者准备一下:

  1. javascript匿名函数相关知识。
  2. 递归思想。
  3. javascript变量类型基本知识。
  4. javascript一些基本函数。
  5. 一颗好奇的心。

那么我们现在就出发吧。首先给出一个非官方的jother编码定义:jother是一种运用于javascript语言中利用少量字符构造精简的匿名函数方法对于字符串进行的编码方式。其中少量字符包括:"!"、"+"、"("、")"、"["、"]"、"{"、"}"。只用这些字符就能完成对任意字符串的编码,我们可以得出两个结论:

  1. 递归是不可或缺的。
  2. 编码压缩率肯定是大于100%而且很高,也就是说编码之后的长度比原长度大很多。

我们先来看一个匿名函数的例子:

[function(){
   alert(1)
}()];

使用如果你把上面代码保存到之间,然后把保存的文件以html后缀结尾,并在浏览器中打开,你会看到一个弹框,弹框的内容为"1"。如果你习惯用console.log而不喜欢alert也是可以的。 紧接着我们稍微修改一下原代码:

alert([function(){
   alert(1)
}()]);

保存一下,再次刷新页面,我们可以看到先弹出了"1",后弹出了一个空白的框。

对于这个现象我们的解释是:第一次执行了alert(1),第二次执行了alert(函数)。而函数是一个匿名函数(有返回值),所以就是弹出的就是函数本身的返回值(如果无返回值的函数则是undefined)。如果你注意到了弹框的先后次序,那很好,说明你特别细心,这个原因是由于函数入栈和出栈导致的,在alert函数调用了匿名函数,当然要等待匿名函数先返回,然后自己才能返回。通过这里我们需要注意的是,javascript在alert函数中是可以执行新的函数的,而不仅仅是输出一个字符串。

下面我们再修改一下源代码:

alert([]);

保存执行一下,你看到了什么?依然弹了一个空白的框框,这个就说明[]也是一个匿名函数,而且是最简单的匿名函数,它也执行了。由于函数体都去掉了,所以导致仅仅留下了一个匿名函数的“空壳”。
我们再接着修改源码:

alert(+[]);

你发现了什么?弹出了0,不是吗?因为我们的运算符“+”,对于无法显示出来的空(void)的函数返回值进行了强制类型转换,将其转为了整形的“0”。 道生一,一生二,二生三,三生万物。

我们只有“0”如何生“1”呢?不要急,看下面一个例子:

alert(![]);

运行以后,依然弹框了,弹出了一个false,false是什么?是bool(在javascript里通常是指"boolbean")运算符,为什么变成了false?是因为"!"对其进行了强制类型转换。但是这又有什么用呢?不要急,我们用两个"!"来试试:

alert(!![]);

这次屏幕上弹出了"true",虽然仍然是bool类型,但是已经更加接近"1"了,如何把“true”变为“1”呢?不要看后面的内容,请大家思考一分钟。 我想大部分人都已经有答案了,让我们来验证一下:

alert(+!![]);

对,就是这样!使用加号进行强制类型转换,将true转换为"1"。有了1就好办了,至少其他数字我们都可以表示了,下面来验证一下你的想法:

"+[]",                                            //0
"+!![]",                                           //1
"!![]+!![]",                                       //2
"!![]+!![]+!![]",                                  //3
"!![]+!![]+!![]+!![]",                             //4
"!![]+!![]+!![]+!![]+!![]",                        //5
"!![]+!![]+!![]+!![]+!![]+!![]",                   //6
"!![]+!![]+!![]+!![]+!![]+!![]+!![]",              //7
"!![]+!![]+!![]+!![]+!![]+!![]+!![]+!![]",         //8
"!![]+!![]+!![]+!![]+!![]+!![]+!![]+!![]+!![]"     //9

它很酷,不是吗? 只有数字还不行,我们需要字符,字符串。那么数字如何变为字符串呢?这里就有点文章可做了,我一开始想到的是ascii码,但是如何将ascii码转换成字符呢?我们需要引入函数才行,但是能不能不引入新的函数?我们换一种思路来考虑这件事情:想办法生成一个数组,然后用数组中已有的字符直接指定下标显示。比如我们很容易就能产生的"true"、"false"。我们想要表示"a"的时候直接想办法输出一个"false",然后制定下标为"1"(注意这里"f"的下标为"0",所以"a"就是"1")不就可以了吗?

我们来证实一下:

alert((![])[+!![]]);

怎么样?看到了a吗?如果你回答:“看到了”,那么你肯定没有认真去动手做。这里输出的是“undefined”,这是为什么呢?因为![]表示的是false这个false是bool型的,当我们取一个bool型变量下标的时候javascript是不能允许的,所以这里给了一个undefined。那么我们如何想办法将bool型转为字符串呢?这里用到的是:"![]+[]"。

alert(typeof(![]+[]));

看到了吗?变成了string。这里就是说明了javascript在对bool类型和number类型做“+”运算的时候将其强制转换为了string类型。大家也可以自己动手用alert(typeof(xxx))试着判断一下之前提到的那些类型是否正确。

利用这个办法,我们就可以表示"a"、"e"、"f"、"l"、"r"、"s"、"t"、"u"。当然还有一个很容易得到的字符串——"undefined",又可以丰富一下我们的字典。这样,还是有很多字符无法表示,下面我们就来讨论一种扩展,Object:

alert({});

在javascript中"{}"表示一个最简单的类,如果运行上面的代码,会显示"[object Object]",同样这个object也是不能直接按数组下标获取元素的,我们需要做一个转换:({}+[])

alert(({}+[])[+[]]);

这样就可以取到第0个元素:"["。 做这个扩展其实主要是为了得到一个重要的字符"o",因为我们后面要说的sort函数需要用到它。

扩展

----

首先我们来补充一个前置概念——javascript匿名函数的原生形式

[]['sort']['constructor']('函数体')();

​这样的构造可以执行任意javascript代码。

为了吸引读者眼球,这里先埋下伏笔:

利用jother编码可以在不用字母和数字的情况执行任意js代码,这个在XSS攻击中是十分有用的,唯一的不足就是编码太长了,如何缩短编码,其实还是有些办法的,而且结合真实的攻击环境中可能允许输入一些字符,我们就可以指替换部分代码。比如代码中对“alert”过滤,是否可以利用jother重新编码函数,用匿名函数调用“alert”,在调用“alert”的时候仅替换alert中的r,这样就形成了“ale”+xxx(jother)+“t”的形式。

下面就开始正式介绍如何利用jother编码调用匿名函数,在第一篇内容中我们已经拥有了一些字符串,这些字符串中的每个字符我们都可以利用数组下标定位的方式取到,我们来看一下这些字符都有什么:“true”、“false”、“undefined”、“[object Object]”(注意这里有个很有用的字符空格)。我们来对比一下[]'sort'1;我们还缺少什么?其实已经什么都不缺了。下面我们来构造这样的一个形式,为了直观我直接给出构造的结果:

[][(![]+[])[!![]+!![]+!![]]+({}+[])[+!![]]+(!![]+[])[+!![]]+(!![]+[])[+[]]][({}+[])[!![]+!![]+!![]+!![]+!![]]+({}+[])[+!![]]+({}[[]]+[])[+!![]]+(![]+[])[!![]+!![]+!![]]+(!![]+[])[+[]]+(!![]+[])[+!![]]+({}[[]]+[])[+[]]+({}+[])[!![]+!![]+!![]+!![]+!![]]+(!![]+[])[+[]]+({}+[])[+!![]]+(!![]+[])[+!![]]]((!![]+[])[+!![]]+(!![]+[])[!![]+!![]+!![]]+(!![]+[])[+[]]+({}[[]]+[])[+[]]+(!![]+[])[+!![]]+({}[[]]+[])[+!![]]+({}+[])[!![]+!![]+!![]+!![]+!![]+!![]+!![]]+(![]+[])[!![]+!![]]+({}+[])[+!![]]+({}+[])[!![]+!![]+!![]+!![]+!![]]+(![]+[])[+!![]]+(!![]+[])[+[]]+({}[[]]+[])[!![]+!![]+!![]+!![]+!![]]+({}+[])[+!![]]+({}[[]]+[])[+!![]])()

这个例子实际上等价于:

[]['sort']['constructor']('return location')()

注意这里是return后面的空格就是需要用前面我们提到的[object Object]来取到。

有了这个函数我们就可以获取很多有用的字符了,比如在线的话,就可以取到"http(s)://" 这样就有了新的字符“p”。

有了这个字符以后我们就可以利用escape和unescape函数组合出更多的字母以及特殊符合,例如利用escape(' ');得到“%20”,利用“%”和数字字母组合再unescape得到新的字符。

后面的事情就由你来自由发挥了。

当然构造一些字母的时候还有其他的技巧,比如构造出Infinity 其实是利用数字接近无穷大,原理就是想办法达到 e的100000次方,我们在这里就不一一列出了,具体的思路可以参照附件中的jother.js,这是jother发明者写的一段jother encode的demo。

这里为了证明一开始提到的猜想我们给出一个不用任何字母和数字就能实现alert(1)的例子:

[][(![]+[])[!![]+!![]+!![]]+({}+[])[+!![]]+(!![]+[])[+!![]]+(!![]+[])[+[]]][({}+[])[!![]+!![]+!![]+!![]+!![]]+({}+[])[+!![]]+({}[[]]+[])[+!![]]+(![]+[])[!![]+!![]+!![]]+(!![]+[])[+[]]+(!![]+[])[+!![]]+({}[[]]+[])[+[]]+({}+[])[!![]+!![]+!![]+!![]+!![]]+(!![]+[])[+[]]+({}+[])[+!![]]+(!![]+[])[+!![]]]((![]+[])[+!![]]+(![]+[])[!![]+!![]]+(!![]+[])[!![]+!![]+!![]]+(!![]+[])[+!![]]+(!![]+[])[+[]]+[][(![]+[])[!![]+!![]+!![]]+({}+[])[+!![]]+(!![]+[])[+!![]]+(!![]+[])[+[]]][({}+[])[!![]+!![]+!![]+!![]+!![]]+({}+[])[+!![]]+({}[[]]+[])[+!![]]+(![]+[])[!![]+!![]+!![]]+(!![]+[])[+[]]+(!![]+[])[+!![]]+({}[[]]+[])[+[]]+({}+[])[!![]+!![]+!![]+!![]+!![]]+(!![]+[])[+[]]+({}+[])[+!![]]+(!![]+[])[+!![]]]((!![]+[])[+!![]]+(!![]+[])[!![]+!![]+!![]]+(!![]+[])[+[]]+({}[[]]+[])[+[]]+(!![]+[])[+!![]]+({}[[]]+[])[+!![]]+({}+[])[!![]+!![]+!![]+!![]+!![]+!![]+!![]]+({}[[]]+[])[+[]]+({}[[]]+[])[+!![]]+(!![]+[])[!![]+!![]+!![]]+(![]+[])[!![]+!![]+!![]]+({}+[])[!![]+!![]+!![]+!![]+!![]]+(![]+[])[+!![]]+([]+[][(![]+[])[!![]+!![]+!![]]+({}+[])[+!![]]+(!![]+[])[+!![]]+(!![]+[])[+[]]][({}+[])[!![]+!![]+!![]+!![]+!![]]+({}+[])[+!![]]+({}[[]]+[])[+!![]]+(![]+[])[!![]+!![]+!![]]+(!![]+[])[+[]]+(!![]+[])[+!![]]+({}[[]]+[])[+[]]+({}+[])[!![]+!![]+!![]+!![]+!![]]+(!![]+[])[+[]]+({}+[])[+!![]]+(!![]+[])[+!![]]]((!![]+[])[+!![]]+(!![]+[])[!![]+!![]+!![]]+(!![]+[])[+[]]+({}[[]]+[])[+[]]+(!![]+[])[+!![]]+({}[[]]+[])[+!![]]+({}+[])[!![]+!![]+!![]+!![]+!![]+!![]+!![]]+(![]+[])[!![]+!![]]+({}+[])[+!![]]+({}+[])[!![]+!![]+!![]+!![]+!![]]+(![]+[])[+!![]]+(!![]+[])[+[]]+({}[[]]+[])[!![]+!![]+!![]+!![]+!![]]+({}+[])[+!![]]+({}[[]]+[])[+!![]])())[!![]+!![]+!![]]+(!![]+[])[!![]+!![]+!![]])()([][(![]+[])[!![]+!![]+!![]]+({}+[])[+!![]]+(!![]+[])[+!![]]+(!![]+[])[+[]]][({}+[])[!![]+!![]+!![]+!![]+!![]]+({}+[])[+!![]]+({}[[]]+[])[+!![]]+(![]+[])[!![]+!![]+!![]]+(!![]+[])[+[]]+(!![]+[])[+!![]]+({}[[]]+[])[+[]]+({}+[])[!![]+!![]+!![]+!![]+!![]]+(!![]+[])[+[]]+({}+[])[+!![]]+(!![]+[])[+!![]]]((!![]+[])[+!![]]+(!![]+[])[!![]+!![]+!![]]+(!![]+[])[+[]]+({}[[]]+[])[+[]]+(!![]+[])[+!![]]+({}[[]]+[])[+!![]]+({}+[])[!![]+!![]+!![]+!![]+!![]+!![]+!![]]+(!![]+[])[!![]+!![]+!![]]+(![]+[])[!![]+!![]+!![]]+({}+[])[!![]+!![]+!![]+!![]+!![]]+(![]+[])[+!![]]+([]+[][(![]+[])[!![]+!![]+!![]]+({}+[])[+!![]]+(!![]+[])[+!![]]+(!![]+[])[+[]]][({}+[])[!![]+!![]+!![]+!![]+!![]]+({}+[])[+!![]]+({}[[]]+[])[+!![]]+(![]+[])[!![]+!![]+!![]]+(!![]+[])[+[]]+(!![]+[])[+!![]]+({}[[]]+[])[+[]]+({}+[])[!![]+!![]+!![]+!![]+!![]]+(!![]+[])[+[]]+({}+[])[+!![]]+(!![]+[])[+!![]]]((!![]+[])[+!![]]+(!![]+[])[!![]+!![]+!![]]+(!![]+[])[+[]]+({}[[]]+[])[+[]]+(!![]+[])[+!![]]+({}[[]]+[])[+!![]]+({}+[])[!![]+!![]+!![]+!![]+!![]+!![]+!![]]+(![]+[])[!![]+!![]]+({}+[])[+!![]]+({}+[])[!![]+!![]+!![]+!![]+!![]]+(![]+[])[+!![]]+(!![]+[])[+[]]+({}[[]]+[])[!![]+!![]+!![]+!![]+!![]]+({}+[])[+!![]]+({}[[]]+[])[+!![]])())[!![]+!![]+!![]]+(!![]+[])[!![]+!![]+!![]])()(({}+[])[+[]])[+[]]+(!![]+!![]+[])+(!![]+!![]+!![]+!![]+!![]+!![]+!![]+!![]+[]))+(+!![]+[])+[][(![]+[])[!![]+!![]+!![]]+({}+[])[+!![]]+(!![]+[])[+!![]]+(!![]+[])[+[]]][({}+[])[!![]+!![]+!![]+!![]+!![]]+({}+[])[+!![]]+({}[[]]+[])[+!![]]+(![]+[])[!![]+!![]+!![]]+(!![]+[])[+[]]+(!![]+[])[+!![]]+({}[[]]+[])[+[]]+({}+[])[!![]+!![]+!![]+!![]+!![]]+(!![]+[])[+[]]+({}+[])[+!![]]+(!![]+[])[+!![]]]((!![]+[])[+!![]]+(!![]+[])[!![]+!![]+!![]]+(!![]+[])[+[]]+({}[[]]+[])[+[]]+(!![]+[])[+!![]]+({}[[]]+[])[+!![]]+({}+[])[!![]+!![]+!![]+!![]+!![]+!![]+!![]]+({}[[]]+[])[+[]]+({}[[]]+[])[+!![]]+(!![]+[])[!![]+!![]+!![]]+(![]+[])[!![]+!![]+!![]]+({}+[])[!![]+!![]+!![]+!![]+!![]]+(![]+[])[+!![]]+([]+[][(![]+[])[!![]+!![]+!![]]+({}+[])[+!![]]+(!![]+[])[+!![]]+(!![]+[])[+[]]][({}+[])[!![]+!![]+!![]+!![]+!![]]+({}+[])[+!![]]+({}[[]]+[])[+!![]]+(![]+[])[!![]+!![]+!![]]+(!![]+[])[+[]]+(!![]+[])[+!![]]+({}[[]]+[])[+[]]+({}+[])[!![]+!![]+!![]+!![]+!![]]+(!![]+[])[+[]]+({}+[])[+!![]]+(!![]+[])[+!![]]]((!![]+[])[+!![]]+(!![]+[])[!![]+!![]+!![]]+(!![]+[])[+[]]+({}[[]]+[])[+[]]+(!![]+[])[+!![]]+({}[[]]+[])[+!![]]+({}+[])[!![]+!![]+!![]+!![]+!![]+!![]+!![]]+(![]+[])[!![]+!![]]+({}+[])[+!![]]+({}+[])[!![]+!![]+!![]+!![]+!![]]+(![]+[])[+!![]]+(!![]+[])[+[]]+({}[[]]+[])[!![]+!![]+!![]+!![]+!![]]+({}+[])[+!![]]+({}[[]]+[])[+!![]])())[!![]+!![]+!![]]+(!![]+[])[!![]+!![]+!![]])()([][(![]+[])[!![]+!![]+!![]]+({}+[])[+!![]]+(!![]+[])[+!![]]+(!![]+[])[+[]]][({}+[])[!![]+!![]+!![]+!![]+!![]]+({}+[])[+!![]]+({}[[]]+[])[+!![]]+(![]+[])[!![]+!![]+!![]]+(!![]+[])[+[]]+(!![]+[])[+!![]]+({}[[]]+[])[+[]]+({}+[])[!![]+!![]+!![]+!![]+!![]]+(!![]+[])[+[]]+({}+[])[+!![]]+(!![]+[])[+!![]]]((!![]+[])[+!![]]+(!![]+[])[!![]+!![]+!![]]+(!![]+[])[+[]]+({}[[]]+[])[+[]]+(!![]+[])[+!![]]+({}[[]]+[])[+!![]]+({}+[])[!![]+!![]+!![]+!![]+!![]+!![]+!![]]+(!![]+[])[!![]+!![]+!![]]+(![]+[])[!![]+!![]+!![]]+({}+[])[!![]+!![]+!![]+!![]+!![]]+(![]+[])[+!![]]+([]+[][(![]+[])[!![]+!![]+!![]]+({}+[])[+!![]]+(!![]+[])[+!![]]+(!![]+[])[+[]]][({}+[])[!![]+!![]+!![]+!![]+!![]]+({}+[])[+!![]]+({}[[]]+[])[+!![]]+(![]+[])[!![]+!![]+!![]]+(!![]+[])[+[]]+(!![]+[])[+!![]]+({}[[]]+[])[+[]]+({}+[])[!![]+!![]+!![]+!![]+!![]]+(!![]+[])[+[]]+({}+[])[+!![]]+(!![]+[])[+!![]]]((!![]+[])[+!![]]+(!![]+[])[!![]+!![]+!![]]+(!![]+[])[+[]]+({}[[]]+[])[+[]]+(!![]+[])[+!![]]+({}[[]]+[])[+!![]]+({}+[])[!![]+!![]+!![]+!![]+!![]+!![]+!![]]+(![]+[])[!![]+!![]]+({}+[])[+!![]]+({}+[])[!![]+!![]+!![]+!![]+!![]]+(![]+[])[+!![]]+(!![]+[])[+[]]+({}[[]]+[])[!![]+!![]+!![]+!![]+!![]]+({}+[])[+!![]]+({}[[]]+[])[+!![]])())[!![]+!![]+!![]]+(!![]+[])[!![]+!![]+!![]])()(({}+[])[+[]])[+[]]+(!![]+!![]+[])+(!![]+!![]+!![]+!![]+!![]+!![]+!![]+!![]+!![]+[])))()

注意这里我们由于用到了对'('、')'的编码,其实就要用到escape和unescape,所以要在http(s)://协议下面使用,如果是本地文件那么会取到"file://"导致无法正常执行。 最后给出jother编码和解码的方法:

  • 编码:我想如果你仔细阅读了全文,这个问题对你来说应该很简单了。
  • 解码:直接使用

alert(xxx)、console(xxx)、document.write(xxx)即可(xxx为编码内容)。

  • 思考: 中文如何弄出来?
unescape('%u4e2d')    // 中

原文出自: http://drops.wooyun.org/web/4410
附一个编码工具: http://qqxxoo.zz.mu/

根据文本域(Textarea)内容自动调整高度

  • html部分
<textarea data-adaptheight rows="3" cols="40" placeholder="Your input"
style="padding: 16px; line-height: 1.5;"></textarea>
  • js部分
(function() {
    function adjustHeight(textareaElement, minHeight) {
        // compute the height difference which is caused by border and outline
        var outerHeight = parseInt(window.getComputedStyle(el).height, 10);
        var diff = outerHeight - el.clientHeight;

        // set the height to 0 in case of it has to be shrinked
        el.style.height = 0;

        // set the correct height
        // el.scrollHeight is the full height of the content, not just the visible part
        el.style.height = Math.max(minHeight, el.scrollHeight + diff) + 'px';
    }


    // we use the "data-adaptheight" attribute as a marker
    var textAreas = document.querySelectorAll('textarea[data-adaptheight]');

    // iterate through all the textareas on the page
    for (var i = 0, l = textAreas.length; i < l; i++) {
        var el = textAreas[i];

        // we need box-sizing: border-box, if the textarea has padding
        el.style.boxSizing = el.style.mozBoxSizing = 'border-box';

        // we don't need any scrollbars, do we? :)
        el.style.overflowY = 'hidden';

        // the minimum height initiated through the "rows" attribute
        var minHeight = el.scrollHeight;

        el.addEventListener('input', function() {
            adjustHeight(el, minHeight);
        });

        // we have to readjust when window size changes (e.g. orientation change)
        window.addEventListener('resize', function() {
            adjustHeight(el, minHeight);
        });

        // we adjust height to the initial content
        adjustHeight(el, minHeight);
    }
}());

示例:http://jsfiddle.net/5h4fauq8/1/
原文:http://web.jobbole.com/81906/

jQuery动态固定页面元素

原文出自,可参考其具体实例 http://www.cnblogs.com/Hodor/archive/2012/07/25/2607831.html


// 固定顶部
$('#order-lefttitle').parent().parent().parent().scrollFix('top','top');
// 固定底部
$('#order-footerinfo').scrollFix('bottom','bottom');

;(function($) {
  jQuery.fn.scrollFix = function(height, dir) {
    height = height || 0;
    height = height == "top" ? 0 : height;
    return this.each(function() {
      if (height == "bottom") {
        height = document.documentElement.clientHeight - this.scrollHeight;
      } else if (height < 0) {
        height = document.documentElement.clientHeight - this.scrollHeight + height;
      }
      var that = $(this),
        oldHeight = false,
        p, r, l = that.offset().left;
      dir = dir == "bottom" ? dir : "top"; //默认滚动方向向下
      if (window.XMLHttpRequest) { //非ie6用fixed


        function getHeight() { //>=0表示上面的滚动高度大于等于目标高度
          return (document.documentElement.scrollTop || document.body.scrollTop) + height - that.offset().top;
        }
        $(window).scroll(function() {
          if (oldHeight === false) {
            if ((getHeight() >= 0 && dir == "top") || (getHeight() <= 0 && dir == "bottom")) {
              oldHeight = that.offset().top - height;
              that.css({
                position: "fixed",
                top: height,
                left: l
              });
            }
          } else {
            if (dir == "top" && (document.documentElement.scrollTop || document.body.scrollTop) < oldHeight) {
              that.css({
                position: "static"
              });
              oldHeight = false;
            } else if (dir == "bottom" && (document.documentElement.scrollTop || document.body.scrollTop) > oldHeight) {
              that.css({
                position: "static"
              });
              oldHeight = false;
            }
          }
        });
      } else { //for ie6
        $(window).scroll(function() {
          if (oldHeight === false) { //恢复前只执行一次,减少reflow
            if ((getHeight() >= 0 && dir == "top") || (getHeight() <= 0 && dir == "bottom")) {
              oldHeight = that.offset().top - height;
              r = document.createElement("span");
              p = that[0].parentNode;
              p.replaceChild(r, that[0]);
              document.body.appendChild(that[0]);
              that[0].style.position = "absolute";
            }
          } else if ((dir == "top" && (document.documentElement.scrollTop || document.body.scrollTop) < oldHeight) || (dir == "bottom" && (document.documentElement.scrollTop || document.body.scrollTop) > oldHeight)) { //结束
            that[0].style.position = "static";
            p.replaceChild(that[0], r);
            r = null;
            oldHeight = false;
          } else { //滚动
            that.css({
              left: l,
              top: height + document.documentElement.scrollTop
            })
          }
        });
      }
    });
  };
})(jQuery);

js判断页面是否有滚动条

前端经常各种调试,有时候直接判断页面是否有滚动条能直接解决问题
4 是滚动条边框所占像素

// 是否有竖向滚动条
if (document.documentElement.clientHeight < document.documentElement.offsetHeight-4){

    //执行相关脚本。

}

// 是否有横向滚动条
if (document.documentElement.clientWidth < document.documentElement.offsetWidth-4){

    //执行相关脚本。

}

textarea的Tab缩进

我们常常习惯了在各种代码编辑器里使用tab进行代码缩进,增加代码可读性和美观,通常在Markdown中也有tab缩进区分等级,例如列表序列,二级列表在开头会多缩进一点。那么问题来了,一按tab焦点就自动转移了下一个html元素上了,不免大失所望。

现在推荐一款轻量的js插件解决这个问题,tabIndent.js

调用方法


  • 先引入js文件
<script src="tabIndent.js"></script>
  • 对页面所有textarea都可tab缩进
tabIndent.renderAll();
  • 也可针对某个textarea单独设置
var el = document.getELementById('#targetTextArea');
tabIndent.render(el);
  • 也可以动态删除他们的tab效果
// 全部清掉效果
tabIndent.removeAll();
// 清楚某个元素的tab效果
var el = document.getElementById('#textareaWithTabIndent');
tabIndent.remove(el);

Typecho系统的后台文章新增/编辑的textarea框增加tab效果


  • 先把tabIndent.js文件放入admin/js/目录下
  • admin/write-js.php文件的第五行添加如下代码
<script src="<?php $options->adminStaticUrl('js', 'tabIndent.js'); ?>"></script>
  • admin/write-js.php中的<script>标签的尾部也就是ready事件的底部,第258行添加如下代码
// textarea框的tab缩进
var textArea = document.getElementById('text');
tabIndent.render(textArea);

Markdown的代码高亮

Markdown编辑器生成的页面,大多都是对代码用<code></code><pre></pre>包裹起来,所以只要对这两个标签用js批量修改css即可

  • 列表项目
  • 使用的js插件是highlight.js
  • 一般在文章底部加入以下代码
<!-- 代码高亮 -->
<link rel="stylesheet" type="text/css" href="http://cdn.staticfile.org/highlight.js/8.3/styles/default.min.css">
<script type="text/javascript" src="http://cdn.staticfile.org/highlight.js/8.3/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

注意:最后一句hljs.initHighlightingOnLoad();必须在页面加载完成后才执行,你也可以放在js的onload事件里

附highlight.js官网demo,里面有各种样式的css,看个人喜好使用
https://highlightjs.org/static/demo/

js中substr和substring的区别

substring

    • substring 方法用于提取字符串中介于两个指定下标之间的字符
    • substring(start,end) 开始和结束的位置,从零开始的索引

      • start 必需。一个非负的整数,规定要提取的子串的第一个字符在 stringObject 中的位置。
      • stop 可选。一个非负的整数,比要提取的子串的最后一个字符在 stringObject 中的位置多 1。如果省略该参数,那么返回的子串会一直到字符串的结尾。
    • 返回值
      一个新的字符串,该字符串值包含 stringObject 的一个子字符串,其内容是从 start 处到 stop-1 处的所有字符,其长度为 stop 减 start。
    • 说明
    1. 方法返回的子串包括 start 处的字符,但不包括 end 处的字符。

    如果 start 与 end 相等,那么该方法返回的就是一个空串(即长度为 0 的字符串)。
    如果 start 比 end 大,那么该方法在提取子串之前会先交换这两个参数。
    如果 start 或 end 为负数,那么它将被替换为 0

    substr

    • 定义和用法
      substr 方法用于返回一个从指定位置开始的指定长度的子字符串。
    • 语法
      stringObject.substr(start [, length ])

    参数 描述
    start 必需。所需的子字符串的起始位置。字符串中的第一个字符的索引为 0。
    length 可选。在返回的子字符串中应包括的字符个数。

    • 说明

      • 如果start为负数,则start=str.length+start。
      • 如果 length 为 0 或负数,将返回一个空字符串。
      • 如果没有指定该参数,则子字符串将延续到stringObject的最后。

    举例:

    var str = "0123456789";
    
    alert(str.substring(0));------------"0123456789"
    alert(str.substring(5));------------"56789"
    alert(str.substring(10));-----------""
    alert(str.substring(12));-----------""
    alert(str.substring(-5));-----------"0123456789"
    alert(str.substring(-10));----------"0123456789"
    alert(str.substring(-12));----------"0123456789"
    alert(str.substring(0,5));----------"01234"
    alert(str.substring(0,10));---------"0123456789"
    alert(str.substring(0,12));---------"0123456789"
    alert(str.substring(2,0));----------"01"
    alert(str.substring(2,2));----------""
    alert(str.substring(2,5));----------"234"
    alert(str.substring(2,12));---------"23456789"
    alert(str.substring(2,-2));---------"01"
    alert(str.substring(-1,5));---------"01234"
    alert(str.substring(-1,-5));--------""
    
    alert(str.substr(0));---------------"0123456789"
    alert(str.substr(5));---------------"56789"
    alert(str.substr(10));--------------""
    alert(str.substr(12));--------------""
    alert(str.substr(-5));--------------"56789"
    alert(str.substr(-10));-------------"0123456789"
    alert(str.substr(-12));-------------"0123456789"
    alert(str.substr(0,5));-------------"01234"
    alert(str.substr(0,10));------------"0123456789"
    alert(str.substr(0,12));------------"0123456789"
    alert(str.substr(2,0));-------------""
    alert(str.substr(2,2));-------------"23"
    alert(str.substr(2,5));-------------"23456"
    alert(str.substr(2,12));------------"23456789"
    alert(str.substr(2,-2));------------""
    alert(str.substr(-1,5));------------"9"
    alert(str.substr(-1,-5));-----------""   

    JQuery的:visible选择器在IE8下无效的问题

    下面这段代码在chrome,FF等标准浏览器下正常选择,甚至IE7也正常(IE6/IE9未测),但是在IE8下始终返回空的jquery对象

    // 选择表格中所有可见的行,给他们加上红色边框
    var rows = $('table tr:visible').css('border','1 px solid');

    无奈只有自己循环判断:

    jQuery.fn.theadVisible = function() {
        for(var i = 0; i < this.length; i++){
            if(this[i].style.display !== 'none'){
                return $(this[i]);
            }
        }
        return this;
    }

    可以直接贯连使用:

    var rows = $('table tr').theadVisible().css('border','1px solid red');