發現一款超級實用的瀏覽器腳本加載方式,如果我們正在看一篇文章,覺得這篇文章離得配圖都特別好看想下載。
目前常見方式有兩種:
一:鼠標右鍵,另存為功能,一張一張手動保存。
二:使用瀏覽器擴展程序一鍵下載
今天的小技巧是第三種方式,自己寫個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(...)內,下載圖片功能只是個例子,重要的是這種思路會幫助我們在工作中解決很多需要解放勞動力的事情。
