getElementsByClassName（）未在Firefox中找到元素25

在Firefox 24中，Devtools-tweaks使Firefox檢查器中的選定項目以深藍色顯示，因此它們更加明顯。然而，在Firefox 25 beta中，它表示在使用'iframe-ruleview'類（檢查器的右側列表）查找面板時未定義，雖然我可以在DOM檢查器中看到此元素，但它是具有CSS屬性的右側面板。getElementsByClassName（）未在Firefox中找到元素25

相關的代碼在內容/ inspectorTweaks.js：

// window.inspector is documented in inspector-panel.js 
// .doc and window is inspector.xul window. 
window.addEventListener('load',function() { 
    var frame = document.getElementsByClassName('iframe-ruleview')[0]; 
    if (!frame.contentWindow.location.href.contains('cssruleview.xul')) { 
     //Not the xul, it's a html we have to extend from here (Firefox 22+) 
     frame.setAttribute('context',"dtCSSContext"); 
    } 
    function styleit() { 
     var frame = document.getElementById('markup-box').children[0]; 
     var doc = frame.contentDocument; 
     var style= doc.createElement('style'); 
     style.appendChild(doc.createTextNode(
     '.theme-selected { border:1px solid blue; padding:1px; margin-left:-2px; border-radius:3px;}'+ 
     '.theme-twisty:not([open]) {top:5px; left:5px;}' 
     )); 
     doc.body.appendChild(style);//what's the equivalent for old xul file? 
    } 
    styleit(); 
    window.inspector.on("markuploaded", styleit); 
    frame.addEventListener('load',styleit); 
    //frame.contentWindow.addEventListener('load',styleit); 
});

它說frame是不確定的，這使該代碼的其餘部分從工作異常。

我試着用下面的例子改變它，但我認爲它是打算從主框架devtools？

window.addEventListener('load',function() { 
    let {ConsoleUtils, gDevTools} = Components.utils.import("resource:///modules/devtools/gDevTools.jsm", {}); 
    let {devtools} = Components.utils.import("resource://gre/modules/devtools/Loader.jsm", {}); 
    let TargetFactory = devtools.TargetFactory; 
    console.log('tf:') 
    console.log(TargetFactory) 
    console.log(devtools) 
    let target = TargetFactory.forTab(gBrowser.selectedTab);

^此代碼給gBrowser未定義的錯誤。

來源

2013-10-06 NoBugs

嘗試'var frame = document.querySelector（'。iframe-ruleview'）;' – Sergio

向我們展示相關的HTML。如果在當前框架中有一個對象具有一個「iframe-ruleview」類，那麼它將起作用，所以還有其他事情正在進行，我們需要查看HTML以幫助您瞭解哪些問題是錯誤的。 – jfriend00

看起來'負載'不會這樣做，但它在'pageshow'事件中可用。也許命令/事件綁定改爲25.

來源

2013-10-18 06:07:39 NoBugs

在Firefox夜間看這個UI，<iframe class='iframe-ruleview'>在另一個<iframe id="toolbox-panel-iframe-inspector" class="toolbox-panel-iframe">裏面，它本身在<iframe class="devtools-toolbox-bottom-iframe">裏面，它本身就是tabbrowser綁定中的匿名內容。

你應該確保兩件事情是真的：

1）你的代碼是<iframe id="toolbox-panel-iframe-inspector" class="toolbox-panel-iframe">內運行。

2）如果該創建異步發生，您的代碼在ruleview iframe創建之前未運行。

來源

2013-10-06 13:10:46

在25中，我直接在chrome：//browser/content/devtools/inspector/inspector.xul中看到它是一個iframe，這是我覆蓋的框架。什麼是等待創建iframe-ruleview元素的最佳方式？ – NoBugs

@NoBugs查看Mike Ratcliffe的回答？他是真正瞭解這個代碼的人。 ;） –

在工具箱打開之前不會創建面板。我們已經創建了有用的方法來獲取這些面板中的對象。我不知道你怎麼想附加的代碼，但在這裏是如何打開Inspector面板，並添加您的調整的例子：那，而不是打開的面板，你可以喜歡聽的

let {ConsoleUtils, gDevTools} = Cu.import("resource:///modules/devtools/gDevTools.jsm", {}); 
let {devtools} = Cu.import("resource://gre/modules/devtools/Loader.jsm", {}); 
let TargetFactory = devtools.TargetFactory; 
let target = TargetFactory.forTab(gBrowser.selectedTab); 

gDevTools.showToolbox(target, "inspector").then(function(toolbox) { 
    inspector = toolbox.getCurrentPanel(); 
    let doc = inspector._markupFrame.contentDocument; 
    let style = doc.createElement('style'); 
    style.appendChild(doc.createTextNode(
    '.theme-selected { border:1px solid blue; padding:1px; margin-left:-2px; border-radius:3px;}'+ 
    '.theme-twisty:not([open]) {top:5px; left:5px;}' 
)); 
    doc.body.appendChild(style); 
});

我懷疑工具箱打開，但我認爲你有這個手。

作爲一個方面，我們很快就會創建開發DevTools主題的方式，以便您不需要使用像這樣的黑客。

來源

2013-10-06 23:02:10

謝謝，這是記錄在任何地方？這是否與最新的幾個Firefox版本兼容？ – NoBugs

目前還沒有，因爲我們的工具正在以非常快的速度發展。我會說在他們的測試中，瞭解如何打開和訪問這些工具的最佳位置。例如，要查看測試如何訪問標記視圖，請下載源代碼並查看瀏覽器/ devtools/markupview/test下的測試。請注意，測試通常默認加載head.js，並且該文件包含一堆輔助函數。 –

謝謝，我在哪裏可以找到/運行這些測試？ – NoBugs

getElementsByClassName（）未在Firefox中找到元素25

回答

相關問題