能不能帮分析下这个网页的 js 和 css 是怎么实现的

[chinaglwo]

http://www.99csw.com/book/3906/134399.htm

按 f12 打开网页，可以看到<div id="content">后面是文章内容，每个段落都是一个 div ，但是都是不可见的，而且是乱序的，不是网页上所看到的文章内容。

然后继续往下，到了<span id="note_box" style="display: none;"><span class="note"></span><span class="arrow"></span></span> ，再下面的 div 开始，有一些是真正的文章内容，规律是第一个 div 是真实内容，然后每隔 5 个 div ，也就是第 7 个 div 又是真实内容，中间的 5 个 div 也是不可见的。

然后我滚动网页往下，会加载新的 div(新的文章内容)，也是和上面的每隔 5 个 div 规律一样，同时<span id="note_box"之前的 div 在消失，也没有新的 ajax 请求产生。

页面滚到最下方，最前面的 div 都消失了。

[XianZaiZhuCe]

我都不知道怎么说，就这么实现的啊，可能他是为了 SEO ？
你想用 js 怎么控制就怎么控制吧

[XianZaiZhuCe]

另外可能也是防止被爬？

[imt]

content = {
index: 0,
step: 5,
star: 0,
add: 0,
state: 'load',
showState: 'no',
childNode: [],
load: function () {
var e = base64.decode(document.getElementsByTagName('meta')[4].getAttribute('content')).split(/[A-Z]+%/);
var j = 0;

function r(a) {
var c = '';
var d = document.createElement('span');
for (var i = 0; i < 20; i++) {
var n = Math.floor(Math.random() * 99001 + 1000);
c += String.fromCharCode(n)
};
var b = ['。', '：', '？', '！', '—', '…', '；', '，', '”', ''];
c += b[Math.floor(Math.random() * b.length)];
d.style.color = '#fff';
d.style.fontSize = '0';
d.style.lineHeight = '0';
d.style.position = 'absolute';
d.style.top = 0;
d.style.left = 0;
d.appendChild(document.createTextNode(c));
a.appendChild(d);
return a
};
for (var i = 0; i < e.length; i++) {
if (e[i] < 5) {
this.childNode[e[i]] = r(this.box.childNodes[i + this.star]);
j++
} else {
this.childNode[e[i] - j] = r(this.box.childNodes[i + this.star])
}
};
this.show()
},
check: function () {
return this.showState == 'yes' && content.button.style.display != 'none' && this.offsetTop + this.button.offsetTop - Math.max(document.body.scrollTop, document.documentElement.scrollTop) < document.documentElement.clientHeight ? true : false
},
init: function (a, b) {
if (!b) {
return false
};
this.time = new Date().getTime();
this.box = a;
this.button = b;
this.offsetTop = 0;
this.randomContent = [];
this.hiddenItem = [];
this.showItem = [];

function random() {
return String.fromCharCode(Math.floor(Math.random() * 25 + 97)) + Math.floor(Math.random() * (1000000000))
};
var c = document.styleSheets[2];
for (var i = 0; i < 100; i++) {
this.showItem.push(random());
this.hiddenItem.push(random())
}
if (c.insertRule) {
c.insertRule('#content .' + this.hiddenItem.join(',#content .') + '{display:none;}', 0);
c.insertRule('#content .' + this.showItem.join(',#content .') + '{display:block;}', 0)
} else {
for (var i = 0; i < this.hiddenItem.length; i++) {
c.addRule('#content .' + this.hiddenItem[i], 'display:none');
c.addRule('#content .' + this.showItem[i], 'display:block')
}
};
for (var i = 0; i < this.box.childNodes.length; i++) {
if (this.box.childNodes[i].tagName == 'H2') {
this.star = i + 1
}
if (this.box.childNodes[i].tagName == 'DIV' && this.box.childNodes[i].className != 'chapter') {
break
}
};
/\/([0-9]+)\/([0-9]+)\./.test(location.href);
this.sid = RegExp.$2;
this.load();
window.onscroll = function () {
if (content.check()) {
content.showNext()
}
}
},
show: function () {
this.showState = 'no';
var a = 0;
for (var i = this.index; i < this.childNode.length; i++) {
if (this.childNode[i].nodeType != 1) {
continue
};
a += this.childNode[i].innerHTML.length;
this.index = i + 1;
this.childNode[i].className = content.showItem[Math.floor(Math.random() * 100)];
this.box.appendChild(this.childNode[i]);
for (var j = 0; j < 5; j++) {
var b = this.childNode[Math.floor(Math.random() * this.childNode.length)].cloneNode(true);
b.className = content.hiddenItem[Math.floor(Math.random() * 100)];
this.box.appendChild(b)
};
if (a > 500) {
break
}
}
var c = getCookie(this.sid);
if (!c || c < this.index || c > this.childNode.length + 1) {
addCookie(this.sid, this.index, location.pathname)
}
content.time = getCookie(this.sid) > this.index ? 0 : new Date().getTime();
if (this.index >= this.childNode.length) {
this.button.style.display = 'none'
} else {
this.showState = 'yes';
if (this.check()) {
this.showNext()
}
}
},
showNext: function () {
if (this.showState == 'no') {
return false
};
this.showState = 'no';
setTimeout(function () {
content.show()
}, Math.max(0 - (new Date().getTime() - content.time), 0))
}
};


只能帮你到这里了

[qiayue]

对方做了防采集，你如果按照 html 中的顺序，文章段落四乱的。
他这是加载后用 js 调整了顺序，你只需要按照他的 js 去还原就可以

[KunsLand]

推荐一个网站， http://jsbeautifier.org/
楼主可以试试把那些看不懂的 js 文件内容复制到里面，会有神奇的结果等着你。

[chinaglwo]

@imt 感谢了，我学习一下

[chinaglwo]

@qiayue 我是想学学怎么采集，学习 js

[KunsLand]

有点意思，我就深入进去了，最后找到了恢复段落顺序的办法，下面列出关键步骤：
1. Chrome 查看源码，地址栏输入： view-source:http://www.99csw.com/book/3906/134399.htm
2. 从网页源码中找到__第 5 个 meta 标签__，具体内容为：
```html
<meta name="client" content="MTdFJTM3UyUzM0klNDJSJTI5TiU2SCUyN08lNDFBJTM5VSUxNUElMjJEJTMxVCUyNU8lNDBVJTEyTSUxNkwlNVUlNDNMJTdZJTBDJTI3WSUxNUglMjJTJTE0VCUyNUwlNDVHJTM3SiUyMFklMTlFJTMxVSU5USUzNkklMjFJJTExWSUzQSU0WiUzMUklNDFYJTI2ViUyVCUxUCUzOUUlMzdUJTE0UiUxNg==" />
```
这个 meta 标签的 content 值是经过 base64.encode 处理过的段落顺序。
3. 下载包含恢复顺序逻辑的 js 脚本文件（文件名为 99csw.js ）： http://www.99csw.com/command/99csw.js
4. 将 99csw.js 的内容复制到 http://jsbeautifier.org/
5. 在 jsbeautifier 处理后的内容中找到 @imt 列出的 content 的内容，以及 content 前面的 base64 对象部分的内容。
6. 只需看 content 对象的 load 函数的第一句话： var e = base64.decode(document.getElementsByTagName('meta')[4].getAttribute('content')).split(/[A-Z]+%/);
这就是恢复段落顺序最关键的一步。
7. 在 Chrome 浏览器中打开网页： http://www.99csw.com/book/3906/134399.htm
8. 按 F12 ，打开开发者工具，点击“控制台”或“ Console ”，输入： base64.decode(document.getElementsByTagName('meta')[4].getAttribute('content')).split(/[A-Z]+%/)
你将会看到段落顺序数组。

[chinaglwo]

@KunsLand 感谢。
我看不懂网站原有的 js ，所以之前 @imt 发的我没明白意思，看到 @KunsLand 说的网站，我才知道原来可以这么看。再经过你的解释，就明白了。接下来我继续研究下怎么弄，谢谢。

[Lullaby]

view-source:http://www.99csw.com/book/3906/134399.htm

[chinaglwo]

