› › 文章

使用浏览器书签,执行js脚本

可能看标题有点难理解,执行js干嘛?页面元素加载出来后,我们可能对它进行一些DOM操作,例如屏蔽广告、获取数据、修改元素之类的。

如果是每次都用Chrome的Console面板来执行,实在是太麻烦了,如果只是用来调试还好。

QQ截图20160323215751 (1)

于是我一直在找,一开始想用油猴这个插件的。但是它貌似不支持jQuery,而且感觉很复杂,没有继续研究。

找到用书签的方式!

你随便添加一个书签,然后修改内容,改为:

javascript:alert("Hello World!");

QQ截图20160323220217 (1)   QQ截图20160323220227 (1)

如果是想复杂一点的操作,建议还是引入外部js文件比较好点。

javascript: (function () {
var jsCode = document.createElement('script');
jsCode.setAttribute('src', 'http://www.chaozhi.cm/page/javascript/getThumImgHover.js');
document.body.appendChild(jsCode);
}());

例如上一段,可以根据京东商品幻灯片的hover状态,获取商品大图。

QQ截图20160323220637 (1)

就这样,把一个个脚本存储到收藏夹~方便

理论可以参考:http://www.jb51.net/article/26364.htm

 

------2016年3月26日更新------

在查看京东或者淘宝主轮播图的时候,想下载图片很不方便,于是用js全部抓取并且添加进页面里。

要保持直接右键另存为,或者Alt+鼠标点击即可快速保持。

QQ截图20160326182048 (1)

var imgObj=$(".spec-items li img");
var insite='<ul class="insite">';
for(var i=0;imgObj.length>i;i++){
var imgSrc=imgObj.eq(i).attr("src").replace("360buyimg.com/n5/jfs/","360buyimg.com/n0/jfs/");
insite+='<li><img src="'+imgSrc+'" /></li>';
};
insite+='</ul>';
$("body").append(insite);
$(".insite").css({"position": "fixed", "top": "100px", "z-index": "100", "width": "150px",})
$(".insite li").css({"width": "150px",})
$(".insite li img").css({"max-width": "100%",})

0 0

发表评论