在完成加載之前使用DomNodeInserted重寫HTML代碼

我覺得這對於任何非業餘愛好者來說可能會立即顯而易見，但我已經爲此擱置了好幾天。在完成加載之前使用DomNodeInserted重寫HTML代碼

我正在編寫一個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，而不適用於其他。

我不知道這是否是相關的，但在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"} 
     ); 
    } 

});

這是爲什麼不工作的任何想法，或者更好的方法，我應該使用？謝謝！！

來源

2012-11-07 Brian Mayer

請參閱http://stackoverflow.com/questions/13277212/mutation-observer-for-creating-new-elements – bfavaretto

不確定這是否是您正在尋找的方法，但是您是否考慮過注入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'; 
}

來源

2012-11-07 21:53:23 teddybeard

謝謝，這是一個很好的解決方法，但並不完全解決問題，這是我想成爲的能夠攔截DOM元素並重寫它們。我也嘗試使用jquery.livequery（）;但它具有與DOMNodeInserted相同的問題。 –

在完成加載之前使用DomNodeInserted重寫HTML代碼

回答

相關問題