dom – 如何知道Google搜索结果页何时呈现其结果？

概述我正在编写Chrome扩展程序,将脚本注入Google的搜索结果页面并修改所有结果的主要元素. 我的问题是结果是异步呈现的,并且未在文档加载/就绪的页面中显示. 我有2个初始解决方案不起作用： >设置超时：不好的做法,但它的工作原理.然而,可能会显示不一致的结果,所以我宁愿避免这种解决方案. >绑定到’DOMNodeInserted’.通常可行,但在我的情况下更复杂,因为我在锚点之前插入新的节点, 我正在编写Chrome扩展程序,将脚本注入Google的搜索结果页面并修改所有结果的主要元素.

我的问题是结果是异步呈现的,并且未在文档加载/就绪的页面中显示.

我有2个初始解决方案不起作用：

>设置超时：不好的做法,但它的工作原理.然而,可能会显示不一致的结果,所以我宁愿避免这种解决方案.
>绑定到’DOMNodeInserted’.通常可行,但在我的情况下更复杂,因为我在锚点之前插入新的节点,这会触发递归.如果锚已被“标记”,我可以插入代码以避免它,但同样,这个解决方案很糟糕,因为每次插入一个节点时我都需要遍历所有锚点 – 从我检查过这种情况发生的次数超过140次搜索结果页面.

在搜索结果页面上是否有任何类型的自定义事件Google触发器？在这种情况下是否还有其他可用的DOM事件？

解决方法 你是对的,使用“DOMNodeInserted”不是一个好方法.如果不出意外,它就是过时的 Mutation Events API的一部分,由于臭名昭着的低效率而被弃用(以及其他原因).

它已被MutationObserver API取代,所以这是你应该使用的.您可以使用MutationObserver在根节点及其后代上观察“childList”DOM突变.
(如果选择这种方法,mutation-summary library也可能派上用场.)

在(非常浅)搜索之后,我发现(至少对我而言)Google将其结果放在带有ID搜索的div中.以下是执行以下 *** 作的示例扩展的代码：

>注册MutationObserver以检测div#search插入DOM.
>注册MutationObserver以检测div#search及其后代中的“childList”更改.
>每当a< a>添加节点,函数遍历相关节点并修改链接. (出于显而易见的原因,脚本会忽略< script>元素.)

此示例扩展只是将链接的文本包含在~~中,但您可以轻松地将其更改为执行您需要的任何 *** 作.

manifest.Json的：

{    "manifest_version": 2,"name":    "Test Extension","version": "0.0","content_scripts": [{        "matches": [            ...            "*://www.Google.gr/*","*://www.Google.com/*"        ],"Js":         ["content.Js"],"run_at":     "document_end","all_frames": false    }],}

content.Js：

console.log("Injected...");/* MutationObserver configuration data: Listen for "childList" * mutations in the specifIEd element and its descendants */var config = {    childList: true,subtree: true};var regex = /<a.*?>[^<]*<\/a>/;/* Traverse 'rootNode' and its descendants and modify '<a>' Tags */function modifylinks(rootNode) {    var nodes = [rootNode];    while (nodes.length > 0) {        var node = nodes.shift();        if (node.tagname == "A") {            /* Modify the '<a>' element */            node.INNERHTML = "~~" + node.INNERHTML + "~~";        } else {            /* If the current node has children,queue them for further             * processing,ignoring any '<script>' Tags. */            [].slice.call(node.children).forEach(function(childNode) {                if (childNode.tagname != "SCRIPT") {                    nodes.push(childNode);                }            });        }    }}/* Observer1: Looks for 'div.search' */var observer1 = new MutationObserver(function(mutations) {    /* For each MutationRecord in 'mutations'... */    mutations.some(function(mutation) {        /* ...if nodes have beed added... */        if (mutation.addednodes && (mutation.addednodes.length > 0)) {            /* ...look for 'div#search' */            var node = mutation.target.querySelector("div#search");            if (node) {                /* 'div#search' found; stop observer 1 and start observer 2 */                observer1.disconnect();                observer2.observe(node,config);                if (regex.test(node.INNERHTML)) {                    /* Modify any '<a>' elements already in the current node */                    modifylinks(node);                }                return true;            }        }    });});/* Observer2: Listens for '<a>' elements insertion */var observer2 = new MutationObserver(function(mutations) {    mutations.forEach(function(mutation) {        if (mutation.addednodes) {            [].slice.call(mutation.addednodes).forEach(function(node) {                /* If 'node' or any of its desctants are '<a>'... */                if (regex.test(node.outerHTML)) {                    /* ...do something with them */                    modifylinks(node);                }            });        }    });});/* Start observing 'body' for 'div#search' */observer1.observe(document.body,config);

总结

以上是内存溢出为你收集整理的dom – 如何知道Google搜索结果页何时呈现其结果？全部内容，希望文章能够帮你解决dom – 如何知道Google搜索结果页何时呈现其结果？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。