HTML 和 JavaScript 疑难解答指南

项目
07/05/2024

警告

自 2020 年 6 月 1 日起，适用于 Windows UWP 应用的 Microsoft 广告盈利平台将关闭。了解详细信息

本主题包含 JavaScript/HTML 应用中Microsoft播发库的常见开发问题的解决方案。

HTML
JavaScript

HTML

AdControl 不显示

确保在 Package.appxmanifest 中选择“Internet (客户端)”功能。
确保存在 JavaScript 引用。如果没有头>节（<default.js引用后）中的ad.js引用，AdControl 将无法显示，并且生成期间会发生错误。
```
<head>
    ...
    <script src="//Microsoft.Advertising.JavaScript/ad.js"></script>
    ...
</head>
```

检查应用程序 ID 和广告单元 ID。这些 ID 必须匹配在合作伙伴中心中获取的应用程序 ID 和广告单元 ID。有关详细信息，请参阅在应用中设置广告单元。

<div id="myAd" style="position: absolute; top: 50px; left: 0px;
                      width: 250px; height: 250px; z-index: 1"
     data-win-control="MicrosoftNSJS.Advertising.AdControl"
     data-win-options="{applicationId: 'ApplicationID',
                        adUnitId: 'AdUnitID'}">
</div>

检查高度和宽度属性。这些属性必须设置为横幅广告的受支持广告大小之一。

<div id="myAd" style="position: absolute; top: 50px; left: 0px;
                      width: 250px; height: 250px; z-index: 1"
     data-win-control="MicrosoftNSJS.Advertising.AdControl"
     data-win-options="{applicationId: 'ApplicationID',
                        adUnitId: 'AdUnitID'}">
</div>

检查元素定位。 AdControl 必须在可视区域内。

检查可见性属性。此属性不得设置为折叠或隐藏。此属性可内联设置（如下所示）或在外部样式表中设置。

<div id="myAd" style="visibility: visible; position: absolute; top: 1025px;
                      left: 500px; width: 250px; height: 250px; z-index: 1"
     data-win-control="MicrosoftNSJS.Advertising.AdControl"
     data-win-options="{applicationId: 'ApplicationID',
                        adUnitId: 'AdUnitID'}">
</div>

检查 position 属性。位置属性必须设置为适当的值，具体取决于元素的其他属性（例如父元素和 z 索引中的边距）。此属性可内联设置（如下所示）或在外部样式表中设置。

<div id="myAd" style="visibility: visible; position: absolute; top: 1025px;
                      left: 500px; width: 250px; height: 250px; z-index: 1"
     data-win-control="MicrosoftNSJS.Advertising.AdControl"
     data-win-options="{applicationId: 'ApplicationID',
                        adUnitId: 'AdUnitID'}">
</div>

检查 z-index 属性。 z 索引属性必须设置得足够高，以便 AdControl 始终出现在其他元素的顶部。此属性可内联设置（如下所示）或在外部样式表中设置。

<div id="myAd" style="visibility: visible; position: absolute; top: 1025px;
                      left: 500px; width: 250px; height: 250px; z-index: 1"
     data-win-control="MicrosoftNSJS.Advertising.AdControl"
     data-win-options="{applicationId: 'ApplicationID',
                        adUnitId: 'AdUnitID'}">
</div>

检查外部样式表。如果通过外部样式表在 AdControl 元素上设置属性，请确保正确设置上述所有属性。

<div id="myAd" style="visibility: visible; position: absolute; top: 1025px;
                      left: 500px; width: 250px; height: 250px; z-index: 1"
     data-win-control="MicrosoftNSJS.Advertising.AdControl"
     data-win-options="{applicationId: 'ApplicationID',
                        adUnitId: 'AdUnitID'}">
</div>

查看 AdControl 的父元素。 如果 AdControl 驻留在父元素中，则父元素必须处于活动状态且可见。

<div style="position: absolute; width: 500px; height: 500px;">
    <div id="myAd" style="position: relative; top: 0px; left: 100px;
                          width: 250px; height: 250px; z-index: 1"
         data-win-control="MicrosoftNSJS.Advertising.AdControl"
         data-win-options="{applicationId: 'ApplicationID',
                            adUnitId: 'AdUnitID'}">
    </div>
</div>

确保 AdControl 在视口中可见。 AdControl 必须可见才能正确显示广告。
ApplicationId 和 AdUnitId 的动态值不应在仿真器中测试。若要确保 AdControl 正常运行，请使用 ApplicationId 和 AdUnitId 的测试值。

黑盒闪烁和消失

仔细检查之前未显示的 AdControl 部分中的所有步骤。

处理 onErrorOccurred 事件，并使用传递给事件处理程序的消息来确定是否发生了错误，以及引发的错误类型。有关更多详细信息，请参阅 JavaScript 演练中的错误处理。

<div id="myAd" style="position: absolute; top: 0px; left: 0px;
                      width: 728px; height: 90px; z-index: 1"
     data-win-control="MicrosoftNSJS.Advertising.AdControl"
     data-win-options="{applicationId: 'ApplicationID',
                        adUnitId: 'AdUnitID',
                        onErrorOccurred: errorLogger}">
</div>
<div style="position:absolute; width:100%; height:130px; top:300px; left:0px">
    <b>Ad Events</b><br />
    <div id="adEvents" style="width:100%; height:110px; overflow:auto"></div>
</div>

导致黑盒的最常见错误是“无广告可用”。此错误意味着请求返回不了任何广告。

AdControl 行为正常。默认情况下，AdControl 在它无法显示广告时会折叠。如果其他元素均是相同父元素的子元素，它们可能会移动以填充折叠 AdControl 的间距，并在下一次提出请求时展开。

广告不刷新

检查 isAutoRefreshEnabled 属性。默认情况下，此可选属性设置为 true。如果设置为 false， 则必须使用刷新 方法检索另一个广告。

<div id="myAd" style="position: absolute; top: 0px; left: 0px;
                      width: 250px; height: 250px; z-index: 1"
     data-win-control="MicrosoftNSJS.Advertising.AdControl"
     data-win-options="{ applicationId: 'ApplicationID',
                        adUnitId: 'AdUnitID',
                        onErrorOccurred: errorLogger,
                        isAutoRefreshEnabled: true}">
</div>

检查对刷新方法的调用。使用自动刷新时，刷新不能用于检索另一个广告。使用手动刷新时， 仅应在至少 30 到 60 秒后调用刷新 ，具体取决于设备的当前数据连接。

此示例演示如何使用刷新方法。以下 HTML 代码演示了如何使用 isAutoRefreshEnabled 设置为 false 实例化 AdControl 的示例。

<div id="myAd" style="position: absolute; top: 0px; left: 0px;
                      width: 250px; height: 250px; z-index: 1"
     data-win-control="MicrosoftNSJS.Advertising.AdControl"
     data-win-options="{ applicationId: 'ApplicationID',
                        adUnitId: 'AdUnitID',
                        onErrorOccurred: errorLogger,
                        isAutoRefreshEnabled: false}">
</div>

Theis 示例演示如何使用刷新函数。

args.setPromise(WinJS.UI.processAll()
    .then(function (args) {
        window.setInterval(function()
        {
            document.getElementById("myAd").winControl.refresh();
        }, 60000)
    })
);

AdControl 行为正常。有时如果广告不刷新，相同的广告会连续出现多次。

JavaScript

AdControl 不显示

确保在 Package.appxmanifest 中选择“Internet (客户端)”功能。

确保 AdControl 已实例化。 如果未实例化 AdControl。它不可用。

以下代码片段显示了实例化 AdControl 的示例。此 HTML 代码演示了为 AdControl 设置 UI 的示例

<div id="myAd" style="position: absolute; top: 0px; left: 0px;
                      width: 250px; height: 250px; z-index: 1"
     data-win-control="MicrosoftNSJS.Advertising.AdControl">
</div>

以下 JavaScript 代码演示了实例化 AdControl 的示例

app.onactivated = function (args) {
    if (args.detail.kind === activation.ActivationKind.launch) {
        if (args.detail.previousExecutionState !==
                activation.ApplicationExecutionState.terminated)
        {
            var adDiv = document.getElementById("myAd");
            var myAdControl = new MicrosoftNSJS.Advertising.AdControl(adDiv,
            {
                applicationId: "{ApplicationID}",
                adUnitId: "{AdUnitID}"
             });                
             myAdControl.onErrorOccurred = myAdError;
        } else {
            ...
        }
    }
}

