Question

我的代码包含以下标记

<div class="ms-Grid">
  <div class="ms-Grid-row">
    <div class="ms-Grid-col"><span id="firstName" class="ms-fontSize-l"></span></div>
    <div class="ms-Grid-col"><span id="lastName" class="ms-fontSize-l"></span></div>
  </div>
</div>

我正在使用Office.context.ui.displayDialogAsync显示HTML页面。

我想做的是用jQuery设置文本。

$('#firstName').text("a-name")

我已经知道如何使用Web服务从数据库中检索数据。

问题是， displayDialogAsync 显示的对话框是否可以动态更新？如果是这样，代码会去哪儿？（例如，在调用displayDialogAsync之前或之后，或者可能在初始化函数（文档或Office）内部

Answer 1

万一有人遇到与我相同的问题。这是我最终的示例代码。

<!DOCTYPE html>
<!-- Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license.
4  See LICENSE in the project root for license information -->
<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="Scripts/jquery-3.3.1.js"></script>

    <!-- For the Office UI Fabric, go to http://aka.ms/office-ui-fabric to learn more. -->
    <link rel="stylesheet" href="Content/fabric.min.css">
    <link rel="stylesheet" href="Content/fabric.components.min.css">
    <script>
        Office.initialize = function (reason) {
            // This JavaScript may be run inline, as it is here
            // Or it may run from a separate JavaScript file.
            //

            $("#firstName").text("John");
            $("#lastName").text("Doe");
           
        }

    </script>
</head>
<body>

    <div class="ms-Gridc ms-font-xxl ms-fontColor-neutralSecondary ms-fontWeight-semilight">
        <div class="ms-Grid-row">
            <div class="ms-Grid-col"><span id="firstName" ></span></div>
            <div class="ms-Grid-col"><span id="lastName"></span></div>
        </div>
    </div>
</body>
</html>

上述Html是从我从GitHub示例Dialog Sample获得的Javascript文件中调用的

openDialog 显示了displayDialogAsync的一种用法。

/*Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. 
4  See LICENSE in the project root for license information */

var dialog;

function dialogCallback(asyncResult) {
  if (asyncResult.status === "failed") {

    // In addition to general system errors, there are 3 specific errors for 
    // displayDialogAsync that you can handle individually.
    switch (asyncResult.error.code) {
      case 12004:
        showNotification("Domain is not trusted");
        break;
      case 12005:
        showNotification("HTTPS is required");
        break;
      case 12007:
        showNotification("A dialog is already opened.");
        break;
      default:
        showNotification(asyncResult.error.message);
        break;
    }
  } else {
    dialog = asyncResult.value;
    /*Messages are sent by developers programatically from the dialog using office.context.ui.messageParent(...)*/
    dialog.addEventHandler(Office.EventType.DialogMessageReceived, messageHandler);

    /*Events are sent by the platform in response to user actions or errors. For example, the dialog is closed via the 'x' button*/
    dialog.addEventHandler(Office.EventType.DialogEventReceived, eventHandler);
  }
}


function messageHandler(arg) {
  dialog.close();
  showNotification(arg.message);
}


function eventHandler(arg) {

  // In addition to general system errors, there are 2 specific errors 
  // and one event that you can handle individually.
  switch (arg.error) {
    case 12002:
      showNotification("Cannot load URL, no such page or bad URL syntax.");
      break;
    case 12003:
      showNotification("HTTPS is required.");
      break;
    case 12006:
      // The dialog was closed, typically because the user the pressed X button.
      showNotification("Dialog closed by user");
      break;
    default:
      showNotification("Undefined error in dialog window");
      break;
  }
}

function openDialog() {
   // Code to launch Dialog
  Office.context.ui.displayDialogAsync(window.location.origin + "/AsyncDialog.html", {
    height: 50,
    width: 50
  }, dialogCallback);
}

如何动态更新displayDialogAsync显示的对话框？

1 个答案: