使用javascript getElementById的Firefox XUL工具栏问题

我正在编写我的第一个Firefox XUL工具栏,并且出现一种奇怪的行为-为了调试代码,我从firefox工具栏和我创建的非常简单的HTML文件中的按钮调用了相同的js函数.
javascript函数显示一个警报窗口,使用’document.getElementById’获取元素,更改其颜色,并显示另一个警报窗口.
使用HTML按钮调用javascript函数时,效果很好,但是使用工具栏按钮时,“ document.getElementById”将返回null且该函数终止(仅显示第一个警报窗口).
任何猜测有什么问题吗？我在下面提供了(非常简单的)代码以进行报复.

提前谢谢了！

JavaScript文件-facebrew.js

函数FaceBrew_rtlSelection(){
    警报(‘之前！’);
  sel_node = document.getElementById(“ header”);
    sel_node.style.color =’蓝色’;
    警报(‘之后！’);
}

HTML文件(不带空格)

< ！DOCTYPE HTML PUBLIC“-// W3C // DTD XHTML 1.0 Transitional // EN”“ http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
< html xmlns =“ http://www.w3.org/1999/xhtml”>

<头>
<标题>测试< / title>
    <脚本类型=“ text / javascript” src =“ http：//localhost/Sandbox/FaceBrew/chrome/content/facebrew.js”> < / script>
< / head>

<身体>
<输入type =“ button” value =“点击我” id =“ select” onclick =“ FaceBrew_rtlSelection()” />
< div id =“ header”>
  < h1>你好,世界！< / h1>
< / div>
< / body>
< / html>

XUL文件-facebrew.xul

<script type="application/x-javascript"
        src="chrome://facebrew/content/facebrew.js" />

<toolbox id="navigator-toolbox">
    <toolbar id="FaceBrew-Toolbar" toolbarname="FaceBrew Toolbar" accesskey="F"
             class="chromeclass-toolbar" context="toolbar-context-menu" 
             hidden="false" persist="hidden">
        <toolbaritem flex="0">            
            <toolbarbutton id="FaceBrew-Web-Button" tooltiptext=""
                           label="Run" oncommand="FaceBrew_rtlSelection()" />
        </toolbaritem>
    </toolbar>
</toolbox>

CSS文件-facbrew.css

FaceBrew-Web-Button {

list-style-image: url("chrome://facebrew/skin/web.png");

}

解决方法:

如Paul所说,从工具栏调用函数时,文档上下文不同.使用以下命令获取当前选择的HTML文档对象：

var doc = gBrowser.selectedBrowser.contentDocument;
doc.getElementById(...);

另外,您始终可以查看错误控制台,以查看代码失败的原因(工具->错误控制台).

标签：getelementbyid,xul,toolbar,javascript
来源： https://codeday.me/bug/20191210/2100883.html