由于双十一等大活动，公司的活动页面在很多人访问的时候，需要把图片刷入cdn中，减少用户请求等待时间，减小服务器压力。所有需要获取我们的11个活动页面的所有图片，如果通过chrome调试台一个个的抓不现实（而且图片有懒加载，要页面滚动到具体位置，才加载）。所以后面自己写了一个页面，输入目标页面，通过iframe嵌入本页面，加载完成后获取目标页面的所有图片地址；
!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
margin: 15px 0;
}
input {
width: 300px;
}
textarea {
width: 80%;
height: 500px;
}
</style>
</head>
<div>
<input type="text" id="gets" placeholder="输入需要获取的网站" style="vertical-align: top;">
</div>
<div>
<button>点击获取</button>
</div>
<div>
<textarea></textarea>
</div>
<body>
<script>
document.querySelector('button').onclick = function() {
var iframe = document.createElement("iframe");
iframe.src = document.querySelector('input').value;
iframe.style.width = "50%";
iframe.style.height = "300px";
if (iframe.attachEvent) {
iframe.attachEvent("onload", function() {
getImgSrc();
});
} else {
iframe.onload = function() {
getImgSrc();
};
}
document.body.appendChild(iframe);
}
function getImgSrc() {
var str = document.querySelector('iframe').contentWindow.document.querySelector('html').innerHTML; // 获取html所有string
var arr = [];
var reg = /http.+(\.jpg|\.png|\.bmp|\.jpeg|\.gif|\.webp)/g
var temp;
while (temp = reg.exec(str)) {
arr.push(temp[0])
}
arr = Array.from(new Set(arr)) // 去重
document.querySelector('textarea').value = arr.join('\n');
}
</script>
</body>
</html>
由于都是获取本公司的网站下的图片地址，所以不存在跨域。而且不会含有js文件，js中的图片链接也可以获取到
（如果不是存在跨域问题，in a frame because it set 'X-Frame-Options' to 'deny'，只有把页面下载到本地，然后自己把js加到下载页面底部，再页面加载完成后，获取本页面所有图片）
window.onload = function() {
var arr = [];
var str = document.querySelector('html').innerHTML;
var reg = /http.+(\.jpg|\.png|\.bmp|\.jpeg|\.gif|\.webp)/g
var temp;
while (temp = reg.exec(str)) {
arr.push(temp[0])
}
arr = Array.from(new Set(arr))
console.log('图片地址',arr)
}
</script>
当然有可能地址是相对于目标页面的相对路径。所以正则中的http可能需要更改一下，然后arr中的每一项也需要拼接上目标网站的域名。
2019-01-18
今天闲下来觉得用node解决一下抓取的跨域问题。
首先 通用要有node，然后安装依赖。创建js. 启动服务。KO;
var http = require('http');
var url = require('url');
var cheerio = require('cheerio'); // 类似于jquery
function download(url, callback) {
http.get(url, function(res) {
var data = '';
res.on('data', function(chunk) {
data += chunk;
})
res.on('end', function() {
callback(data)
})
}).on('error', function() {
callback(null)
})
}
http.createServer(function(req, res) {
console.log('启动服务')
res.writeHead(200, { 'Content-Type': 'text/plain' });
// 解析 url 参数
var params = url.parse(req.url, true).query;
var urls = params.url;
download(urls, function(data) {
if (data) {
var $ = cheerio.load(data);
var str = $('html').html()
var arr = [];
var reg = /http.+?(\.jpg|\.png|\.bmp|\.jpeg|\.gif|\.webp)/g
var temp;
while (temp = reg.exec(str)) {
arr.push(temp[0])
}
arr = Array.from(new Set(arr))
var txt = arr.join(`
`);
console.log("done");
} else {
console.log('error')
}
res.end(txt);
})
}).listen(3000);
