Windows Gadgets: How do I modify the DOM?_问答_开发者

Windows Gadgets: How do I modify the DOM?

开发者 https://www.devze.com 2022-12-20 11:16 出处：网络

I\'ve been working on creating a Windows Desktop Gadget. I can create HTML elements I want with document.createElement. I can set their attributes and I can get those attributes after setting them, bu

I've been working on creating a Windows Desktop Gadget. I can create HTML elements I want with document.createElement. I can set their attributes and I can get those attributes after setting them, but anything I do to modify the document just fails completely silently. I'm not seeing any errors at all, but the gadget just doesn't change. Even something as simple as document.body.innerHTML = "asdf"; does absolutely nothing. The same code in IE8 works perfectly fine. What am I missing here?

gadget.xml:

<?xml version="2.0" encoding="utf-8" ?>
<gadget>
<name>Citrix Logon Controller</name>
<version>0.1&l开发者_运维百科t;/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";
}

Your code looks fine, and I have used innerHTML and link onclicks just fine many times. I would check two things.

Directly above your document.body.innerHTML = "asdf"; line, put window.prompt("","");. This will allow you to verify the function is even being called:

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

You can also add some before/after prompts to give you the value of innerHTML (see commented code).

Secondly, I would check for any transitions you might be using. In Vista System.Gadget.beginTransition() will lock the appearance of the gadget until System.Gadget.endTransition() is called. If an error is thrown in between these two functions, the endTransition() is never called and the gadget will locked up.

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

It's always safest to use a try/catch around what's in between. Other than that I can't say what might be causing your DOM issues, but my first suggestion (the prompt) might give you an idea of what the problem is.

UPDATE

Should have spotted this before. You need to cancel the default action, using return false;, of the link click:

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

After your innerHTML function is run, the page is navigated to "#". I didn't think this would be a problem, since # usually takes you to a page anchor without reloading but it looks like this is the cause of the problem here. Fully tested.