触发 dialog.close 后，Word 加载项停止工作。办公JS答案

【问题标题】：Word add-in stops working after dialog.close is fired. Office JS触发 dialog.close 后，Word 加载项停止工作。办公JS
【发布时间】：2017-05-11 16:47:01
【问题描述】：

我一直在开发一个 Office365 应用程序，在该应用程序中我打开了一个对话框，并在使用 dialog.close() 关闭对话框时进行了某种活动。它工作得很好，但功能区按钮停止工作，下次它不会再次显示相同的对话框。

  Office.context.ui.displayDialogAsync("https://" + location.host + "/Dialog.html", { width: 90, height: 90, requireHTTPS: true }, function (asyncResult) {
        dialog = asyncResult.value;
        dialog.addEventHandler(Office.EventType.DialogMessageReceived, processMessage);
        if (asyncResult.status !== Office.AsyncResultStatus.Succeeded) {
            return;
        }
    });

这是我的 processMessage 函数

function processMessage(arg) {
try{
    var messageFromDialog = JSON.parse(arg.message);

    var base64 = messageFromDialog.image.split(",")[1];
    Word.run(function (context) {
        var body = context.document.getSelection();
        body.insertInlinePictureFromBase64(base64, Word.InsertLocation.replace);
        return context.sync();
    }).catch(function (error) {
        app.showNotification("Error: " + JSON.stringify(error));
        if (error instanceof OfficeExtension.Error) {
            app.showNotification("Debug info: " + JSON.stringify(error.debugInfo));
        }
    });
    if (messageFromDialog.messageType === "dialogClosed") {
        dialog.close();
    }
} catch (ex) {
    console.log("Exception " + ex);
}
}

提前致谢:)

更新

这个问题只出现在office online。

【问题讨论】：

您好，请问您是在哪个 Word 平台上遇到的？（即 Windows、Mac、在线？）另外，请将您的内部版本号发送给我们，以便我们进行更详细的调查。谢谢！
@JuanBalmori 我正在使用 Windows Word2016。
您能分享您的内部版本号吗？谢谢
内部版本号？对不起！
是的，如果您转到文件->帐户，您会在办公室徽标下方看到类似版本：XXXX (Build XXXX.XXXX) 可以发送该信息吗？谢谢！

标签： office365 office-js

【解决方案1】：

对于延迟调查此问题，我们深表歉意。长话短说，我必须对您的代码进行一些更改，这样才能正常工作，它引发了一些异常（请参阅下面的更改）。我没有您要插入的图像，因此我还假设您发送给该方法的 base64 是有效图像。另外仅供参考，请更新 Office 版本 16.0.7967.2139 于 4 月 21 日发布，但这也应该适用于您引用的版本。

以下是我所做的更改：

我将这一行更改为仅获取属性： var messageFromDialog = arg.message; （为什么要解析 JSON？）
我也修改了这个：if (messageFromDialog === "close")，我们没有 messageType 属性。（我们有类型）顺便说一句，我的 Dialog.html 页面看起来像这个（我看不到你的，但我假设用户正在选择一个图像）

<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js" type="text/javascript"></script>
    <script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.2.1.min.js"></script>

    <!-- For the Office UI Fabric, go to http://aka.ms/office-ui-fabric to learn more. -->
    <link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/2.1.0/fabric.min.css">
    <link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/2.1.0/fabric.components.min.css">
    <script>
        Office.initialize = function () {
            $('#button1').click(one);
            $('#button2').click(two);
        };

        function one()
        {
            Office.context.ui.messageParent("Picked 1");
        }

        function two() {
            Office.context.ui.messageParent("close");
        }

    </script>
</head>
<body>
    <p class="ms-font-xxl ms-fontColor-neutralSecondary ms-fontWeight-semilight">Pick a number</p>
    <button class="ms-Button ms-Button--primary" id="button1">
        <span class="ms-Button-icon"><i class="ms-Icon ms-Icon--plus"></i></span>
        <span class="ms-Button-label" id="button1-text">1</span>
        <span class="ms-Button-description" id="button1-desc">Number 1</span>
    </button>
    <button class="ms-Button ms-Button--primary" id="button2">
        <span class="ms-Button-icon"><i class="ms-Icon ms-Icon--plus"></i></span>
        <span class="ms-Button-label" id="button2-text">2</span>
        <span class="ms-Button-description" id="button2-desc">Number 2</span>
    </button>
</body>
</html>

我还认为您没有检查对话框是否正确关闭，您是通过消息执行此操作，但您需要订阅 DialogEventReceived 事件以了解用户是否关闭了对话框（而不是使用消息）。

function showDialog() {


    var url = "https://" + location.host + "/Dialog.html";
    Office.context.ui.displayDialogAsync(url, { width: 10, height: 10, requireHTTPS: true }, function (asyncResult) {
        dialog = asyncResult.value;
        dialog.addEventHandler(Office.EventType.DialogMessageReceived, processMessage);
        if (asyncResult.status !== Office.AsyncResultStatus.Succeeded) {
            app.showDialog("OK");
            return;
        }
        else {
            app.showDialog("whats up");
        }
    });

}


function processMessage(arg) {
    try {
        var messageFromDialog = arg.message;
       
        var base64 = messageFromDialog.image.split(",")[1];
        Word.run(function (context) {
var body = context.document.getSelection();
            body.insertInlinePictureFromBase64(base64, Word.InsertLocation.replace);
            return context.sync();
        }).catch(function (error) {
            app.showNotification("Error: " + JSON.stringify(error));
            if (error instanceof OfficeExtension.Error) {
                app.showNotification("Debug info: " + JSON.stringify(error.debugInfo));
            }
        });
        if (messageFromDialog === "close") {
            dialog.close();
        }
    } catch (ex) {
        console.log("Exception " + ex);
    }
}

【讨论】：

关于第 1 点和第 2 点。一旦我删除 JSON.Parse，它就会开始在下一行 messageFromDialog.image is undefined 上引发异常。也就是在这条线上：var base64 = messageFromDialog.image.split(",")[1];关于第3点，我已经处理了事件。请看我上面的问题。你能解释一下如何做到这一点吗？看起来messageType 属性在那里并且它也返回了相应的结果。
这里是arg 对象：{ [functions]: , __proto__: { }, message: "{"messageType":"dialogClosed","image":"data:image/png;base64,---64 string here---"}", type: "dialogMessageReceived" }
@Juan。看起来像。我们做的和你推荐的完全一样。我们正在解析 JSON，因为我们将 json 字符串化后放入消息中，并且我们已经订阅了您提到的事件。那么这篇文章的输出是什么？
你用的是什么office.js？你更新办公室了吗？代码现在可以工作了吗？
我将办公室更新为16.0.7927.1020，同样的事情也在处理。我的办公室说没有其他可用的更新，OfficeJs 是：<script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js" type="text/javascript"></script>