Question

我正在尝试使用附加SDK动态更改标签的样式。我怎么能这样做？

以下是我的尝试：

我可以像这样访问标签对象：

var tabs=require('sdk/tabs');
tabs.on('ready',function(tab){
  console.log('url is: '+tab.url); //-> url is http://www.google.com
  console.log('stlye is: '+tab.url); //-> style is null
});

但是样式属性是null，并且以下都不起作用：

tab.setAttribute('style','background-color:blue'); // the method doesn't exist
tab.style.backgroundColor='blue'; // type error because style is null
tab.style='background-color:blue'; // has no effect

那么如何动态更改标签的样式呢？我尝试过的另一件事是使用code from the docs将标签转换为XUL对象：

var { modelFor } = require("sdk/model/core");
var { viewFor } = require("sdk/view/core");

var tabs = require("sdk/tabs");
var tab_utils = require("sdk/tabs/utils");

function mapHighLevelToLowLevel(tab) {
  // get the XUL tab that corresponds to this high-level tab
  var lowLevelTab = viewFor(tab);
  // now we can, for example, access the tab's content directly
  var browser = tab_utils.getBrowserForTab(lowLevelTab);
  console.log(browser.contentDocument.body.innerHTML);
  // get the high-level tab back from the XUL tab
  var highLevelTab = modelFor(lowLevelTab);
  console.log(highLevelTab.url);
}

tabs.on("ready", mapHighLevelToLowLevel);

但代码抛出错误：模块'sdk / model / core'在资源中找不到：//gre/modules/commonjs/sdk/model/core.js 即使我按照指示并创建了core.js文件。另外，我不明白大括号在var { modelFor}=语法中做了什么。

感谢您的帮助。

Answer 1

您需要访问xul标签元素。

试试这个：

var tabsLib = require("tabs/tab.js");
var tab = tabsLib.getTabForWindow(htmlWindow);
tab.style.color = 'red'; //makes the tab text red

传递htmlWindow作为html文档的最顶层窗口。就像document.defaultView.top一样。 document.defaultView是window

的document

如果它不起作用然后只是获取浏览器窗口，这个例子获取最新的浏览器窗口（请记住可能有多个浏览器窗口打开（浏览器窗口是一个firefox窗口，有标签，[也许弹出窗口 - 我不确定在sdk]）

    const { getMostRecentBrowserWindow } = require('sdk/window/utils');
    var aDOMWindow = getMostRecentBrowserWindow();
    if (aDOMWindow.gBrowser && aDOMWindow.gBrowser.tabContainer) {
        var tabs = aDOMWindow.gBrowser.tabContainer.childNodes;
            for (var i=0; i<tabs.length; i++) {
                tabs[i].style.color = 'red'; //makes the tab text red;
           }
    }

使用附加SDK更改选项卡的样式

1 个答案: