Outlook加载项在首次加载时显示为空HTML内容

发布于 2025-01-26 12:03:13 字数 1670 浏览 3 评论 0原文

我目前正在Outlook上建立一个Office 365 加载项，然后首先加载时，添加的HTML内容如下，因此，在整个添加之前，

<html>
 <head></head>
 <body></body>
</html>

第几秒钟后，我以为是从office.then函数下面显示的功能，我尝试在之前添加旋转器。背后的原因。

请注意，加载项是通过React开发的，以下是index.js页面另请注意，空白页仅在Windows的Outlook上显示安装在窗口10机器上

import "office-ui-fabric-react/dist/css/fabric.min.css";
import App from "./components/App";
import { AppContainer } from "react-hot-loader";
import { initializeIcons } from "@fluentui/react/lib/Icons";
import * as React from "react";
import * as ReactDOM from "react-dom";
import { Provider } from "react-redux";
import store from "../../store/store";
import 'react-app-polyfill/ie11';
import Spinner from '@atlaskit/spinner';

/* global AppCpntainer, Component, document, Office, module, React, require */
initializeIcons();

let isOfficeInitialized = false;
const title = "test";

const render = Component => {

ReactDOM.render(
  <Provider store={store}>
    <AppContainer>
      <Component title={title} isOfficeInitialized={isOfficeInitialized} />
   </AppContainer>
 </Provider>,
 document.getElementById("container")
  );
};

Office.onReady().then(function () {
 isOfficeInitialized = true;
  render(App);
});
render(App);

if (module.hot) {
 module.hot.accept("./components/App", () => {
   const NextApp = require("./components/App").default;
   render(NextApp);
  });
 }

原文

I am currently building an office 365 add-in on outlook and upon first load the add in is showing an empty html content like so before the whole add in render correctly after couple of seconds

<html>
 <head></head>
 <body></body>
</html>

First I thought it is from the office.then function shown below and I tried to add a spinner before the .then is called but the loader didn't show, and I couldn't find the reason behind this.

Note that the add-in is developed with react and the following is the index.js page
Also note that the blank page is only showing on outlook for windows installed on a window 10 machine

import "office-ui-fabric-react/dist/css/fabric.min.css";
import App from "./components/App";
import { AppContainer } from "react-hot-loader";
import { initializeIcons } from "@fluentui/react/lib/Icons";
import * as React from "react";
import * as ReactDOM from "react-dom";
import { Provider } from "react-redux";
import store from "../../store/store";
import 'react-app-polyfill/ie11';
import Spinner from '@atlaskit/spinner';

/* global AppCpntainer, Component, document, Office, module, React, require */
initializeIcons();

let isOfficeInitialized = false;
const title = "test";

const render = Component => {

ReactDOM.render(
  <Provider store={store}>
    <AppContainer>
      <Component title={title} isOfficeInitialized={isOfficeInitialized} />
   </AppContainer>
 </Provider>,
 document.getElementById("container")
  );
};

Office.onReady().then(function () {
 isOfficeInitialized = true;
  render(App);
});
render(App);

if (module.hot) {
 module.hot.accept("./components/App", () => {
   const NextApp = require("./components/App").default;
   render(NextApp);
  });
 }