Firefox XUL 工具栏与 javascript getElementById 相关的问题
我正在编写我的第一个 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");
}
I'm writing my first Firefox XUL toolbar, and am getting a strange behavior - in order to debug my code, I call the same js function from both the firefox toolbar and from a button on a very simple HTML file I created.
The javascript function displays an alert window, gets an element using 'document.getElementById', changes its color, and displays another alert window.
The javascript function works well when called using the HTML button, but when using the toolbar button the 'document.getElementById' returns null and the function terminates (only the first alert window shows).
Any guess what can be wrong? I provide the (very simple) code below for refenrece.
Many thanks in advance!
The javascript file - facebrew.js
function FaceBrew_rtlSelection() {
alert('Before!');
sel_node = document.getElementById("header");
sel_node.style.color = 'blue';
alert('After!');
}
The HTML file
<!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>
The XUL file - 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>
The CSS file - facbrew.css
#FaceBrew-Web-Button {
list-style-image: url("chrome://facebrew/skin/web.png");
}
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
正如保罗所说，当从工具栏调用函数时，文档上下文是不同的。获取当前选择的 HTML 文档对象：
此外，您还可以随时查看错误控制台以了解代码失败的原因（工具 -> 错误控制台）。
as Paul said, when function is called from toolbar, document context is different. get your currently selected HTML document object with:
also, you can always take a look at error console to see why your code is failing (Tools -> Error Console).
您的工具栏是一个覆盖层，因此上下文（文档和窗口）是 browser.xul，而不是您的 html 文件。
Your toolbar is an overlay, so the context (document and window) is browser.xul, no your html file.