getElementsByClassName(） 在 Firefox 25 中找不到元素

getElementsByClassName() not finding element in Firefox 25

本文关键字：找不到 元素 Firefox getElementsByClassName      更新时间：2023-09-26

在 Firefox 24 中，Devtools-tweaks 使 Firefox 检查器中的选定项目以深蓝色勾勒出来，因此它们更明显。然而，在 Firefox 25 beta 中，它说在查找带有"iframe-ruleview"类（检查器的正确列表）的面板时它是未定义的，尽管我可以在 DOM 检查器中看到这个元素，但它是具有 css 属性的正确面板。

内容/检查器中的相关代码调整.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 未定义错误。

在

打开工具箱之前不会创建面板。我们创建了用于获取这些面板中对象的有用方法。我不确定您要如何附加代码，但这里有一个如何打开检查器面板并添加调整的示例：

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 主题变得更加容易，这样你就不需要使用这样的黑客了。

每晚在

Firefox 中查看此 UI，<iframe class='iframe-ruleview'>位于另一个 <iframe id="toolbox-panel-iframe-inspector" class="toolbox-panel-iframe"> 中，该 本身位于一个<iframe class="devtools-toolbox-bottom-iframe">内，该本身是选项卡浏览器绑定内的匿名内容。

您应该确保两件事是正确的：

1）您的代码在<iframe id="toolbox-panel-iframe-inspector" class="toolbox-panel-iframe">内运行。

2） 在创建规则视图 iframe 之前，您的代码未运行（如果该创建是异步发生的）。

似乎"加载"不起作用，但它在"pageshow"事件中可用。也许顺序/事件绑定在 25 年发生了变化。

相关文章：