Windows 小工具：如何修改 DOM？答案

【问题标题】：Windows Gadgets: How do I modify the DOM?Windows 小工具：如何修改 DOM？
【发布时间】：2010-02-18 23:59:00
【问题描述】：

我一直致力于创建 Windows 桌面小工具。我可以使用 document.createElement 创建我想要的 HTML 元素。我可以设置它们的属性，并且可以在设置它们之后获取这些属性，但是我为修改文档所做的任何事情都会完全静默地失败。我根本没有看到任何错误，但小工具并没有改变。即使像document.body.innerHTML = "asdf"; 这样简单的事情也绝对不会做任何事情。 IE8 中的相同代码运行良好。我在这里错过了什么？

gadget.xml：

<?xml version="2.0" encoding="utf-8" ?>
<gadget>
<name>Citrix Logon Controller</name>
<version>0.1</version>
<author name="Brian G. Shacklett">
    <info url="http://digital-traffic.net" />
</author>
<copyright>&#169; Brian G. Shacklett</copyright>
<description>Controls Citrix Logons.</description>
<hosts>
    <host name="sidebar">
        <base type="HTML" apiVersion="1.0.0" src="gadget.html" />
        <permissions>Full</permissions>
        <platform minPlatformVersion="1.0" />
    </host>
</hosts>
</gadget>

HTML：

<html>
    <head>
    <title>Citrix Manager</title>
    <script type="text/javascript">
        debugger;
    </script>
    <script src="scripts/debug.js" type="text/javascript"></script>
    <script src="scripts/gadget.js" type="text/javascript"></script>
    <script src="scripts/util.js" type="text/javascript"></script>
    <link type="text/css" rel="stylesheet" href="styles/gadget.css" />
</head>

<body >
    <div id="header"><h1>Citrix Manager</h1></div>
    <div id="mainContent">
        <a href="#" onClick="window.location.reload()">reload</a><br />
        <a href="#" onClick="testFunction();">New Server</a>
    </div>
</body>
</html>

gadget.js：

function testFunction()
{
document.body.innerHTML = "asdf";
}

【问题讨论】：

你能发布一些代码吗？在小工具中修改 DOM 与在 IE 中一样简单，因此问题可能出在其他地方。
我已将代码添加到主帖中。

标签： windows-desktop-gadgets

【解决方案1】：

您的代码看起来不错，我已经多次使用innerHTML 和链接onclicks。我会检查两件事。

在document.body.innerHTML = "asdf"; 行的正上方，放置window.prompt("","");。这将允许您验证该函数是否被调用：

function testFunction() 
{
    window.prompt("", "");
    // window.prompt("", document.body.innerHTML);    // before
    document.body.innerHTML = "asdf";
    // window.prompt("", document.body.innerHTML);    // after
}

您还可以添加一些之前/之后的提示来为您提供 innerHTML 的值（参见注释代码）。

其次，我会检查您可能正在使用的任何转换。在 Vista 中，System.Gadget.beginTransition() 将锁定小工具的外观，直到调用 System.Gadget.endTransition()。如果在这两个函数之间出现错误，则永远不会调用 endTransition()，并且小工具将被锁定。

System.Gadget.beginTransition();
blah = blah.blah.blah.blah;         // "blah" is null or not an object
System.Gadget.endTransition(System.Gadget.TransitionType.morph, 1.0);

在两者之间使用 try/catch 总是最安全的。除此之外，我不能说可能导致您的 DOM 问题的原因，但我的第一个建议（prompt）可能会让您了解问题所在。

更新

早该发现。您需要取消链接点击的默认操作，使用return false;：

   <a href="#" onClick="testFunction(); return false;">New Server</a>

innerHTML 函数运行后，页面导航到“#”。我不认为这会是一个问题，因为 # 通常会将您带到页面锚点而不重新加载，但看起来这是这里问题的原因。完全测试。

【讨论】：

我尝试了您的建议并在更改后输出了 document.body.innerHTML 的值。该值应显示为“asdf”，但小部件的界面未更新。 DOM 更新后是否需要为小部件运行重绘功能？
@bshacklett：不，这意味着很可能某处存在未完成的过渡（请参阅我的帖子的第二部分）。这是唯一可以阻止窗口重绘同时允许 JavaScript 代码执行的方法。我现在会检查你所有的文件并注释掉任何转换代码。
对不起，我忘了提到唯一正在运行的代码是上面列出的“testFunction()”。我摆脱了其他一切。
做到了！谢谢。这让我发疯了！