Windows 边栏小工具 - 无法访问 Flyout DOM 中的 div答案

【问题标题】：Windows Sidebar gadget - cannont access a div in Flyout DOMWindows 边栏小工具 - 无法访问 Flyout DOM 中的 div
【发布时间】：2010-03-12 08:51:52
【问题描述】：

在主小工具 html 中，有一个带有 onclick 的 div，它在小工具脚本文件中调用此方法：

ShowFlyout = function() 
{
    System.Gadget.Flyout.show = true;
    var flyoutDoc = System.Gadget.Flyout.document;
    var mainFlyoutDiv = flyoutDoc.getElementById('divFlyout');
    mainFlyoutDiv.innerHTML = "hello";
}

这是 Flyout html：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
    <title>This is a flyout</title>
    <link href="Css\FlyoutStyle.css" type="text/css" rel="Stylesheet" />
</head>
<body>
    <div id="divFlyout" >
    </div>
</body>
</html>

问题在于 mainFlyoutDiv 始终为空。通过调试器查看 System.Gadget.Flyout.document 对象时，body 参数为 null - 我认为这不对。首次加载小工具时，System.Gadget.Flyout.file 值正在其他位置设置。

我做错了什么？

另外，System.Gadget.Flyout.show 属性是否必须为真才能访问 System.Gadget.Flyout.document 属性？我的最终目标是打开一个弹出窗口并动态填充它的 html

【问题讨论】：

标签： javascript windows-desktop-gadgets

【解决方案1】：

这里的问题是浮出控件是异步加载的（因为它是一个全新的窗口）。线

var mainFlyoutDiv = flyoutDoc.getElementById('divFlyout');

在 Flyout 文档完成解析之前执行，这就是它为 null 的原因 - 元素还不存在。有几个选项可供您使用，我最喜欢的是这样的：

ShowFlyout = function()    
{   
    System.Gadget.Flyout.show = true;   
    var flyoutWin = System.Gadget.Flyout.document.parentWindow;   
    flyoutWin.myCustomVar = "Hello";
}

在弹出的 HTML 中，添加一个包含以下代码的脚本：

window.onload = function ()
{
    document.getElementById("divFlyout").innerHTML = myCustomVar;
}

【讨论】：

噢！这应该是我想到的。我最终将 ShowFlyout 方法连接到 System.Gadget.Flyout.onShow 属性。谢谢:)