检查父元素。 <父 div> 必须正确分配、活动且可见。

var adDiv = document.getElementById("myAd");
var myAdControl = new MicrosoftNSJS.Advertising.AdControl(adDiv, {
    applicationId: "{ApplicationID}",
    adUnitId: "{AdUnitID}"
});

检查应用程序 ID 和广告单元 ID。这些 ID 必须匹配在合作伙伴中心中获取的应用程序 ID 和广告单元 ID。有关详细信息，请参阅在应用中设置广告单元。
```
var myAdControl = new MicrosoftNSJS.Advertising.AdControl(adDiv, {
    applicationId: "{ApplicationID}",
    adUnitId: "{AdUnitID}"
});  
```
检查 AdControl 的父元素。父元素必须处于活动状态并且可见。
ApplicationId 和 AdUnitId 的动态值不应在仿真器中测试。若要确保 AdControl 正常运行，请使用 ApplicationId 和 AdUnitId 的测试值。

黑盒闪烁和消失

仔细检查 AdControl 中未显示的所有步骤。

此示例演示如何实现报告错误消息的错误处理程序。此 HTML 代码片段提供了如何设置 UI 以显示错误消息的示例。

<div style="position:absolute; width:100%; height:130px; top:300px">
    <b>Ad Events</b><br />
    <div id="adEvents" style="width:100%; height:110px; overflow:auto"></div>
</div>

此示例演示如何实例化 AdControl。此函数将插入 app.onactivated 文件中。

var myAdControl = new MicrosoftNSJS.Advertising.AdControl(adDiv,
{
    applicationId: "{ApplicationID}",
    adUnitId: "{AdUnitID}"
});                
myAdControl.onErrorOccurred = myAdError;

此示例演示如何报告错误。此函数将插入default.js文件中自运行函数下方。

WinJS.Utilities.markSupportedForProcessing
(
    window.errorLogger = function (sender, evt)
    {
        adEvents.innerHTML = (new Date()).toLocaleTimeString() + ": " +
        sender.element.id + " error: " + evt.errorMessage + " error code: " +
        evt.errorCode + "<br>" + adEvents.innerHTML;
    }
);

导致黑盒的最常见错误是“无广告可用”。此错误意味着请求返回不了任何广告。

AdControl 行为正常。有时如果广告不刷新，相同的广告会连续出现多次。

广告不刷新

检查 AdControl 的 IsAutoRefreshEnabled 属性是否设置为 false。默认情况下，此可选属性设置为 true。在设置为 false 时，必须使用 Refresh 方法检索其他广告。

检查 Refresh 方法的调用。使用自动刷新（IsAutoRefreshEnabled 为 true）时，不能将 Refresh 用于检索其他广告。使用手动刷新（IsAutoRefreshEnabled 为 false）时，根据设备的当前数据连接，只应至少在 30 到 60 秒后调用Refresh。

此示例演示如何为 AdControl 创建 div。

<div id="myAd" style="position: absolute; top: 0px; left: 0px;
                      width: 250px; height: 250px; z-index: 1"
     data-win-control="MicrosoftNSJS.Advertising.AdControl">
</div>

此示例演示如何使用 Refresh 函数

var myAdControl = new MicrosoftNSJS.Advertising.AdControl(adDiv,
{
  applicationId: "{ApplicationID}",
  adUnitId: "{AdUnitID}",
  isAutoRefreshEnabled: false
});
...
args.setPromise(WinJS.UI.processAll()
    .then(function (args) {
        window.setInterval(function()
        {
            document.getElementById("myAd").winControl.refresh();
        }, 60000)
    })
);

AdControl 行为正常。有时如果广告不刷新，相同的广告会连续出现多次。

通过

HTML 和 JavaScript 疑难解答指南

HTML

AdControl 不显示

黑盒闪烁和消失

广告不刷新

JavaScript

AdControl 不显示

黑盒闪烁和消失

广告不刷新

反馈

其他资源