浏览器链接栏,添加任意js脚本
发现一款超级实用的浏览器脚本加载方式,如果我们正在看一篇文章,觉得这篇文章离得配图都特别好看想下载。
目前常见方式有两种:
一:鼠标右键,另存为功能,一张一张手动保存。
二:使用浏览器扩展程序一键下载
今天的小技巧是第三种方式,自己写个js脚本,通过a标签引入,再讲a标签拖拽到浏览器链接栏目,需要使用该脚本时,点击即可加载并执行js
举个例子:
a标签包裹的按钮:讲该标签添加在网页html中,然后在预览页面中,鼠标拖动该按钮到链接栏即可。
<a style="display: inline-block;background: #ECECEC; border-radius: 5px;padding: 5px 10px;color: #666;cursor: move;" href="javascript:void((function(){var%20d=document,e=d.createElement(%22script%22);e.setAttribute(%22charset%22,%22UTF-8%22);e.setAttribute(%22src%22,%22http://baidu/js/test.js%22);d.body.appendChild(e)})());">测试</a>
http://baidu/js/test.js就是你要在链接栏加载的js脚本,点击才会加载并执行
js的写法:
javascript:void(function () { var imgs = document.getElementsByTagName("img"); var imgURLs = new Array(imgs.length); for(var i = 0;i<imgs.length;i++){ var $a = document.createElement('a'); $a.setAttribute("href", imgs[i].src); $a.setAttribute("download", ""); var evObj = document.createEvent('MouseEvents'); evObj.initMouseEvent( 'click', true, true, window, 0, 0, 0, 0, 0, false, false, true, false, 0, null); $a.dispatchEvent(evObj); imgURLs[i] = imgs[i].src; } console.log(imgURLs) }());
js需要被包裹在javascript:void(...)内,下载图片功能只是个例子,重要的是这种思路会帮助我们在工作中解决很多需要解放劳动力的事情。