Question

我们在尝试加载Outlook预约插件时遇到问题。我们的命令显示在功能区ui中，并且插件正在尝试启动，我们可以跟踪对wev-app的调用。我们在跟踪中没有收到任何错误，404或500，服务响应我们的第一个html页面，其中包含一个文本和一个按钮来启动我们的身份验证。

但是在返回html之后，outlook才会停止使用插件的微调器，并且没有显示任何内容。是否有任何好的方法来调试它以了解正在发生的事情？

html页面非常简单，只包含以下代码。

<head>
    <title>Office-bokning</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/2.2.0/fabric.min.css">
    <link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/2.2.0/fabric.components.min.css">
    <script src="https://appsforoffice.microsoft.com/lib/1/hosted/Office.js" type="text/javascript"></script>
    <!--[authentication-popup-script]-->
    <script>
        startCheck = function () {
            var checkCode = setInterval(function () {

                localStorage.setItem('dummy', "dummy");
                localStorage.removeItem('dummy');
                var code = localStorage.getItem('code');
                var externalProviderUserId = localStorage.getItem('externalProviderUserId');

                function readCookie(name) {
                    var nameEQ = name + "=";
                    var ca = document.cookie.split(';');
                    for (var i = 0; i < ca.length; i++) {
                        var c = ca[i];
                        while (c.charAt(0) == ' ') c = c.substring(1, c.length);
                        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
                    }
                    return null;
                }

                var fallbackCode;
                var fallbackExternalProviderUserId;

                if (/^((?!chrome|android).)*safari/i.test(navigator.userAgent)) {
                    fallbackCode = readCookie('NAME_OF_COOKIE');
                    fallbackExternalProviderUserId = readCookie('externalProviderUserId');
                }
                console.log("code " + code);
                if (code || fallbackCode) {
                    clearInterval(checkCode);

                    var http = new XMLHttpRequest();
                    var url = [URL]
                    http.open("POST", url, true);

                    //Send the proper header information along with the request
                    http.setRequestHeader("Content-type", "text/plain");
                    //var that = this;
                    http.onreadystatechange = function () {
                        if (http.readyState == 4 && http.status == 200) {
                            localStorage.removeItem('code');
                            localStorage.removeItem('externalProviderUserId');
                            window.location.href = "[URL]";
                            //location.reload();
                        }
                    }
                    http.send(params);
                }
            }, 1000);
        }

        startCheck();
    </script>
</head>
    <body class="container-fluid" style="padding-left: 0px; padding-right: 0px; height: 100%">
        <p>
            Some text describing the addin...
        </p>
        <!--[popup-button]-->
        <script>
            Office.initialize = function (reason) {
                console.log("authorize office init" + reason);
                var butan = document.getElementById('loginButton');
                if (butan)
                    butan.style.display = 'block';
            }

            function commandFunction(event) {
                event.completed();
            }
        </script>
    </body>

Answer 1

TL; DR：您似乎想要弹出一个auth页面。使用displayDialogAsync API执行此操作。

查看您的代码，我认为它没有任何问题。此外，根据您拥有的代码，您描述的行为实际上是正确的。

我看到你有一个名为“commandFunction”的函数，它接受一个“event”参数。我的猜测是你的清单中有一个ExecuteFunction，它调用commandFunction。

因此，当用户在约会窗口的功能区ui中单击加载项按钮时，Outlook将加载您的html网页，调用“Office.initialize”，在“主题”上方显示您的应用的默认微调器在约会窗口的字段中，然后调用“commandFunction”。此函数中唯一的代码是“event.completed”，因此Outlook调用该代码，这基本上结束了应用程序的执行，此时Outlook将删除默认微调器以指示完成。这正是你所经历的。

在调用“event.completed”之前，您必须在“commandFunction”中运行任何相关代码。因此，例如，您可以在调用“event.completed”之前添加将向约会添加通知消息/信息栏的代码。示例代码如下：

function commandFunction(event)
{
    Office.context.mailbox.item.notificationMessages.addAsync
    (
        "some_unique_id_such_as_a_guid",
        {
            type: Office.MailboxEnums.ItemNotificationMessageType.InformationalMessage,
            persistent: false,
            message: "hello world",
            icon: "default_icon"
        },
        function (asyncResult)
        {
            // check asyncResult.status
            // do something
            event.completed(true);
        }
    );
}

在继续执行您的应用之前，您似乎想要打开一个html窗口供用户进行身份验证。在这种情况下，您应该在“event.completed”之前通过在“commandFunction”中调用它来使用“displayDialogAsync”API。这将打开一个指向身份验证页面URL的IE窗口。示例代码如下：

function commandFunction(event)
{
    Office.context.ui.displayDialogAsync
    (
        "https://ur/to/auth/page",
        {
            width: 50,
            height: 45,
            requireHTTPS: true
        },
        function (asyncResult)
        {
            // check asyncResult.status
            // do something
            event.completed(true);
        }
    );
}

displayDialogAsync API的文档位于：https://github.com/OfficeDev/office-js-docs/blob/master/reference/shared/officeui.md

要进行调试，请打开IE，转到“Internet选项” - ＆gt; '常规标签' - ＆gt;点击“设置”按钮，打开“网站数据设置”窗口。在“Internet临时文件”选项卡的“检查存储页面的较新版本”下，选择“每次访问网页时”。单击“确定”。

现在转到“高级”标签 - ＆gt; “设置”部分，取消选中以下内容：

禁用脚本调试（Internet Explorer）
禁用脚本调试（其他）

然后检查以下内容：

显示有关每个脚本错误的通知

然后添加“调试器”;作为“commandFunction”的第一行：

function commandFunction(event)
{
    debugger;
    // add other code below...
}

这将提示您在运行应用程序时调试代码。如果您有任何其他问题，可以在Visual Studio中进行调试并查看代码。

Answer 2

您粘贴的HTML没有对Office.js的引用：<script src="https://appsforoffice.microsoft.com/lib/1/hosted/Office.js" type="text/javascript"></script>

Office 365 Outlook预约addin无法启动

2 个答案: