微软的Bing必应搜索引擎每天都会更换首页的背景大图(大图?其实也不大,连笔记本桌面背景都不能用)。这些图片非常漂亮,我们其实可以拿来留作他用的。
如果要在自己博客使用该怎么办呢?
微软提供了一个返回xml格式数据的接口。由于浏览器安全的设置,直接通过JavaScript跨域远程调用貌似不可以(是不是这样呢?我搞了好久没成功)。而服务器端则不存在这个问题,所以我使用php将其解析重新打包成了一个返回json数据的接口,放到了我的服务器上,并且简单写了个JavaScript调用方法。如果你对这些图片有兴趣,不妨试试。
首先介绍下我的服务器接口
接口地址就是http://www.qiqiboy.com/bingimage.php
默认返回一张图片的json数据。
支持三个参数:
- idx: 貌似是天数,意思就是几天以前。默认为0。0表示当天的图片,1就表示1天以前的图片,……依次类推
- number: 图片数量,最大为8。默认为1。图片返回顺序为由新到旧
- varname: 加此参数会返回类似varname={}。默认无。例如:试试http://www.qiqiboy.com/bingimage.php?varname=imgs和http://www.qiqiboy.com/bingimage.php的区别。
返回的json数据经解析后会是一个JS数组,数组的每个元素代表一张图片的相关信息。其中imgurl是图片的地址,title是图片的标题,desc是图片的描述。
了解了这个接口你也可以自行通过JavaScript或者其他方式来访问这个接口。
提供一个简单的JavaScript跨域获取方法
由于接口在我服务器上,涉及到跨域通信安全问题,所以你不能直接通过XMLHttpRequest对象来获取,我推荐使用JS动态加载方法来实现。
我写了个实现最基本的操作的JS脚本,支持三个参数,前两个即为固定的几天之前和图片数量,第三个为回调函数。代码如下,我并提供了两个简单的列子:
function getBingImage(idx,number,callback) {//callback为回调函数,即数据获取成功后的操作
var js=document.createElement('script'),rand=parseInt(Math.random()*100000000);
js.setAttribute('type', 'text/javascript');
js.src='http://www.qiqiboy.com/bingimage.php?idx='+(idx?idx:0)+'&number='+(number?number:1)+'&varname=imgs_'+rand;
js.onload = js.onerror = js.onreadystatechange = function () {
if (js && js.readyState && js.readyState != "loaded" && js.readyState != "complete") {
return;
}
callback(window['imgs_'+rand]);
js.onload = js.onreadystatechange = js.onerror = null;
js.parentNode.removeChild(js);
js = null;
};
document.getElementsByTagName('head')[0].appendChild(js);
}
/* 例子1:先熟悉下返回的数据格式 */
getBingImage(0,1,function(data){
alert(data[0].imgurl);
alert(data[0].title);
alert(data[0].desc);
});
/* 例子2:获取当天开始的五张图片并显示出来 */
getBingImage(0,5,mydo);
function mydo(data){//此函数即为回调函数,参数data即为得到的图片数组
for(var i=0;i<data.length;i++)//将图片全部显示出来
$('bingimg').innerHTML+='<img width="300" height="200" alt="'+data[i].desc+'" title="'+data[i].title+'" src="'+data[i].imgurl+'"/>';
}
/* 例子3:获取最新的一张图片当做id为bingimg的节点的背景图片 */
function setBg(data){
document.getElementById('bingimg').background='url(data[0].imgurl) center center no-repeat';
}
getBingImage(0,1,setBg);
最后提供一个demo,可以自行查看下载。