@KunsLand
["17", "37", "33", "42", "29", "6", "27", "41", "39", "15", "22", "31", "25", "40", "12", "16", "5", "43", "7", "0", "27", "15", "22", "14", "25", "45", "37", "20", "19", "31", "9", "36", "21", "11", "3", "4", "31", "41", "26", "2", "1", "39", "37", "14", "16"]

这里面有些数字没有，而有些数字重复的，怎么弄呢

[KunsLand]

数字缺失或重复，这个的看源码，你看看 content 这个对象的 load 方法的最后一个 for 循环：
for (var i = 0; i < e.length; i++) {
if (e[i] < 5) {
this.childNode[e[i]] = r(this.box.childNodes[i + this.star]);
j++
} else {
this.childNode[e[i] - j] = r(this.box.childNodes[i + this.star])
}
};
简化一下就是（感觉上是某个 hash 算法的逆过程）：
for (var i = 0; i < e.length; i++) {
if (e[i] < 5) {
//序号不变，就是 e[i];
j++;//j 的初值为 0 ；
} else {
//序号为 e[i]-j
}
};

所以最终的顺序可以这么求（以下代码均可在 console 里执行，当然得打开网址： http://www.99csw.com/book/3906/134399.htm ）：

var e = base64.decode(document.getElementsByTagName('meta')[4].getAttribute('content')).split(/[A-Z]+%/);

var c=[], a=e.map(Number);

for(i=0;i<a.length;i++){if(a[i]<5){c.push(a[i]);j++;}else{c.push(a[i]-j);}}

最后结果是：
[17, 37, 33, 42, 29, 6, 27, 41, 39, 15, 22, 31, 25, 40, 12, 16, 5, 43, 7, 0, 26, 14, 21, 13, 24, 44, 36, 19, 18, 30, 8, 35, 20, 10, 3, 4, 28, 38, 23, 2, 1, 34, 32, 9, 11]
排一下续：
c.sort(function(a,b){return a-b;})
结果为：
[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44]

[imt]

那么多人提到我反解的 js,那么我在贡献一条新的思路,用油猴脚本:

[code]
// ==UserScript==
// @name 99csw
// @namespace http://tampermonkey.net/
// @version 0.9
// @description 99csw get word
// @author imt
// @match http://www.99csw.com/book/*/*.htm
// @require https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js
// @grant none
// ==/UserScript==
/* jshint -W097 */
'use strict';

var times=30;
function cus_scroll(){
if($(document).scrollTop()+document.documentElement.clientHeight>=$(document).height() && times>0){
$("#content div[class]:visible").each(function(){
$(this).children().remove();
console.log($(this).html());
});
}else{
$("body").animate({ scrollTop:$(document).height() }, 1000,cus_scroll);
}
}

$(function(){
$("body").animate({ scrollTop:$(document).height() }, 1000,cus_scroll);
});
[/code]

[chinaglwo]

@KunsLand 非常感谢，每步都解释很清楚，对我帮助很大

[chinaglwo]

@imt 好高深，我看不懂，但是我也非常感谢

[imt]

@chinaglwo 就是油猴脚本,搜索一下,chrome 下直接输出原文内容哈

[chinaglwo]

@imt 哇塞，试过了，自动滚动页面到最后，然后在 console 输出文章内容，超级强大了。我要好好花时间学习才行。感谢。

[imt]

@chinaglwo 哈哈哈...好好学习,天天想上...

[chinaglwo]

@imt 嗯嗯。我是想用火车采集，然后写个 php 插件来处理要抓取的内容，怎么调用 js ，还没搞明白。

[imt]

@chinaglwo 这个是客户端采集,和服务端 php 插件不一样的.
以你的问题为例:
客户端采集,采集浏览器已经"渲染"排序的文章(最终文章的正确顺序),不用考虑它怎么"算法"排序的.
而服务端彩信就是之前提到的那些"算法"找出对应的顺序,用你的 php 插件还原它的正确顺序.

[chinaglwo]

@imt 嗯，火车采集器没法做渲染的动作呢

[chinaglwo]

@imt 我已经用 php 还原正确顺序，搞定了，多谢。