logo标签列表

Firefox XUL工具栏中使用javascript getElementById出现问题

javascriptxultoolbargetelementbyid
3
我正在编写我的第一个Firefox XUL工具栏，但出现了奇怪的行为 - 为了调试我的代码，我从Firefox工具栏和我创建的非常简单的HTML文件中的按钮调用相同的js函数。
这个javascript函数显示一个警报窗口，使用“document.getElementById”获取一个元素，更改其颜色，并显示另一个警报窗口。
当使用HTML按钮调用该javascript函数时，它能够正常工作，但是当使用工具栏按钮时，“document.getElementById”返回null并且函数终止（只显示第一个警报窗口）。
有什么猜测可能会出错吗？下面提供（非常简单的）代码供参考。
非常感谢您的帮助！

Javascript文件- facebrew.js

function FaceBrew_rtlSelection() {
    alert('Before!'); 
  sel_node = document.getElementById("header");
    sel_node.style.color = 'blue';
    alert('After!'); 
}

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">

<head>
<title>Test</title>
    <script type="text/javascript" src="http://localhost/Sandbox/FaceBrew/chrome/content/facebrew.js"> </script>
</head>

<body>
<input type="button" value="Click me" id="select" onclick="FaceBrew_rtlSelection()" />
<div id="header">
  <h1>Hello world!< /h1>
</div>
</body>
</html>

XUL文件 - facebrew.xul

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://facebrew/skin/facebrew.css" type="text/css"?>

<overlay id="FaceBrew-Overlay"
         xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.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>
</overlay>

CSS文件 - facbrew.css

#FaceBrew-Web-Button {
    list-style-image: url("chrome://facebrew/skin/web.png");
}
也许工具栏正在使用的文档对象与当前加载的页面不同。 - amphetamachine
我忘了提到 - 如果HTML文件中的<h1>标签被删除，工具栏代码确实会成功。因此，我猜测工具栏和HTML按钮使用的是同一个文档对象。 - Omri Allouche
2个回答
3

正如Paul所说，当从工具栏调用函数时，文档上下文是不同的。使用以下方式获取当前选定的HTML文档对象：

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

此外，您可以随时查看错误控制台以查看代码失败的原因（工具 -> 错误控制台）。
1

你的工具栏是一个覆盖层，所以上下文（文档和窗口）是browser.xul，而不是你的HTML文件。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接