且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

用户脚本 - 有没有办法将jquery代码注入angularjs dom?

更新时间:2022-03-13 00:30:10

Angular在加载页面后很好地修改了DOM,所以你需要一些方法来等待你关心的事件或节点。

Angular modifies the DOM well after the page is loaded, so you need some way to wait for the events or nodes you care about.

此外,您必须保持代码(尤其是jQuery)不会干扰页面的代码。这意味着你应该努力保持沙盒开启。

Also, you must keep your code (especially jQuery) from interfering with the page's code. This means you should endeavor to keep the sandbox switched on.

对于Firefox + Greasemonkey或Chrome + Tampermonkey(或大多数支持的引擎@require 指令),您可以使用 waitForKeyElements()实用程序 @grant 指令来实现这些目标。

For Firefox+Greasemonkey or Chrome+Tampermonkey (or most engines that support the @require directive), you can use the waitForKeyElements() utility and the @grant directive to accomplish these goals.

这个完整的示例脚本适用于FF + GM和Chrome + TM:

This complete, sample script will work on both FF+GM and Chrome+TM:

// ==UserScript==
// @name     _Add a div after .nav elements
// @include  http://YOUR_SERVER.COM/YOUR_PATH/*
// @require  http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js
// @require  https://gist.github.com/raw/2625891/waitForKeyElements.js
// @grant    GM_addStyle
// ==/UserScript==
/*- The @grant directive is needed to work around a design change
    introduced in GM 1.0.   It restores the sandbox.
*/

waitForKeyElements (".nav", addTestDiv);

function addTestDiv (jNode) {
    jNode.after ('<div>test</div>');
}


如果您使用的引擎不支持 @require 指令(如直接的Chrome用户脚本),请切换! Tampermonkey值得转换。

If you are using an engine that doesn't support the @require directive (like a straight Chrome userscript), switch! Tampermonkey is worth switching to.