在说这个视频前,先说说浏览器的控制台,它可是一个很强大的功能,按下F12就可以弹出控制台。(在百度经验的界面下打开的控制台,里面还有一份百度招聘的邀请函)
这个控制台的信息是什么出来的呢?很简单,使用console.log()即可。我们先保存一个收藏夹,把网址部分改写成:javascript:(function(){console.log('第一次运行,SUCCESS')})()
然后在单击这个书签。在下方的控制台下就会出现“第一次运行,SUCCESS”的字样。当然百度网页的这个效果不是靠我这方法的来实现的,但是都是用相同的语言Javascript写的。只是它的javascitp位置是在页面的中,我的在书签中。
还有一种的方法是直接在控制台的下方输入console.log("第一次运行,SUCCESS")按回车结束。
可见收藏夹和控制台都是可以运行Javascript的。其中能运行Javascipt的收藏夹我们把它叫做bookmarklet。Bookmarklet的语法结构是javascript:(function(){……})(),和控制台可以通用。我们了解了两者的特点,那么就可以用它们做事情了,控制台用于测试代码,bookmarlet用于代码打包。在做下面的事情之前,我们先下载一个离线的编辑器“ckeditor”。把它放到解压之后本地目录下。找到“index.html”,路径是" ckeditor\samples\index.html"。以浏览器打开它。
我们做个测试,找一篇图文的word,直接复制word文章内容到这个编辑器,在这个编辑器中将会保留图片。
接着我们运行如下的代码:
javascript: (function(window, document, c) {
var framD = document.getElementsByTagName('iframe')[0].contentDocument;
var img = framD.getElementsByTagName('img');
var ar = [];
for (var i in img) {
ar.push(img[i].src)
}
c = document.createElement('div'), c.id = 'excel', c.setAttribute('style', 'position:absolute;top:0;left:0;background:yellow;opacity:0.8');
c.innerHTML = " <table><tr><td>" + ar.join('</td></tr><tr><td>') + " </td></tr></table>";
with(open().document) {
write(c.outerHTML);
close()
}
})(window, document)
最后会在这个页面的右边新建一个“about:blank”页面,内容里面是file:///*之类的文字列。这个是本地的图片的路径。上述的代码实际上是把图片的路径提取了出来。
不仅如此用同样的方法还可以提取网页图片的地址,复制任意一篇的公众号或者网页的文章到编辑器,再运行代码。
Word里面的图之所以不能复制到微信公众号之中是因为,word里面的图片是本地的路径,而公众号里的图是网址。要想把word里的图复制到微信公众号就需要把图片的路径替换成网址。我们复制图片网址。
接着切回复制word内容的界面中,运行如下代码,输入框中输入图片的全部网址,可以把图片替换:
javascript: void((function() {
str = prompt("请黏贴图片url");
var framD = document.getElementsByTagName('iframe')[0].contentDocument;
var arr = str.split(" ");
var img = framD.getElementsByTagName('img');
var img_len = img.length;
for (var i = 0; i < img_len; i++) {
img[i].src = arr[i];
img[i].removeAttribute('width');
img[i].removeAttribute('height');
img[i].removeAttribute('data-cke-saved-src');
img[i].removeAttribute('style')
}
})())
看效果,之后就可以把这篇内容复制到微信公众号上了。这只是冰山一角,如果你会JS还可以写出更强大的功能。包括网页抓取,数据分析。