Windows小工具：如何修改DOM？

Question

Windows小工具：如何修改DOM？

3

我一直在创建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";
}

- bshacklett

1

你能贴一些代码吗？在小工具中修改DOM与在IE中一样简单，因此问题可能出在其他地方。 - Andy E

我已将代码添加到主帖中。 - bshacklett

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Andy E · Accepted Answer

你的代码看起来很好，我已经多次使用了 innerHTML 和链接 onclick，都没出现问题。我会检查两个方面。

在你的 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函数后，页面会导航到“＃”。我原本认为这不会是一个问题，因为＃通常会在不重新加载的情况下带您到页面锚点，但看起来这就是问题的原因。已经进行了全面测试。