编写油猴脚本的一些心得分享

今天在编写油猴脚本时，需要屏蔽网站上某个元素绑定的事件，我在控制台上使用以下语句，能够成功解除元素的绑定事件，但是，在油猴脚本上进行使用的时候却实现不了。

$(".comicimg").off()

一顿谷歌之后，终于在以下网站得到了解答：https://stackoverflow.com/questions/20012668/disabling-all-click-events-from-greasemonkey-doesnt-work，我花了一个晚上的时间在谷歌上搜索答案，最后将问题用英文描述出来才找到了答案，看来以后要尽量用英文描述问题，节约时间。

出错的原因如下：The jQuery the page is using is not the same as the jQuery in your script. Because of that, .off() in your script cannot remove the listeners on the page because they were added with a different jQuery function.还要要注意的是.unbind()已经不被使用，而是用.off()代替。

为了解决这个问题，油猴官方提供了unsafeWindow。We can use unsafeWindow to access the page's window object.具体用法如下（注意代码为三行）：

// @grant      unsafeWindow
let $ = unsafeWindow.jQuery
$(".comicimg").off()

 

还有就是推荐一个比较好用的在DOM插入新元素的方法原型

原型：insertAdajcentHTML(swhere,stext)

Element.insertAdjacentHTML方法解析HTML字符串，然后将生成的节点插入DOM树的指定位置。

1	element.insertAdjacentHTML(position, text);

该方法接受两个参数，第一个是指定位置，第二个是待解析的字符串。

参数：

swhere: 指定插入html标签语句的地方，有四种值可用：

1. beforeBegin: 插入到标签开始前

2. afterBegin:插入到标签开始标记之后

3. beforeEnd:插入到标签结束标记前

4. afterEnd:插入到标签结束标记后

注意：该方法不是彻底置换现有的DOM结构，这使得它的执行速度比innerHTML操作快得多。

stext：要插入的内容，直接就是字符串就行

1 2 3 4 5

// 原来的HTML代码：<div id="one">one</div> var d1 = document.getElementById('one'); d1.insertAdjacentHTML('afterend', '<div id="two">two</div>'); // 现在的HTML代码： // <div id="one">one</div><div id="two">two</div>