Question

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

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始终为null。通过调试器窥视System.Gadget.Flyout.document对象时，body参数为null - 我不认为这是正确的。首次加载小工具时，将在其他位置设置System.Gadget.Flyout.file值。

我做错了什么？

此外，在可以访问System.Gadget.Flyout.document属性之前，System.Gadget.Flyout.show属性是否必须为true？我的最终目标是打开一个弹出窗口并动态填充它的html

Answer 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;
}

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

1 个答案: