在完成加载之前使用 DomNodeInserted 重写 HTML

Posted 2023-02-19

【中文标题】在完成加载之前使用 DomNodeInserted 重写 HTML

【英文标题】：Using DomNodeInserted to rewrite HTML before it finishes loading

【发布时间】：2012-10-27 22:17:00

【问题描述】：

我觉得这对于任何非业余爱好者来说可能会立即显而易见，但我已经为此困扰了好几天。

我正在编写一个在文档开始时执行脚本的 Chrome 扩展程序。我想在加载特定 DIV 时重写它们的 html，但在它们显示给用户之前（因此用户在它被我的自定义 HTML 毫不客气地替换之前看不到网站的 HTML）。我尝试使用的方法如下所示。

addEventListener('DOMNodeInserted', function(event)
    if(event.relatedNode.innerHTML.indexOf("contentArea")>-1)
        writeContentArea();
    
, false);

function writeContentArea()

    var divtowrite = document.getElementById('contentArea');
    include(divtowrite,"contentArea.html"); //my AJAX include function

现在，问题是，当页面加载和 JS 执行时，div 在被替换之前仍然会加载。奇怪的是，当我尝试使用不同的 div（例如侧边栏）时，它按预期工作；即，div 在显示给用户之前被替换。我不明白为什么它适用于某些 div 而不适用于其他 div。

我不知道这是否相关，但在 Chrome 方面我有：

chrome.tabs.getSelected(null, function(tab) 

    if(tab.url.indexOf("search.php") > -1)
        chrome.tabs.executeScript(null,
            file: "fhrun.js", allFrames: false, runAt: "document_start"
        );
    

);

关于为什么这不起作用的任何想法，或者我应该使用的更好方法？谢谢！！

【问题讨论】：

见***.com/questions/13277212/…

【参考方案1】：

不确定这是否是您正在寻找的方法，但您是否考虑过注入 CSS 以在初始加载时隐藏内容区域，并在修改内容后将其设置为在 javascript 中可见？

CSS 文件如下所示：

#contentArea  display:none;  

或

#contentArea  visibility:hidden; 

然后你会使用以下方式注入它：

    chrome.tabs.insertCSS(null, 
file: "youfile.css", allFrames: false, runAt: "document_start");

然后将您的内容更改功能修改为：

function writeContentArea()
    var divtowrite = document.getElementById('contentArea');
    include(divtowrite,"contentArea.html"); //my AJAX include function
    divtowrite.style.display = 'block';

【讨论】：

谢谢，这是一个很好的解决方法，但并不能完全解决问题，即我希望能够拦截 DOM 元素并重写它们。我也尝试使用 jquery.livequery();但它和 DOMNodeInserted 有同样的问题。